Lazy Loading beschleunigt unseren Gambio-Onlineshop (GX3 – GX26 3.5 – 26.09) durch das bedarfsweise Nachladen von Bildern, die beim Seitenaufruf noch gar nicht sichtbar sind – etwa in aufklappbaren Menüs, im Footer oder weiter unten auf langen Seiten. Sowohl Google als auch Nutzer von Mobilgeräten danken Ihnen den Geschwindigkeitsgewinn durch Lazy Loading im Gambio-Modul zur Ladezeitoptimierung.
Natives Lazy Loading für optimale Performance
Wegen immer breiterer Unterstützung ist natives Lazy Loading heute die einzige noch benötigte Variante.
Das Modul aktiviert für praktisch jedes Bild im HTML-Code automatisch das browsereigene, native Lazy Loading (loading="lazy"). Der Browser lädt das jeweilige Bild dann erst, wenn es sich dem sichtbaren Bereich nähert – egal ob es sich um ein Produkt-Vorschaubild, ein Bild in einem aufklappbaren Menü oder eine Grafik im Footer handelt. Eine separate Konfiguration je Bereich ist dafür nicht mehr nötig: Ein einziger Schalter im Admin-Menü Ladezeitoptimierung aktiviert Lazy Loading shopweit.
Intelligente Erkennung für LCP-Bild
Wichtig für den LCP-Wert: Ein pauschales „alle Bilder lazy laden“ würde ausgerechnet das meist größte, zuerst sichtbare Bild verzögern – genau das für den LCP entscheidende. Das Modul erkennt dieses Bild (ebenso wie das Logo im Kopfbereich) automatisch und nimmt es von der Lazy-Loading-Behandlung aus.
Das Modul versucht bereits, Bilder als LCP-Elemente zu erkennen und diese vom Lazy Loading auszunehmen. Um händisch das Lazy Loading für bestimmte Bilder zu deaktivieren, kann man selbst ein Loading-Attribut mit dem Wert eager in den HTML-Code einfügen, also so:
<img src="" alt="" loading=eager>
Wird Lazy Loading empfohlen?
Ja, eindeutig. Natives Lazy Loading ist kein proprietärer Trick, sondern seit 2019 fester Bestandteil des offenen HTML-Standards (WHATWG Living Standard) und wird von Google selbst in der eigenen web.dev-Dokumentation ausdrücklich empfohlen – mit derselben Einschränkung, die unser Modul automatisch umsetzt: Das LCP-Bild sollte niemals lazy geladen werden.
Auch die Praxis gibt der Empfehlung recht: Laut dem Web Almanac von HTTP Archive setzt inzwischen etwa ein Drittel aller Websites natives Lazy Loading ein – 2022 war es noch rund ein Viertel. Und die Sorge vor einem sichtbaren Ruckler beim Nachladen ist unbegründet: Chrome-Messungen zufolge sind über 95% der lazy geladenen Bilder binnen 10 Millisekunden vollständig geladen, sobald sie in den sichtbaren Bereich gelangen – für Besucher praktisch nicht wahrnehmbar.
Lazy Loading & PageSpeed
Zumindest hinsichtlich der Bilder in aufklappbaren Menüs und im Footer Ihres Gambio-Shops hat Google’s PageSpeed Insights völlig recht, wenn es empfiehlt: Nicht sichtbare Bilder aufschieben, um die Zeit bis zur Interaktivität zu reduzieren.
Googles inzwischen eingestelltes Test My Site schlägt mit Tipps, „wie Sie eine schnellere und reibungslosere mobile Erfahrung bieten können“ in die gleiche Kerbe. Die Empfehlung lautet: Offscreen-Bilder später laden. Die bedrohlich wirkenden Grußworte, sind kaum zu widerlegen: „Eine langsame mobile Website wirkt sich negativ auf Ihr Geschäft aus.“
Egal, ob nun PageSpeed Insights, das Page-Speed-Tool von Pingdom oder Test My Site: Nutzen Sie das Lazy Loading, um mit dem Gambio-Modul zur Ladezeitoptimierung die Geschwindigkeit Ihres Onlineshops im Mobilfunknetz zu erhöhen.