Google PageInsights ist streng

von Johannes Pichler

Google PageInsights ist streng, besonders mit Bildern

Wer kennt das nicht. Die Webseite wird für Google PageInsights (ehemals Google Page Speed) optimiert. Da kann an vielen Ecken und enden getweakt werden. Doch eines der großen Probleme sind die Bilder.

Google ist ziemlich streng, was das betrifft. Wir haben uns diesbezüglich mal genau mit der Thematik beschäftigt.

 

Wir sind immer wieder auf das Problem gestoßen, dass Kunden zu große Bilder hochladen, die von der GD Bibliothek, welche Contao nutzt, nicht verarbeitet werden können. Das war Anlass für Klaus und mich, unsere eigene Bildbearbeitungs-Integration mit ImageMagick zu schreiben. Das hat bis vor einiger Zeit auch tadellos geklappt. Jedoch ist Google seit geraumer Zeit ziemlich streng, was die Web-Optimierung von Bildern betrifft.

Daher habe wir uns heute mal die Zeit genommen und in unser Modul die beiden Bild-Optimierungs-Tools "jpegoptim" und "optipng" zu integrieren. Diese beiden Tools agieren als Post-Prozessoren für die Bildbearbeitung.

Also auf deutsch, PNG und JPG Bilder werden zusätzlich mit diesen beiden Tools optimiert. Auch die Contao-Hooks wurden erweitert, sodass auch nicht transformierte Bilder im Assets Cache angelegt werden und dort optimiert abgelegt werden. Über die Auswirkung waren wir wirklich mehr als überrascht. Alleine diese Änderung hat bei meiner webpixels.at Seite einen drastischen Score-Unterschied gemacht. Von ca. 42/100 Punkte auf 100/100 Punkte.

Und das nur mit der Optimierung der Bilder.

Fazit: Ihr solltet euch nicht nur auf die Board-Mitteln verlassen sondern auch selber die technischen Aspekte und Anforderungen kritisch hinterfragen und selber optimieren.

 

Falls jemand interesse am Modul hat, kann er/sie sich gerne bei Klaus oder mir melden.

Zurück

Einen Kommentar schreiben

Kommentar von Markus |

Danke für den Tipp!

Ihr könnt auch die Bilder vorher über den Dienst https://tinypng.com in der richtigen Größe optimieren lassen. Die Ergebnisse sind wesentlich besser als von "jpegoptim" und "optipng". Ich hatte das schon öfters in Projekten gesehen, das der online Dienst die besseren Ergebnisse lieferte, wo Google PageInsights mit den Optimierungen von "jpegoptim" und "optipng" immer noch gemeckert hat. Für viel Bilder macht euer Modul auf jeden Fall Sinn.

Was aber auch viel bringt, ist die Anzahl der eingebunden JS und CSS Dateien zusammen zu fassen, oder nur auf den Seiten einzusetzen wo sie benötigt werden.

Ich hab dazu eine kleine Anleitung in mein GipfelBuch geschrieben.
https://www.codesache.de/gipfelbuch/css-und-js-dateien-in-bestimmten-seiten-einbinden

Viele Grüße

Markus

Antwort von Johannes Pichler

Hallo Markus!

 

Danke für Deinen Kommentar. Ja klar, Above-The-Fold und Ressource-Combine ist klar. Ich wollte hier nur zeigen, wie gravierend die Bilder den Wert beeinflussen können.

TinyPNG ist ein guter Tipp!

 

LG, Johannes 

Kommentar von Nikolai |

Hi,
ich glaube es geht sogar noch schneller als mit tinypng.
Wenn man bei google pagespeed insights eine Seite analysieren lässt, wird zusammen mit den Hinweiß »Possible Optimizations« auch folgender download Link angezeigt »Download optimized image, JavaScript, and CSS resources for this page.«
Hier kann man ein zip Datei runterladen in der u.a. alle Bilder von der Webseite schon optimiert sind. Man muss sie dann nur ersetzen.

Es werden aber nicht alle Bilddateien einer Seite zum Download extrahiert. Z.B werden Bilder einer js-Slideshow ignoriert.

Grüße, Nikolai

Antwort von Johannes Pichler

Hallo Nikolai,

naja, dieser Ansatz geht wohl etwas an einem CMS vorbei. Das CMS muss die Bilddaten selbst optimiert ausliefern. Nicht nachher manuell via Insights optimierte Bilder runterladen und dann im Assets-Cache austauschen.

LG, Johannes

Kommentar von Nikolai |

Hi Johannes,
ja Du hast Recht.
Ich habe diese Tage diesen »Service« zufällig entdeckt und wollte es hier erwähnen. Normalerweise benutze ich beim png/jpg-Optimieren auf dem Mac ImageOptimize und online tinyjpg.com.

Grüße, Nikolai