Natives Lazy-Loading - loading="lazy"

Wenn wir einen schnelleren Aufbau einer Website wollen, dann kann man sich überlegen, ob man bei der Bildkomprimierung noch etwas herausholen kann oder viel einfacher: Die Bilder im Anfangs nicht sichtbaren Bereich einfach bei Gelegenheit vom Browser nachladen lässt. Sprich alle Bilder, die erst durch scrollen sichtbar werden, verstopfen auch nicht das erste Laden und schnelle Anzeigen der Website.

Hier hat Google mit Chrome ab der Version 76 eine Integration, die Richtungsweisend für andere Browserhersteller sein sollte. Auf jeden Fall hat man alle aktuellen Google Chrome User und Android-Browser damit abgedeckt. Besonders bei Handy-Nutzern spielt der Geschwindigkeitszuwachs und das Sparen von Datenvolumen eine große Rolle!

Wie weitverbreitet die Integration ist, sieht man unter https://caniuse.com/#feat=loading-lazy-attr

Zur Integration wird dem HTML-Befehl <img einfach mit dem Attribut loading="lazy" erweitert. Die Browser, die dieses Attribut noch nicht kennen, ignorieren es einfach. Also viel gewonnen und nichts verloren!

Unser HTML-TAG sieht dann komplett so aus:

<img src="bildname.jpg" loading="lazy" alt="Bildbeschreibung">

Zusätzlich kann dasselbe Vorgehen bei iframes verwendet werden.

<iframe loading="lazy" src="https://www.youtube.com/embed/bP0ev1A6zFc"></iframe>

Auch die HTML-Befehle <srcset> und <picture> unterstützen das lazy-load-Attribut.

Kontrolle des Ladens

Bei den Entwicklertools von Google Chrome kann unter dem Reiter „Netzwerk“ das Laden der einzelnen Elemente live verfolgt werden. Sind die Bilder noch ohne das Attribut loading="lazy" eingebunden, werden diese so schnell wie möglich geladen.

Sobald das Attribut loading="lazy" außerhalb des sichtbaren Startbereichs eingebunden ist und wir scrollen im Browser zu dem entsprechenden Bild, wird dieses nachgeladen. Die Netzwerkaktivität ist dann direkt live verfolgbar. So erhalten wir eine für den Nutzer gefühlt schnellere Seite, die intelligent nachlädt.

Auch wenn nicht alle Browser dieses Feature unterstützen, ein sehr großer Anteil der Internetsurfer nutzt Chrome. Je nach Besuchergruppe 30 – 50 Prozent.

Empfehlung: einsetzen!