Themen / Website & Apps

PageSpeed Insights Optimierung
Bilder in modernen Formaten bereitstellen


PageSpeed Insights ist ein Onlineservice von Google, der die Ladezeit von Webseiten einstuft und optimiert. Wir zeigen hier, wie Du Deine Bilder optimieren kannst, um den bestmöglichen Score zu erhalten.

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.

merle-im-wasser

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:

pagespeed-lab-data

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.

pagespeed-optimization.jpg

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 deiner Besucher noch mit alten Safari Versionen oder dem Internet Explorer deine Webseite besuchen.

Tabelle, welche Bildformate von welchen Browsern unterstützt werden.

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.

google-pagespeed-merle-im-wasser-optimiert

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.

merle im wasser 1 cloudinary
https://res.cloudinary.com/demo/image/fetch/w_800,f_auto,q_80,e_hue:40,r_20/https://wizardly-newton-762ddd.netlify.app/merle_im_wasser_1.jpg

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. Deine Besucher müssen somit nicht viel Gedult aufweisen und auf die Inhalte auf der Webseite warten.

Wenn Du in diesem Bereich Unterstützung benötigst, dann nimm doch gerne mit uns Kontakt auf.

codeblick


Wir sind eine Digital- & E-Commerce Agentur mit einem hochqualifizierten Expertenteam. Wir entwickeln auch für Sie und Ihr Unternehmen den passenden und effektiven digitalen Weg und stehen Ihnen als Ihr Partner bei der Digitalisierung zur Seite.

Bereits zahlreiche Kunden aus ganz Deutschland werden von uns unterstützt, schenken uns Ihr Vertrauen und lassen Sich von neuesten Technologien sowie modernstem Know-How & Lösungen täglich begeistern.

Wir sind eine qualifizierte und erfahrene Contentful- und Shopware Partner Agentur, sowie Partner von Facebook, Google und vielen weiteren. Kurz gefasst: Digitale Lösungen sind unsere Stärke - Lassen Sie uns gemeinsam digital überzeugen!

Google Partner Agentur codeblick aus Augsburg
Shopware Partner Agentur codeblick aus Augsburg, München und Umgebung.
codeblick Ihre Contentful Agentur aus München.

Suchen Sie einen Partner mit dem Sie Ihr Vorhaben umsetzen können?