Bilder ohne Javascript Funktionalität nachladen (lazyload)

Wer kennt das aus alten Projekten nicht? Man bedient sich diverser JavaScript libraries, welche Bilder die außerhalb des Viewports angezeigt werden, nachladen sollen. Diese Lösung ist jedoch nicht mehr die sauberste:

• Man braucht JavaScript Code, der die Scrollposition überwacht
• Man produziert eigentlich invalides HTML, außer man fügt im <img src=".." /> des Bildes einen Platzhalter ein
• Oftmals funktioniert es nicht richtig, weil sich zB die Höhe bzw. Position der Bilder dynamisch ändert und die library das einmal berechnet
• etc...

Es gibt aber eine ganz einfache Lösung auf Browser Level, die man nur benutzen muss.

Loading Eigenschaft von <img> und <iframe> Tag

<img src="image.jpg" alt="..." loading="lazy" />

<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Diese Eigenschaft lädt die Ressource erst, wenn diese auch vom Viewport erreicht wird. In der Praxis sehe ich leider immer wieder neue Websites, die dieses Feature nicht nutzen. Ich kann es nur empfehlen. Es ist fast kein Aufwand und lädt keine Bilder umsonst auf deinen Rechner.

Verhindere lazyloading für sofort sichtbare Inhalte

Für sofort nach Laden der Website ersichtliche Ressourcen sollte man loading="lazy" vermeiden. Man sollte nur Ressourcen nachladen, die außerhalb des sichtbaren Bereichs sind.