Natives Lazy Loading im Browser: Bilder ohne Script erst bei Bedarf laden

Natives Lazy Loading meint, dass das Lazy Loading in den gängigen Browsern nativ unterstützt wird. Lazy Load selbst ist eine Technik, die Bilder auf einer Website erst dann lädt, wenn der*die Besucher*in sie auch tatsächlich sieht. Einfach gesagt ist es mit Lazy Load also so, dass Bilder ganz unten auf der Website nicht geladen werden müssen, wenn der*die Besucher*in gerade ganz oben auf der Seite ist. Das spart Ressourcen und Ladezeiten, sorgt also für eine deutlich bessere Performance und auch der erste Seitenaufruf wird stark beschleunigt.

Die Technik für das Nachladen von Bildern liegt beim nativen Lazy Loading zudem nicht mehr auf den Schultern der Entwickler*innen. War es bislang noch so, dass es unzählige verschiedene Scripte gab, die Lazy Loading alle unterschiedlich umsetzten (verschiedene Scrolltiefe, Animationen zum Einblenden der Bilder etc.), ist Lazy Load nun nativ im Browser verfügbar und somit für alle gleich.

Nativ meint wiederum, dass es im Browser bereits von Haus aus verfügbar ist. Websitebetreiber müssen also keine eigenen Scripte, Plugins oder Ähnliches mehr integrieren, der Browser beherrscht Lazy Loading von Haus aus, die Technik ist also nativ verfügbar. Das hat den großen Vorteil, dass ein Standard entsteht, der auch wirklich überall entsprechend gut funktioniert. Auch das war nämlich ein Problem aktueller Lösungen. Nicht immer funktionierten sie in jedem Browser oder auf jedem Gerät zufriedenstellend.

Das Beste am nativen Lazy Loading ist jedoch, dass es kinderleicht einzusetzen ist. Dafür wurde ein neues Attribut eingeführt, welches die Funktion automatisch aktiviert. Das Attribut ist für Bilder und iFrames gedacht, wird unter Umständen aber noch weiter ausgeweitet, je nachdem, was noch so kommt. Denkbar wäre es, darauf aufbauend ganze Bereiche nachzuladen, sobald diese benötigt werden.

Zunächst einmal gilt Lazy Load im Browser aber vor allem für Bilder und wird dort folgendermaßen integriert. Einfach das Attribut unten zu einem Bild hinzufügen, schon wird das Bild erst bei Bedarf geladen, wenn der Browser natives Lazy Load unterstützt.

loading="lazy"

Im Ergebnis sieht die vollständige Integration in den Img-Tag dann wie folgt aus. Hier als kleines Beispiel mit einem nicht vorhandenen Bild.

<img src="bild.jpg" loading="lazy" alt="Bild">

Was sofort klar wird, ist, dass die Implementierung denkbar einfach ausfällt. Auf vorhandenen Seiten kann das Loading-Attribut bei Bedarf mit Suchen/Ersetzen hinzugefügt werden, wohingegen Content Management Systeme die Integration in der Regel eigenständig vornehmen. WordPress ist so ein Kandidat. Schauen wir uns genau das einmal genauer an.

Mit WordPress 5.5 wurde auch Lazy Loading integriert und gemeint ist damit nicht etwa, dass WordPress nun ein eigenes Script besitzt und eine separate Lösung auf die Beine gestellt hat, sondern vielmehr, dass natives Lazy Load nun auch in WordPress verwendet wird. Jedes Bild bekommt also das Loading-Attribut und sofern Lazy Load im Browser unterstützt wird, werden diese dann entsprechend nachgeladen.

Problem ist für viele nur, dass sie bereits eine ausgefeiltere Lösung verwenden. Gerade in WordPress gibt es eine Menge Plugins, die Lazy Loading effektiver oder schicker umsetzen als die native Integration der Browser. Die bleibt nämlich beschränkt in ihren Möglichkeiten, während die Lazy Load Plugins deutlich mehr Einstellungen bieten.

Wer Lazy Loading ab WordPress 5.5 daher deaktivieren möchte, dem empfehlen wir das Plugin Disable Lazy Loading. Das ist denkbar einfach aufgebaut, denn es schaltet die Funktion in WordPress schlichtweg ab, sodass das Loading-Attribut fortan nicht mehr gesetzt wird. Dann wiederum kann ein eigenes Script oder eben ein entsprechendes Plugin eingesetzt werden, ohne dass es mit dem nativen Lazy Load in Kontakt kommt und etwaige Probleme verursacht.

Es ist an der Zeit, dass Lazy Loading in den Browser wandert. Schon vor vielen Jahren war das Teil einer Diskussion, an die wir uns gut erinnern können. Ladezeiten und Maßnahmen, um diese im Nachhinein zu verbessern, sollten nicht auf Ebene der Website stattfinden. Zumal es bei Funktionen wie Lazy Load bislang stets dazu führte, dass es nie ganz perfekt und vor allem nie gleich gut funktionierte.

In dem einen Browser lief das Script, in dem anderen wurden Bilder einfach gar nicht mehr angezeigt. Der eine stellte es so ein, dass schon beim ersten Besuch fast alles geladen wurde, der andere hingegen implementierte es dermaßen konservativ, dass Bilder quasi sichtbar wurden, bevor sie geladen waren. Das alles wirkte unschön und auf jeder Website verschieden. Bis heute ist Lazy Loading auch nicht überall eingesetzt worden, oft liegt es einfach daran, dass die Implementierung nicht immer ganz problemlos verläuft.

Mit dem nativen Lazy Loading innerhalb der Browser ändert sich das nun. Schluss mit dem Fleckenteppich, jetzt gibt es einen Standard, den alle einfach und direkt verwenden können. Dafür bedarf es nur eines einzigen Attributs, was die Umsetzung für jeden möglich machen sollte. Natürlich gibt es immer noch Websites, die da lieber auf speziellere Lösungen setzten werden, doch prinzipiell kann jetzt jeder Lazy Loading für sich und sein Projekt nutzen.

Ein Fazit lässt sich nur soweit ziehen, dass es wirklich an der Zeit war, dass Lazy Loading in den Browser wanderte. Dort gehört es hin und nur dort bleibt es auf allen Websites gleich, ohne Ausnahmen oder Kompatibilitätsprobleme.