PageSpeed Insights Optimierung

Bilder in modernen Formaten bereitstellen

Meine Hündin Merle liebt das Wasser und ihr Herrchen liebt das Fotografieren. Somit ist es kein Wunder, dass es eine ganze Sammlung von Fotos mit ihr im Wasser gibt. Um diese Fotos mit anderen zu teilen, tat ich das - für mich als Webentwickler - Selbstverständlichste und baute fix eine kleine Seite.

Da ich möchte, dass diese Seite schnell lädt, habe ich sie durch PageSpeed Insights laufen lassen. Dies ist ein Onlineservice von Google, der die Ladezeit von Webseiten einstuft und optimiert. Der Service kann direkt im Browser aufgerufen werden indem die überprüfende URL eingegeben wird. Nach einer meistens relativ kurzen Ladezeit erhält man das Ergebnis. Alternativ kann die Bewertung auch direkt in Chrome mit dem Lighthouse Plugin ausgeführt werden.

In meinem Fall erhielt ich folgende Auswertung:

Berechnung der Google PageSpeed Insights Bewertung

Google misst verschiedene Performance Indikatoren auf der Webseite und vergleicht sie mit anderen Webseiten anhand dem riesigen HTTP-Archive.

Erste Inhalte gezeichnet First Contentful Paint gibt an, wann der erste Text oder das erste Bild gezeichnet wird. Weitere Informationen

Geschwindigkeitsindex Der Geschwindigkeitsindex gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden. Weitere Informationen

Largest Contentful Paint Largest Contentful Paint gibt an, wann der längste Text bzw. das größte Bild gezeichnet wird. Weitere Informationen

Zeit bis Interaktivität Die Zeit bis Interaktivität entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist. Weitere Informationen

Gesamtdauer der Blockierung Summe aller Zeiträume (in Millisekunden) zwischen FCP und Zeit bis Interaktivität, wenn die Aufgabendauer 50 ms überschreitet. Weitere Informationen

Kumulative Layoutverschiebung Cumulative Layout Shift misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs. Weitere Informationen

Alle diese Werte werden zu einer Bewertung zwischen 0 und 100 mit einer logarithmischen Normalverteilung verrechnet. Dies bedeutet auch, dass es sehr schwierig ist die vollen 100 Punkte zu erreichen. Prinzipiell gilt die grobe Faustregel:

• Wenn die Note größer als 50 ist, dann sind 75 % der getesteten Webseiten im Archiv langsamer als die Eigene.
• Wenn die Note größer als 92 ist, dann sind 92 % der getesteten Webseiten im Archiv langsamer als die eigene.

Neben der Bewertung gibt Google aber auch Tipps, wie die Performance verbessert werden kann. Im ersten Teil dieses Blogbeitrags werden wir uns mit dem Thema “Bilder in modernen Formaten bereitstellen” beschäftigen.

Browserkompatibilität von WebP, JPEG 2000 und JPEG XR

Heutzutage gibt es neue Formate, die JPEG als Bildformat ablösen können. Diese bieten vor allem kleinere Dateigrößen bei gleichbleibender Qualität. Gerade bei einer langsamen Internetgeschwindikeit über das mobile Datenvolumenist ist das natürlich sinnvoll.

Vorgeschlagen werden die Formate JPEG 2000, JPEG XR und WebP. Unser einziger Favorit davon ist WebP. Denn im Gegensatz zu den anderen Formaten ist WebP mit allen modernen Browsern kompatibel. Die anderen Formate sollten nur dann genutzt werden, wenn ein Großteil Ihrer Besucher noch mit alten Safari Versionen oder dem Internet Explorer deine Webseite besuchen.

JPEG 2000 Kompatibel ausschließlich mit Safari für Mac und iOS

JPEG XR Nicht mit modernen Browsern kompatibel, ausschließlich mit frühen Versionen von Edge und dem Internet Explorer.

WebP Kompatibel mit allen modernen Browsern, auch Samsung Internet oder Opera. Funktioniert erst seit der Version 14 mit Safari.

Umwandlung von JPEG Bildern nach WebP

Um JPEG Dateien in WebP umzuwandeln, benötigt man ein Kommandozeilen-Tool, welches von Google bereitgestellt wird. Da ich Ubuntu nutze, zeige ich kurz, wie man es auf Linux installiert, es gibt aber auch Versionen für Windows und OSX.

sudo apt-get update
sudo apt-get install -y webp

Nutzen kann man das Programm dann über die Kommandozeile mit folgenden Parametern.

cwebp -q [quality] [input] -o [output]

Die Qualität wird mit einem Wert zwischen 0 (schlecht) und 100 (sehr gut) angegeben. Input ist der Pfad zur JPEG Datei, die umgewandelt werden soll. Mit dem Output gibt man an, wo und unter welchem Namen das WebP gespeichert werden soll. Dies mache ich nun für alle Bilder auf meiner Webseite.

cwebp -q 80 merle_im_wasser_1.jpg -o merle_im_wasser_1.webp

Das Bild merle_im_wasser_1.jpg hat die Größe 616KB und das dazugehörige WebP nur noch 71KB. Somit sparen wir hier ganze 545KB und das Ergebnis fällt bei den anderen Bildern ähnlich aus.

Integration des WebP Formats in HTML

Um die konvertierten Bilder in die Webseite einzubauen, muss man statt einem Img-Tag nun einen Picture-Tag benutzen. So kann man verschiedene Formate angeben und der Browser wählt dann selbstständig sein bevorzugtes Format aus.

<picture>
  <source srcset="img/merle_im_wasser_1.webp" type="image/webp">
  <source srcset="img/merle_im_wasser_1.jpg" type="image/jpeg"> 
  <img src="img/merle_im_wasser_1.jpg" alt="Merle schüttelt sich im Wasser">
</picture>

Nach dieser Optimierung können wir direkt den PageSpeed Insights Test wiederholen und überprüfen, ob unsere Veränderungen bereits Wirkung zeigen. Und siehe da: Wir haben nun 99 Punkte! Der Punkt “Bilder in modernen Formaten bereitstellen” ist aus den Empfehlungen verschwunden.

Lösungen ohne den manuellen Konvertierungsaufwand

Möchte man sich die ganze manuelle Konvertierungsarbeit sparen und gleichzeitig noch ein paar coole Features dazu gewinnen, dann kann man auch einen Service wie Cloudinary nutzen. Dieser bietet eine Vielfalt an Bild- und Video-Transformationen, die einfach über die URL gesteuert werden können. Zudem kann Cloudinary automatisch anhand des Browsers des Besuchers das kleinste möglich Bildformat auswählen, wodurch wir uns die Anpassungen im HTML-Coode sparen.

Neben Cloudinary gibt es natürlich auch noch andere Services, die solche Funktionen anbieten. So enthält auch das Headless CMS Contentful eine Images API, mit der Bilder skaliert, zugeschnitten und konvertiert werden können. Aber auch Wir als Agentur bieten unseren Kunden eine eigene Image CDN Lösung an, die automatisch die Bilder auf der Webseite in kleinere Formate umwandelt und die Qualität der Bilder entsprechend anpasst. Ihre Besucher müssen somit nicht viel Gedult aufweisen und auf die Inhalte auf der Webseite warten.

Wenn Sie in diesem Bereich Unterstützung benötigen, dann nehmen Sie doch gerne mit uns Kontakt auf.