Weil Bilder insbesondere auf E-Commerce-Websites eine wichtige Rolle spielen, hat Google jetzt einige Tipps zur Optimierung von Bildern auf solchen Websites vorgestellt.
Die Optimierung von Bildern kann eine wichtige Rolle bei der Verbesserung der User Experience von Websites spielen. Das gilt insbesondere für E-Commerce-Websites, auf denen es oftmals eine große Anzahl von Bildern gibt.
In einem neuen Video gibt Alan Kent von Google sechs Tipps zur Optimierung von Bildern auf solchen Websites.
Vermeiden des Cumulative Layout Shifts (CLS)
Der Cumulative Layout Shift (CLS) ist eine von drei Kennzahlen, die Google zur Bewertung der Page Experience von Webseiten verwendet: den Core Web Vitals. Sie sind ein Rankingfaktor für Google.
Der CLS drückt aus, ob es beim Laden einer Webseite zu plötzlichen und unerwarteten Verschiebungen von Inhalten kommt. Solche Verschiebungen können zum Beispiel durch Bilder ausgelöst werden. Daher ist es wichtig, Bilder mit einer Höhen- und Breitenangabe im Quellcode zu versehen. So kannn der Browser bereits vor dem Laden eines Bildes den benötigten Platz reservieren. Das hilft dabei, Verschiebungen von Inhalten durch Bildern zu vermeiden.
Verwenden der passenden Bildmaße
Auf manchen Webseiten werden Bilder verwendet, deren Ausmaße größer sind, als es für die Darstellung im Browser nötig ist. Das gilt insbesondere für die mobile Darstellung auf Smartphones mit kleinen Bildschirmen. Große Bilder bedeuten viel Datenvolumen, das übertragen werden muss. Zudem belasten große Bilder die CPU der Geräte stärker als kleinere Bilder.
Daher sollte darauf geachtet werden, die passenden Ausmaße für Bilder zu verwenden. Das kann zum Beispiel durch das Anbieten unterschiedlich großer Bilder für verschiedene Auflösungen geschehen. Möglich ist auch der Einsatz von Content Delivery Networks (CDNs), die von sich aus in der Lage sind, Bilder passend auszuliefern.
Verwenden des passenden Dateityps
Je nachdem, welches Dateiformat für ein Bild verwendet wird, kann sich die Dateigröße deutlich unterscheiden. Moderne Bildformate wie webP bieten enormes Optimierungspotential.
Dabei ist darauf zu achten, welche Bilder eine besonders hohe Qualität besitzen müssen und bei welchen Bildern geringfügige Qualitätsverluste zugunsten kleinerer Bilddateien akzeptabel sind. So sollten zum Beispiel Navigationselemente wie Klickflächen sehr gut lesbar sein, während bei größeren Produktbildern eine geringfügige Qualitätsreduktion oftmals gar nicht auffällt
Leider unterstützen nicht alle Browser alle Bilddateitypen. Um herauszufinden, auf welchen Browsern ein bestimmter Dateityp funktioniert, kann man die Website caniuse.com besuchen.
Bildkompression
Das Komprimieren von Bildern ist eine weitere Möglichkeit zum Reduzieren der Dategröße. Google PageSpeed Insights zeigt für getestete Seiten eine Liste von Bildern an, die für eine Komprimierung in Frage kommen. Allerdings ist dabei zu beachten, dass PageSpeed Insights nicht auf Qualitätsverluste durch das Komprimieren achtet. Daher sollte man die Effekte mit einem geeigneten Tool wie zum Beispiel squoosh.app selbst testen.
Vorsicht ist außerdem geboten, wenn die Nutzer die Möglichkeit haben, ein Bild per Zoom zu vergrößern. Dann muss die Qualität des Bildes entsprechend höher sein.
Caching der Bilder
Für Bilder, die sich nur selten ändern, sollte eine ausreichend lange Caching-Dauer durch den Webserver angegeben werden. Bei einem erneuten Besuch der Seite durch denselben Nutzer müssen die entsprechenden Bilder dann nicht nochmals übertragen werden, sondern können aus dem Cache des Browsers ausgespielt werden. Kandidaten für eine Optimierung der Caching-Dauer sind ebenfalls in Google PageSpeed Insights zu finden.
Verwendet man ein CDN, so sorgt dieses durch das Cachen von Bildern in unterschiedlichen Knoten des Netzes ebenfalls für ein schnelles und effizientes Ausspielen der Bilder.
Optimale Reihenfolge zum Download der Bilder beachten
Normalerweise sollten große Bilder wie das Hero Image einer Seite zuerst geladen werden. Der Grund dafür ist, dass große Elemente den Largest Contentful Paint (LCP) beeinflussen, der ebenfalls zu den Core Web Vitals gehört.
Im nächsten Schritt sollten alle anderen Bilder geladen werden, die ohne scrollen sichtbar sind. Diese Bilder befinden sich "above the fold", also im direkt sichtbaren Seitenbereich. Bilder, die "below the fold" sind, können danach geladen werden.
Darauf sollten Bilder folgen, welche direkt nach dem Scrollen auftauchen, bei denen also die Chance auf eine Anzeige also recht groß ist. Und schließlich sind die Bilder an der Reihe, die erst nach längerem Scrollen zu sehen sind.
Eine verbreitete Praxis, dies umzusetzen, ist Lazy Loading. Dadurch werden Bilder erst dann geladen, wenn sie den sichtbaren Bereich einer Webseite erreichen. Aber Achtung: Lazy Loading nicht für Bilder above the fold verweden, weil dies den LCP der Seite erhöhen kann.
Schließlich kann auch der Einsatz von HTTP/2 das Laden von Bildern beschleunigen.
Titelbild: Google
SEO-Newsletter bestellen
