Lazy Loading – wichtiger Faktor für die Optimierung einer Webseite

Es gibt viele Faktoren, die für den Erfolg einer Webseite eine Rolle spielen. Einer dieser Faktoren ist die Zeit, die benötigt wird, bis die Webseite geladen und angezeigt werden kann. Dieser Faktor wird unter anderem in den Core Web Vitals von Google gemessen und wirkt sich damit auch direkt auf das organische Ranking bei Google-Suchergebnissen aus. Es gibt verschiedene Möglichkeiten, die Größe der zu ladenden Dateien und somit die Ladezeit zu beeinflussen, wie etwa Bildkompression und das Ausspielen von Bilddateien in angepasster Auflösung. In diesem Beitrag wird die Funktionsweise des sogenannten Lazy Loadings vorgestellt. Durch die Nutzung von Lazy Loading werden Inhalte erst dann geladen, wenn diese Inhalte durch Nutzerinteraktionen wie Scrolling auch tatsächlich im Browser-Sichtfeld sichtbar sind.

Allgemeines

Wie der Name vermuten lässt, werden bei aktivem Lazy Loading Inhalte nur dann dynamisch geladen, wenn diese benötigt werden. Im Vergleich zu Seiten, bei denen direkt beim Aufruf alle Inhalte geladen werden („Eager Loading“), kann hierdurch die Ladezeit teils erheblich reduziert werden. Meist handelt es sich hierbei um Bilddateien, die Funktion lässt sich je nach Implementierung jedoch auch mit Videos, iFrames, Scripts oder weiteren Inhalten nutzen. Während es noch vor einigen Jahren Performance-Probleme bei der Nutzung von Lazy Loading-Umsetzungen gab oder die so ausgezeichneten Inhalte nicht korrekt von Suchmaschinen gecrawlt werden konnten, ist der Einsatz heutzutage vergleichsweise einfach. Dafür sorgen unter anderem ausgereifte Javascript-Lösungen, CMS-Plugins oder das von allen Chromium-basierten Browsern vollständig unterstützte native Lazy Loading. Zudem lässt sich die Funktionalität mit Tools wie Googles Lighthouse-Audit leicht überprüfen.

Vorteile

Zu den wesentlichen Vorteilen gehören die beschleunigten Ladezeiten der Webseiten, da Daten erst dann übermittelt werden, wenn diese auch benötigt werden. Ein oft genannter Wert sind in diesem Zusammenhang drei Sekunden, nach denen sich eine Webseite spätestens aufgebaut haben sollte, da der Nutzer andernfalls einen schlechten Ersteindruck gewinnt und im schlimmsten Fall die Seite verlässt. Vor allem auf mobilen Endgeräten ist Lazy Loading somit vorteilhaft, da auf den kleineren Displays initial weniger Inhalte angezeigt werden müssen. Auch gängige Suchmaschinen verfahren mittlerweile nach dem Prinzip „Mobile First“ und bewerten die Messwerte für die mobile Ansicht höher als die Desktop-Ansicht, weshalb eine geringere Ladezeit für mobile Geräte besonders erstrebenswert ist. Die reduzierten Datenmengen führen sowohl zu einer Entlastung des Endnutzers (Datenvolumen) als auch zu einer Entlastung des Server-Traffics. Zudem können unnötige und ggf. kostenintensive SQL-Abfragen in Datenbanken vermieden werden. Auch der "First Input Delay" (FID) der Google Web Vital Metrics lässt sich durch Lazy Loading optimieren, weil dadurch eine frühere und schnellere Interaktion mit der Webseite ermöglicht wird.

Nachteile

Ein Nachteil liegt darin, dass sofern kein natives Lazy Loading verwendet wird, Javascript im Browser des Nutzers aktiv sein muss. Ist dies nicht der Fall, werden die Inhalte nicht geladen bzw. müssen sie als Fallback ohne Lazy Loading eingebunden werden. Oftmals ist für den Einsatz dieser Javascript-Umsetzungen das Einbinden weiterer Bibliotheken wie Jquery erforderlich. Die somit zusätzlich zu ladenden Scripts erhöhen die Ladezeit einer Seite zunächst, weshalb sich der Einsatz von Lazy Loading bei Seiten mit sehr wenigen Bildern eher nicht lohnt oder sogar negative Auswirkungen haben kann. Diese Nachteile treten jedoch beim später genauer beschriebenen nativen Lazy Loading nicht auf. Außerdem ist zu beachten, dass nur Bilder lazy geladen werden sollten, die nicht initial im Viewport des Browsers liegen. Andernfalls kann der Einsatz von Lazy Loading sogar einen negativen Einfluss auf die Core-Web-Vitals-Metrik LCP ("Largest Contentful Paint") haben. LCP beschreibt, wie schnell das größte Element im initialen Viewport geladen werden kann. Wenn dieses Element lazy geladen wird, kann durch die zusätzlichen Berechnungen der LCP verzögert werden, wodurch ein direkter negativer Einfluss auf das Suchmaschinenranking entsteht.

Implementierungsmöglichkeiten

Eine klassische Umsetzungsmöglichkeit besteht darin, die Quell-URL eines <img>-HTML-Tags nicht in das Attribut „src“ zu setzen, sondern in ein alternatives Attribut, z.B. „data-src“. Dadurch wird das Bild standardmäßig nicht geladen. Nun kann über Javascript-Bibliotheken festgestellt werden, wann die Position des Bilds in den Sichtbereich des Nutzer-Browsers gerät und entsprechend zu diesem Zeitpunkt das „src“-Attribut mit dem Inhalt des „data-src“-Attributs befüllt werden. Dadurch wird das Bild geladen und auf der Seite angezeigt. Hierzu gibt es verschiedene Javascript-Libraries wie blazy.js oder LazyLoad. Für CMS gibt es eigene Plugins, wie etwa a3 Lazy Load für Wordpress.

Aufgrund der beschriebenen Nachteile von Javascript-Lösungen bietet sich jedoch auch die Nutzung von nativem Lazy Loading an. Hierbei wird das <img>-Tag um das Attribut „loading“ mit dem Wert „lazy“ erweitert. Ein nativ lazy-geladenes <img>-Tag würde also beispielhaft so aussehen:

<img src="beispiel.png" loading="lazy“ src=“/pictures/image.jpg“>

Bei dieser Umsetzung muss keine zusätzliche Javascript-Bibliothek geladen werden, wodurch nicht nur Ladezeit gespart wird, sondern auch die Funktionalität in Browsern ohne aktiviertes Javascript gewährleistet wird. Der Browser-Support ist hierbei mittlerweile hoch. In Browsern, die natives Lazy Loading nicht unterstützen, hat die Anwendung keine negativen Auswirkungen, da das „loading“-Attribut von diesen Browsern ignoriert wird. Außerdem wird das CSS-Property „background-image“ nicht durch das native Lazy Loading unterstützt. Wenn in diesen Fällen dennoch Lazy Loading gewünscht ist, sollte als Fallback eine Javascript-Lösung integriert sein. Weiterhin werden Bilder in Flyout- oder Dropdown-Menüs meist nicht lazy geladen, da diese meist im Anzeigebereich des Browsers liegen, obwohl die einzelnen Elemente und Submenüs nicht sichtbar sind. Hier kann ggf. mit eigenen Javascript-Lösungen Abhilfe geschafft und das Ladeverhalten auch dieser Bilder angepasst werden.

Best Practices

Während beim Einsatz von nativem Lazy Loading wenig Gestaltungsfreiraum (und -bedarf) besteht, da von den Browserherstellern vorgegeben, sind bei anderen oder eigenen Lösungen einige Aspekte zu beachten:

• So sollten nur solche Inhalte lazy geladen werden, die sich „below the fold“, also unterhalb des aktuellen Viewports, befinden. Das bedeutet im Umkehrschluss, dass alle Inhalte, die initial beim Laden einer Webseite sichtbar sind, nicht lazy geladen werden sollten, um Kalkulationen zu sparen und Ressourcen zu schonen.
• Bilder sollten nicht erst bei ihrem Auftauchen im Browser-Sichtfeld geladen werden, sondern bereits kurz zuvor, damit der Nutzer möglichst wenig vom Ladeprozess mitbekommt und zudem genug Zeit für die Übermittlung des Bilds bleibt.
• Die „width“- und „height“-Properties des <img>-Tags sollten explizit festgelegt sein, da der Browser nicht „weiß“, wie groß das Bild ist, bevor es geladen wurde. Sind diese Attribute nicht definiert, lädt der Browser in den bildeigenen Dimensionen, wodurch es zu Verschiebungen auf der Seite kommen kann. Diese „Content Shifting“ oder „Cumulative Layout Shifting“ (CLS) führt zu einer verschlechterten User Experience und wird auch beispielsweise von den Google Core Web Vitals negativ bewertet. Das Setzen dieser Attribute ist aus denselben Gründen auch bei der Verwendung von nativem Lazy Loading empfehlenswert.
• In Browsern, in denen Javascript deaktiviert ist, sollte dem Nutzer entweder ein entsprechender Hinweis zur Aktivierung angezeigt werden oder die Funktionalität der Bildanzeige anderweitig gewährleistet werden. Dies kann z.B. mithilfe des <noscript>-Tags erfolgen.
• Bei der Verwendung von Zählpixeln sollte zudem sichergestellt werden, dass diese vom Lazy Loading ausgeschlossen sind. Da diese nie sichtbar sein sollen, würden sie sonst nie geladen werden und könnten somit keine Daten generieren.

Vergleich der Performance mit / ohne Lazy Loading

Ab Wordpress 5.5 ist das native Lazy Loading bereits standardmäßig integriert. Konkret heißt das, dass alle <img>-Tags mit spezifizierten „width“- und „height“-Attributen automatisch um das Attribut loading=“lazy“ ergänzt werden. Um den Effekt von Lazy Loading zu veranschaulichen, wurde die Funktionalität auf unserer mit Wordpress erstellten Webseite temporär deaktiviert. Anschließend wurde mit den Chrome-Devtools und dem Lighthouse-Audit der Effekt von aktivem bzw. inaktivem Lazy Loading überprüft. Überprüft wurde hierbei die Team-Seite.