WebP und Co. PageSpeed Optimierung mit Next-Gen Formaten

Lukasz Gawrys

8. April 2019

Einer der wichtigsten Faktoren heutzutage für die PageSpeed ist die Größe von Bildern. Visuell ansprechendes und modernes Webdesign basiert des Öfteren auf dem Einsatz von mehreren Bildern. Damit diese scharf und hochauflösend unter Anderem auch auf Retina-Displays aussehen, werden Sie in großen Auflösungen hochgeladen. Das führt schnell zu längerer Ladezeit einer Website, und wirkt sich negativ auf first contentful paint aus. First contentful paint ( auf Deutsch: Erste Inhalte gezeichnet ) ist ein von Google bestimmter Wert und stellt eine wichtige Messstation für die Performance-Beurteilung dar.
Diese Herausforderungen haben die Browser-Entwickler dazu bewogen, an neuen, besser optimierten Formaten für die Auslieferung der Bilder zu arbeiten. Das Ergebnis sind die Next-Gen Formate: WebP, JPEG 2000, JPEG XR.
JPEG 2000, JPEG XR und WebP sind Bildformate, die im Vergleich zu älteren JPEG- und PNG-Formaten überlegene Komprimierungs- und Qualitätseigenschaften aufweisen. Das Kodieren der Bilder in diesen Formaten anstelle von JPEG oder PNG bedeutet, dass sie schneller geladen werden und weniger Mobilfunkdaten verbrauchen.
WebP wird in Chrome und Opera unterstützt und bietet eine bessere verlustbehaftete und verlustfreie Komprimierung von Bildern im Web.
Browserunterstützung ist für WebP nicht universell, aber ähnliche Einsparungen sollten in den meisten gängigen Browsern in einem alternativen Next-Gen-Format verfügbar sein. Für die Unterstützung anderer Browser müssen Sie ein Fallback-PNG- oder JPEG-Bild bereitstellen. Für WordPress-basierte Webseiten ist es sinnvoll, ein WordPress CDN einzusetzen, welches die Bilder in den modernen Bildformaten automatisch bereitstellt.

Ob Sie schon jetzt die Next-Gen Formate nutzen können, werden Sie mit der Seite caniuse.com am besten Herausfinden.
„caniuse.com“ bietet aktuelle Browser-Unterstützung Tabellen für die Unterstützung von Frontend-Technologien auf Desktop- und mobilen Webbrowsern.
Für die Next-Gen Formate sehen die Resultate folgendermaßen aus:

WebP

WebP

JPEG XR

JPEG XR

JPEG 2000

JPEG 2000

Aus den dort verfügbaren Daten lässt sich ersehen, dass WebP das am breitesten implementierte Next-Gen Format ist und – global betrachtet – bei 78,02% Internetnutzer verfügbar. Vor allem zu betonen ist die Tatsache, dass die meisten modernen Mobile-Browsers bereits dieses Format unterstützen.
Das Verwenden dieses Formats ein großes Entgegenkommen diesen Nutzern ist. Dies wird natürlich auch sehr gut von Google bewertet, denn Google vergibt schon seit einiger Zeit extra Punkte den Seiten, die besonders mobil freundlich sind.
Wenn Sie die Tabellen von caniuse.com selbst benutzen und da nachsehen möchten, welche Next-Gen Formate unterstützt werden, können Sie dies mit folgenden URLs tun:

WebP
JPEG 2000
JPEG XR

Next-Gen Formats in Google PageSpeed Insights und Lighthouse
Wie bereits erwähnt, spielt die Ladezeit der Webseite für Google eine enorme Rolle. Das ist auch der Grund, warum Google kostenlos solche Tools wie Google Lighthouse zur Verfügung stellt. Google Lighthouse analysiert die Webseite im Hinblick auf 5 Kategorien:

Performance ( Page Speed )
Erreichbarkeit ( Accessibility )
Die besten Lösungen ( Best Practices )
SEO ( Suchmaschinenoptimierung )
Progressive Web App

Und erstellt für jeden dieser Bereichen einen Scoring in Skala von 0 bis 100 sowie gibt dem User eine Reihe von Hinweisen, worauf er bei dem jeweiligen Bereich achten soll.

In dem Bereich Performance spielen die Bilder die wichtigste Rolle. Bezogen auf Bilder gibt es meistens zwei Hinweise von Google Lighthouse, die man sehr ernst nehmen soll, wenn man wirklich gute Performance eigener Webseite erreichen möchte.
Zum einen wird man häufiger den Hinweis “Defer offscreen images” und zum anderen “Serve images in next-gen formats” sehen. Der erste Hinweis bezieht sich darauf, dass die Bilder grundsätzlich “lazyloaded” sein sollen. Das bedeutet, die sollen nur dann nachgeladen werden, wenn Sie wirklich gebraucht werden, also wenn der User zu dem Bereich auf der Seite gescrollt hat, in dem tatsächlich das Bild benötigt wird.
Der zweite Hinweis bezieht sich selbstverständlich auf die Next-Gen Formate. Lighthouse verlangt grundsätzliche alle Bilder in den genannten next-gen Formaten auszuliefern und macht dort keine Abstriche. Die Benutzerfreundlichkeit hat für Google die höchste Prio und bei Ihnen muss es auch so sein, damit Sie erfolgreich im Internet mit Ihrem Angebot sein können.
WebP Format in der Praxis
Damit Sie noch ein konkretes Beispiel haben können, wie das WebP Format in der Wirklichkeit performt, können Sie sich folgenden Vergleich anschauen.
Hier haben wir eins und dasselbe Bild – zum einen im klassischen png-Format und zum anderen in dem WebP-Format.

WP-Smush optimiertes Bild

Bild ohne Optimierung

Sie sehen dann, dass der Qualitätsunterschied kaum sichtbar ist. Der Unterschied in der Dateigröße liegt aber auf der Hand 125kb vs 70 kb zugunsten des optimierten Bildes.
Wie können man heute Nex-Gen Formate in WordPress-Projekten verwenden?
Die Herausforderungen bei der Implementierung von Nex-Gen Formaten können überwältigend sein. Schließlich muss man mehrere Sachen beachten.

Man muss die Bilder erstmal in drei Next-Gen Formate komprimieren
Man muss ein Fallback-Mechanismus entwickeln, welches das richtige Format dem User anzeigt und zur Not die klassische PNG oder JPEG Datei als letzten Fallback ausliefert.
Man muss sich um lazyloading kümmern.

Wenn man das für jedes einzelne Bild alleine machen müsste, würde es viel Zeit in Anspruch nehmen und die meisten Webentwickler würden darauf verzichten.
Zum Glück gibt es ein hervorragendes Plugin – Smush Pro – welches in der PRO Version mit der eigenen CDN-Cloud-Infrastruktur sehr mächtig ist.
Wir optimieren z.B aller Bilder mit Smush Pro auf Webseiten, die einen monatlichen Wartungsvertrag mit uns haben.

Bei Alphta ist WP-Smush ein fester Bestandteil eines monatlichen Wartungsvertrages.

WP-Smush Pro schreibst selbst über sich: Smush Pro ist das effizienteste Plug-in für die Bildoptimierung, um WordPress rasante Ladezeiten zu ermöglichen.