Es hat ein Weilchen gedauert, doch jetzt ist es da. Die Rede ist selbstverständlich vom nativen Lazy Loading, welches bereits seit Langem in Vorbereitung ist. Denn wo früher jede Website ihr eigenes Script nutzte, gibt es nun eine Lösung, die gleichermaßen alle verwenden können.

Genauer gesagt war es der Chrome Browser, der als erstes Lazy Loading auf Ebene des Browsers einführte. Inzwischen ist es auch im Firefox, Edge und dem Opera Browser verfügbar und selbst Apple wird es aller Voraussicht nach in eine kommende Version von Safari implementieren. Den aktuellen Browser-Support findet ihr übrigens hier. Derzeit sind es logischerweise nur die neusten Versionen, die Lazy Load im Browser unterstützten.

In dem heutigen Artikel möchten wir uns nun einmal genauer ansehen, was es mit der neuen Technik auf sich hat. Wie wird Lazy Load im Browser aktiviert, welche Vor- und Nachteile gibt es, ist es wirklich schon empfehlenswert? All diese Fragen und noch einige mehr werden wir nun ausführlich klären.

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

Was genau ist natives Lazy Loading?

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.

Lazy Loading in die eigene Website integrieren

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.

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

Lazy Loading in WordPress 5.5

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.

Fazit zum nativen Lazy Loading

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.

by A-DIGITAL one

Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance die wir seit 1999 an den Tag legen.

Mit unserem Team von über 25 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.