Das sogenannte Lazy Loading für Bilder ist eine echte Verbesserung für die Performance von bildlastigen Webseiten. Was sich dahinter verbirgt, zeigt dieser Beitrag.
Inhaltsverzeichnis
- Was genau ist »Lazy Loading« überhaupt?
- Lazy Loading für Bilder im HTML aktivieren
- Bis auf Safari können es alle modernen Browser
- WordPress lädt Bilder seit Version 5.5 »lazy«
Was genau ist »Lazy Loading« überhaupt?
Ein Bild sagt nicht nur mehr als tausend Worte, es lädt auch länger, und je mehr Bilder auf einer Seite sind, desto länger dauert es, bis sie vollständig geladen ist.
- Normalerweise auf einer Webseite alle Bilder geladen.
- Auf langen Seiten mit vielen Bildern kann das eine ganze Weile dauern.
- Mit Lazy Loading lädt der Browser nur die Bilder, die im Viewport auch wirklich zu sehen sind.
- Bilder weiter unten auf der Seite werden erst bei Bedarf geladen, wenn der Benutzer scrollt.
Der Browser ist also quasi faul (lazy) und lädt nur die Bilder im aktuellen Viewport (loading).
Lazy Loading für Bilder im HTML aktivieren
Das Aktivieren von Lazy Loading für Bilder ist total einfach. Sie fügen bei den entsprechenden Bildern im Quelltext einfach das Attribut loading mit dem Wert lazy ein:
<img src="bilddatei.jpg" loading="lazy" ... > Die anderen Attribute wie alt, width und height lassen Sie einfach so wie gehabt. Den Rest macht der Browser. Die genaue Reihenfolge der Attribute spielt wie immer keine Rolle.
Bis auf Safari können es alle modernen Browser
Die meisten modernen Browser unterstützen Lazy Loading für Bilder. Details zur Browserunterstützung gibt’s wie immer auf caniuse.com:
Safari kann bis inklusive Version 14 mit dem Attribut loading standardmäßig nichts anfangen und lädt nach wie vor alle Bilder, aber es gibt keinerlei Risiken oder Nebenwirkungen.
WordPress lädt Bilder seit Version 5.5 »lazy«
Notiz am Rande: WordPress macht dies seit der Version 5.5 vom August 2020 automatisch, und seitdem sieht man das Lazy Loading von Bildern im Web wesentlich häufiger: