Mit Bildoptimierung zu schnelleren Ladezeiten – So optimieren Sie die Bilder Ihres Webshops für bestmögliche Core Web Vitals
Schnellere Ladezeiten mit Bildoptimierung
Die Optimierung der Bilder einer Webseite bietet oftmals das größte Potenzial zur Verbesserung der PageSpeed und Core Web Vitals. Für diesen Zweck bieten sich eine Reihe an Maßnahmen an. Hierzu zählen vordergründig das Verwenden der modernsten Bildformate und die Komprimierung der Bilder auf eine niedrigere Größe. Anhand eines konkreten Beispiels erfahren Sie in diesem Beitrag, wie Sie die Bilder Ihrer Seite optimieren und welche Auswirkungen die Optimierung auf PageSpeed und Core Web Vitals hat.
Das Format zählt
Seit einigen Jahren findet ein Umschwung von altbekannten Bildformaten wie JPG oder PNG hin zu modernen Formaten wie WEBP oder AVIF statt. WEBP-Bilder sind im Vergleich zu JPEG- oder PNG-Dateien bei gleicher Bildqualität rund 30 % kleiner. Folglich schneidet das Format beim PageSpeed-Score besser ab und wird deshalb auch von Google offiziell beworben und gefördert. Entsprechend wurden auch in unserem Beispiel die im JPG-Format vorhandenen Bilder in das WEBP-Format konvertiert. Hierfür gibt es zahlreiche kostenlose Tools. Im Idealfall werden die zu verwendenden Bilder jedoch direkt im passenden Format gerendert.
Achtung: Einige veraltete Browser-Versionen unterstützen neuere Formate wie WEBP nicht. Speziell der Safari-Browser von Apple ist erfahrungsgemäß anfällig für fehlenden WEBP-Support. Daher macht es ggf. Sinn, ein “Fallback”-Bildformat festzulegen, auf das zurückgegriffen werden kann, falls kein WEBP-Support besteht.
Shopware Bilder komprimieren, um Ressourcen zu sparen
Das Ziel der Komprimierung ist es, die Dateigröße eines Bildes zu reduzieren, aber gleichzeitig die Qualität weitestmöglich zu erhalten und so den Ladeaufwand einer Webseite, einhergehend mit einer Reduzierung der Ladezeiten, zu verringern. Zwar werden Bilder von Shopware bereits standardmäßig komprimiert, jedoch bedarf es meist einer eigenhändigen Komprimierung, um eine bestmögliche Reduzierung der Größe Ihrer Bilder zu erzielen.
Für das Komprimieren von Bildern eignen sich gängige Bildbearbeitungsprogramme wie Photoshop oder GIMP. Jedoch gibt es auch viele kostenlose Webseiten, mit denen man Bilder schnell und einfach im Browser komprimieren kann.
Durch das Komprimieren und Konvertieren der Bilder in ein modernes Bildformat konnten wir bei marginalem Qualitätsverlust 700 KB an Dateigröße einsparen. Was erstmal nach nicht viel klingt, stellt im prozentualen Vergleich jedoch eine Reduzierung um knapp 80 % dar.
Man merkt also: Jedes Kilobyte zählt!
Shopware Lazy Loading
Lazy Loading (“faules Laden”) sorgt dafür, dass auf einer Webseite immer nur die Inhalte geladen werden, die auch für den Nutzer sichtbar sind. In der Praxis heißt das, dass etwa beim Stöbern durch eine Produktkategorieseite Stück für Stück die Produkte geladen werden, die durch das Scrollen vom Nutzer ins Fenster geholt werden. Das Gegenstück zum Lazy Loading ist das Eager Loading, bei dem umgehend beim Zugriff auf die Seite der gesamte Inhalt geladen wird. Demzufolge führt Lazy Loading dazu, dass beim Öffnen einer Webseite weniger Inhalte geladen werden müssen, was ebenfalls einen erheblichen positiven Effekt auf die Ladezeit der Seite hat.
Lazy Loading wurde in der Vergangenheit hauptsächlich per JavaScript implementiert. Jedoch besteht heute auch die Möglichkeit des nativen Einbindens, was wiederum Ressourcen einspart, die sonst für JavaScript-Code verwendet würden. Der positive Effekt auf die Ladezeit wird somit nochmals verstärkt. Für das Einbinden von Lazy Loading in Shopware stehen eine Reihe an Plugins zur Verfügung.
Recap – Was hat es gebracht?
Vor der Optimierung:
Nach der Optimierung:
Alle Werte in direkten Vergleich:
Durch unsere Optimierungsmaßnahmen konnten wir bei fast allen Metriken der Core Web Vitals eine positive Verbesserung erzielen. Entsprechend hat sich der Performance-Score um insgesamt 24 Punkte von 66 auf 90 verbessert! Es zeigt sich also, dass man durch ein paar einfache Handgriffe sowohl das Ranking als auch die User Experience einer Seite verbessern kann, was folglich auch einen positiven Effekt auf die Conversion Rate und andere wichtige Kennzahlen hat.
Wir halten fest: Die Verbesserung der PageSpeed durch eine umfassende Bildoptimierung ist ein nicht zu vernachlässigender Faktor in der Suchmaschinenoptimierung!