Über Layzloading
Sinn und Zweck
Bilder auf einer Website bedeuten Daten, die Besucher und Besucherinnen herunterladen müssen. Je mehr Bilder integriert sind und je größer die Bilder sind, desto mehr Daten müssen heruntergeladen werden. Dadurch verringert sich die Ladegeschwindigkeit der Website.
Lazyloading ist eine Strategie, um Ressourcen als nicht-blockierend (unkritisch) zu identifizieren und diese nur bei Bedarf zu laden. Bilder, die nicht im sichtbaren Bereich liegen, werden durch Lazyloading beim Aufruf der Website nicht geladen. Erst, wenn die Besucher oder Besucherinnen beispielsweise herunterscrollen, werden auch die Bilder heruntergeladen und angezeigt.
Verhalten des Moduls für das Lazyloading
Anstatt des Originalbildes platziert das Modul zunächst ein leeres Inline-SVG-Bild mit den Abmessungen des Originalbilds.
Sobald das Bild in den sichtbaren Bereich gelangt, misst das Modul, auf welche Auflösung der Browser das transparente Platzhalterbild skaliert hat und darstellt. Anschließend tauscht das Modul die Quelle (src) des Bildes (<img>) aus durch:
/cdn/(w={renderBreite},h={renderHoehe},v={timestampDerOriginalDatei}).jpg
Weil der Zeitstempel im Dateinamen enthalten ist, wird bei Änderung der Originaldatei auch eine neue Cache-Datei erzeugt und der Browsercache/Cloudflare lädt keinen alten Stand aus dem Cache.
Der originale Pfad des Bildes steht im Bild (<img>) im Attribut data-src.
Beispiel: Das Modul hat das Bild hero.jpg mit Lazyloading geladen. Dann finden Sie u. a. folgende Informationen im HTML-Code:
<img src="https://[IhrShop].de//cdn//out/pictures/media/hero(w=759,h=645,v=1666622886).jpg" data-src="/out/pictures/media/hero.jpg">
Hinweis: Lazyloading funktioniert nur dort, wo Sie JavaScript ausführen können. Sie sollten es beispielsweise nicht in E-Mail-Templates einsetzen, da E-Mail-Clients in der Regel kein JavaScript ausführen.