Home » Was uns Pagespeed Insights zur Bildoptimierung sagt

Was uns Pagespeed Insights zur Bildoptimierung sagt

Viele von uns nutzen WordPress  Themes die von Haus aus responsive sind. Dabei wird einiges unternommen, dass die mobile Seite genauso schnell lädt wie die Desktop Version. 

Bei allen Optimierungsmaßnahmen ist oft das Erste, die Bilder zu komprimieren. Ruft man aber nach den Optimierungen dann Pagespeed Insights auf wird folgendes angezeigt.

Pagespeed Bilder optimieren

Obwohl man das Bild schon optimiert hat, versteht man den Hinweis nicht. Man denkt, dass man dann ein weiteres, besseres Tools zur Bildkomprimierung finden muss. Aber jede weitere Komprimierung führt nicht zum gewünschten Ergebnis. Der Hinweis bleibt.

Aber warum ist das so?

Wenn Du ein responsive Layout für Deine WordPress Webseite benutzt wird die Skalierung durch Anweisungen in der CSS-Datei erreicht.

Hast Du ein großes Bild von 980 Pixel Breite auf Deiner Webseite und es wird auf die Breite eines Smartphones von 320 Pixel skaliert, muss der Browser jedoch viel Arbeit leisten.

Bilder optimieren

Tipp: Falls Du die Erweiterung Developer Tools bei Google Chrome installiert hast, kannst Du mit einem Rechtsklick auf das Bild die Bildgröße ablesen; zum Beispiel, wenn Du vorher das Browserfenster verkleinert hast.

Bilder Groesse messen

Vor allem bei mobilen Geräten ist es jedoch wichtig, nicht zu große Bilder anzubieten, weil bei langsamen Verbindungen hoch aufgelöste Bilder nicht in akzeptabler Zeit geladen werden.

Das Problem daran: Auch bei kleinem Bildschirm wird immer das große Bild geladen. Wie lange die Skalierung im Einzelfall dauert, hängt von der Dateigröße ab.

Besser wäre es, wenn bei kleinem Bildschirm angepasste Bilder ausgeliefert werden. D.h., aber einer gewissen Auflösung wird das große Bild gegen ein Kleineres ausgetauscht.

Dies spart an Ladezeit und reduziert auch die fehlerhafte Darstellung von Bildern bei extremen Skalierungen.

Diese Möglichkeit kann mit dem Hammy Plugin umgesetzt werden.  Durch setzen sogenannter Breakpoints wird das große Bild gegen ein Kleineres ausgetauscht. 

 

Bilder optimieren mit Plugin

Ein Video auf der Plugin Downloadseite erklärt verständlich die einfache Einstellungen.

Ich habe das Plugin getestet und es hat fast perfekt funktioniert.

Nicht ganz perfekt, da bei meinem hier eingesetzten Theme, nach dem ich die Größe des Browserfensters erst verkleinert und dann wieder vergrößert habe, nur noch die kleinen Bilder angezeigt.  

Vieleicht funktioniert es bei Deinem Theme besser. Einfach mal ausprobieren.

Da ich etwas enttäuscht war, habe ich nach einer weiteren Lösung gesucht. Diese Lösung – die ich nach wie vor auf dieser Seite nutze –  habe ich Schritt für Schritt in meinem E-Book WordPress schneller machen beschrieben.