Lazy Loading ohne JavaScript

Jeder Besucher schätzt eine schnell ladende Webseite. Beim sogenannten Lazy Loading werden daher Bilder erst bei Bedarf nachgeladen. Bisher war dies nur mit JavaScript möglich. Das ändert sich jetzt.

Lazy Loading ist ein häufig eingesetztes effizientes Mittel um die Datenmenge zu reduzieren, die beim Laden einer Website übertragen werden muss. Dabei werden Bilder nicht sofort geladen, sondern erst dann, wenn sie durch Scrollen in den sichtbaren Bereich – den sogenannten Viewport – gelangen. Das Ergebnis ist eine kürzere #ladezeit.

Erreicht wurde das bisher mit JavaScript. Das ändert sich jetzt mit der nativen Lazy Load Unterstützung seitens der Browser.

Beginnend mit der Version 76 von Chrome hat Google in seinem Browser vor etwa einem halben Jahr die Möglichkeit zum Lazy Loading von Bildern und IFrames eingebaut. So kann die #performance direkt mit HTML verbessert werden, ohne JavaScript verwenden zu müssen.

Dazu wurde das Attribut loading dem <img> und dem <iframe> Tag hinzugefügt. Mit <img loading="lazy" src="..."> beispielsweise wird der Browser angewiesen, ein Bild erst dann zu laden, wenn es sich im sichtbaren Bereich befindet.

Da Chromium auch von anderen Browser-Herstellern genutzt wird, existiert diese Möglichkeit mittlerweile auch in weiteren Browsern. An einer Implementierung in Firefox wird derzeit ebenfalls gearbeitet.

Laut caniuse.com liegt die globale Verbreitung von Browsern, die natives Lazy Loading unterstützen, aktuell bei knapp über 60%. Das mag zur Zeit noch zu wenig sein, um ganz auf eine JavaScript-Lösung zu verzichten. Aber es ist auf jeden Fall an der Zeit, einen näheren Blick darauf zu werden.

Beim ersten Test ist meine Neugier schnell einmal Ernüchterung gewichen, weil es nicht wie erwartet funktioniert hat. Alle Bilder meiner Test-Seite wurden trotz loading="lazy" auf einmal geladen.

Die Ursache war aber dann schnell gefunden. Anscheinend entscheidet Chrome, ob es sinnvoller ist, die Bilder nachzuladen oder auf einmal zu laden. Anfangs hatte ich nämlich nur zwei Bilder auf der Seite. Mit mehreren Bildern hat es dann wie gewünscht funktioniert.

Natives Lazy Loading in WordPress mit Plugin

Es gibt bereits einige Plugins zum Umsetzen des nativen Lazy Loadings. Einige davon habe ich getestet.

Native Lazyload

Das Plugin Native Lazyload stammt von Google und damit vom Erfinder des nativen Lazy Loading durch den Browser. Mit aktuell über 8.000 aktiven Installationen ist es das derzeit am meisten eingesetzte Plugin zum Nutzen des Browser-eigenen Lazy Loadings.

Das Plugin bietet keinerlei Einstellungen. Wenn es aktiv ist, wird allen <img> und <iframe> Tags das Attribut loading="lazy" hinzugefügt. Darüber hinaus liefert das Plugin auch ein JavaScript Fallback mit, damit das Lazy Loading auch in Browsern funktioniert, die das loading Attribut nicht unterstützen.

Der JavaScript Code ist sehr schlank und benötigt kein jQuery. Die Ausgabe des Scripts lässt sich mit einem Filter unterbinden. Auch das habe ich getestet. Dann funktioniert das Lazy Loading erwartungsgemäß im Firefox nicht.

Das Plugin funktioniert perfekt und punktet mit der JavaScript Fallback Lösung. Damit funktioniert Lazy Loading in allen Browsern.

LH Native Lazy Loading

Das Plugin LH Native Lazy Loading von Peter Shaw bietet ebenfalls keine Einstellungen und fügt das Lazy Loading Attribut bei Bildern und IFrames hinzu. Eine Besonderheit ist, dass das Attribut jeweils beim ersten Objekt nicht hinzugefügt wird, sondern erst ab dem zweiten.

Dies soll wohl sicherstellen, dass das erste Objekt immer sofort geladen wird. Dass dies nötig ist, glaube ich nicht. Befindet sich ein Element schon beim Laden innerhalb des Viewport, nehme ich an, dass das Attribut keine Auswirkung hat und das Objekt sofort geladen wird.

Das Plugin funktioniert derzeit nur in Browsern, die das loading Attribut bereits unterstützen. Um Lazy Loading in allen Browsern zu aktiveren kann zusätzlich eines der zahlreichen Plugins installiert werden, die Lazy Loading mittels JavaScript realisieren.

Native Image Lazy Loading

Das Plugin Native Image Lazy Loading von Justin Downey kommt ebenfalls ohne JavaScript Fallback und ist das einzige in dieser Aufzählung, das eine Einstellungs-Seite bietet. Hier lässt sich die Loading-Methode für das erste Bild und alle weiteren Bilder getrennt einstellen.

Damit soll – sofern gewünscht – eine Konfiguration wie beim vorherigen Plugin ermöglicht werden, um das erste Bild immer sofort zu laden.

Dieses Plugin behandelt nur <img> Tags, was kein Nachteil ist, wenn man keine IFrames einsetzt. Sehr wohl ein Nachteil ist aber, dass nur Bilder im Content-Bereich behandelt werden, wohingegen die beiden vorher aufgeführten Plugins auch Beitragsbilder und Avatare behandeln.

Natives Lazy Loading direkt in WordPress

Neben den vorher genannten Plugins existiert seit einigen Tagen auch ein Feature Plugin. Sogenannte Feature Plugins dienen dazu, neue Funktionen, die in einer künftigen Version von WordPress erscheinen sollen, erst einmal als Plugin zu entwickeln.

Lazy Loading Feature Plugin

Das Lazy Loading Feature Plugin behandelt derzeit ebenfalls nur Bilder. Die Beschreibung lässt jedoch vermuten, dass die Unterstützung für IFrames bald folgen wird.

Das Plugin bietet auch keinerlei Einstellungen, jedoch einen Filter, mit dem Entwickler das loading Attribut verändern können. Ebenso ist kein Fallback mittels JavaScript vorhanden, was nachvollziehbar ist, wenn die Funktion in WordPress so integriert werden soll.

Eine Integration in den Kern von WordPress ist die eleganteste Lösung. Aus dem zugehörigen WordPress Trac Ticket geht hervor, dass derzeit eine Einführung mit WordPress 5.5 geplant ist.

Ursprünglich war sogar eine Veröffentlichung mit Version 5.4 angedacht, allerdings hat die Beta-Phase für diese Version in der Zwischenzeit bereits begonnen. Die #wpversion 5.5 ist derzeit für August geplant.

Bis dahin wird die Unterstützung für natives Lazy Loading seitens der Browser weiter zunehmen. Wenn die Verbreitung dann groß genug ist stellt sich die Frage, ob überhaupt noch eine Fallback Lösung mit JavaScript nötig ist.

Fazit

Mit dem nativen Lazy Loading durch den Chrome Browser hat Google einen großen Wurf gelandet. Die Unterstützung ist in Anbetracht dessen, dass die Veröffentlichung erst vor einigen Monaten erfolgt ist, jetzt schon ziemlich gut.

Wer bisher noch kein Lazy Loading im Einsatz hat ist mit dem Plugin von Google bestens bedient. Eine Lösung, die nur JavaScript verwendet und nicht auf das native Lazy Loading setzt, würde ich zum jetzigen Zeitpunkt nicht mehr neu einsetzen.

Wer bereits ein Lazy Loading Plugin mit JavaScript im Einsatz hat, braucht aus meiner Sicht derzeit nicht zu wechseln. Auf einen JavaScript Fallback würde ich zum jetzigen Zeitpunkt noch nicht verzichten und dann bringt der Wechsel relativ wenig.

Meine Empfehlung ist auf WordPress 5.5 zu warten und dann abzuwägen, ob man nur mehr natives Lazy Loading unterstützt und ganz auf eine JavaScript Lösung verzichtet.