Lazy Loading - Was steckt dahinter?

Lazy Loading Strategien sehen im ersten Moment wie eine gute Idee aus, da sich damit die Performance von Webseiten deutlich verbessern lässt. Gerade bei hohem Zugriffsvolumen können Lazy Loading Strategien aber auch Nachteile bergen. Wie sich Lazy Loading Strategien umsetzen lassen und welche möglichen Nachteile den Vorteilen gegenüberstehen können, erklären wir ausführlich in unserem Beitrag.

Performance Vorteile durch Lazy Loading

Die Ladezeit einer Webseite sollte möglichst kurz sein - das bringt einige entscheidende Vorteile. Als Strategie, um die Ladezeit von Webseiten zu verkürzen, bieten sich vor allem Lazy Loading an.

Neben dem reinen Optimieren der Ladezeiten einer Webseite muss für die Gesamt-Performance allerdings immer auch die Server Response Time (SRT) im Auge zu behalten und so weit wie möglich zu optimieren. Eine ausreichende Cache-Größe sowie der Einsatz schneller SSD oder NVMe Speichermedien sollte zuvor natürlich ebenfalls sichergestellt sein.

Durch kurze Ladezeiten besteht eine Vielzahl von Vorteilen:

User Experience, Umsätze und Kundenbindung

Die Ladezeit einer Webseite spielt eine sehr wichtige Rolle für die User Experience - bei Seiten, die vergleichsweise lange Ladezeiten haben, sind viele Nutzer oft zu ungeduldig und klicken wieder weg und weiter zum nächsten Suchergebnis. Als Besucher der eigenen Webseite sind diese Nutzer damit verloren - man sabotiert mit einer schlechten Performance also mitunter gehörig die eigenen Besucherzahlen und die eigene Conversion Rate.

Besseres Ranking

Gleichzeitig ist die Pagespeed auch ein nicht zu unterschätzender Ranking-Faktor: Google möchte den Nutzern eine möglichst zufriedenstellende Erfahrung bei der Informationssuche bieten - analog zum Nutzerempfinden können Seiten mit besonders kurzen Ladezeiten damit häufig deutliche Ranking-Vorteile für sich verbuchen. Mobil- und Desktop-Ladezeiten werden dabei immer getrennt gemessen. Wenn mittels Softwareentwicklung die Ladezeiten verkürzt werden, verbessert sich damit nicht selten auch das Ranking deutlich.

Geringere Werbekosten

Neben den Ranking-Vorteilen spielt die Ladezeit auch eine wichtige Rolle für die eigene Google Ads Werbung: lange Ladezeiten wirken sich negativ auf den Qualitätsfaktor bei Google Ads aus - und damit auch implizit auf den Klickpreis. Bei Seiten mit langen Ladezeiten kommt die Google Ads Werbung für Webseiten also unter Umständen deutlich teurer. Daneben muss man natürlich auch bedenken, dass Nutzer beim Klicken von Ads-Links genauso ungeduldig sind, wie beim Öffnen von Webseiten von SERPs aus - nach wenigen Sekunden Ladezeit klicken sie weg und besuchen die Seite nicht mehr. Die Kosten für den Klick führen damit zu einer deutlich geringeren Zahl von Besuchern - man verheizt damit sein Werbebudget ziemlich achtlos. Durch eine angepasste Softwareentwicklung und gegebenenfalls eingesetzte Lazy Loading Strategien lässt sich also oft viel Geld sparen und Werbe-Effizienz gewinnen.

Schnelleres Crawling

Google weist jeder Domain ein bestimmtes "Crawling-Budget" zu. Nur während dieser zugewiesenen Zeitspanne crawlt der Bot die Seite. Je langsamer die Ladezeit, desto weniger Seiten werden insgesamt gecrawlt. Damit dauert es auch deutlich länger, bis alle Unterseiten oder Änderungen im Google Index auftauchen.

Lazy Loading Strategien zur Verringerung der Ladezeiten

Grundsätzlich zielt das Lazy Loading darauf ab, den Pagespeed und die Servergeschwindigkeit zu steigern, also die Dauer der Ladezeit zu verkürzen. Das wird dadurch erreicht, dass nicht zwingend benötigte Objekte auf der Seite (z. B. Bilder und Grafiken) erst dann geladen werden, wenn der Nutzer sie voraussichtlich benötigt. Objekte die "below the fold" - also außerhalb des für den Nutzer sichtbaren Bereichs - liegen, werden erst geladen, wenn der Nutzer dorthin scrollt. Auch andere Inhalte, wie etwa der dynamische Content innerhalb einer statischen Webseite, werden erst dann geladen, wenn der Nutzer sie voraussichtlich sehen will.

Lazy Loading ermöglicht - anders als Eager Load - allerdings, nur genau die Daten zu laden, die benötigt werden und erst dann, wann sie benötigt werden. Damit werden bei vielen Besuchern deutlich geringere Datenmengen geladen, die Performance steigt. Auch das Laden von immer weiteren Daten, bsi hin zu richtiggehenden Datenkaskaden, wird durch Lazy Loading wirksam vermieden.

Möglichkeiten zur Umsetzung von Lazy Loading

Im Bereich der Softwareentwicklung wurden in den letzten Jahren immer mehr technische Möglichkeiten geschaffen, um Lazy Loading Strategien umzusetzen. Unter Umständen lassen sich dabei durch eigene Softwareentwicklung zusätzlich noch bereits vorhandene Möglichkeiten individuell anpassen oder erweitern.

Weithin verbreitete und gut bekannte Möglichkeiten sind:

• Definition von Objekten über Hinzufügen der Loading-Attribute "eager" oder "auto" (natives Lazy Loading, besonders bei Bildern und Iframes)
• Einsatz eines speziellen Wordpress-Plugins
• Einsatz des IntersectionObserver (z. B. bei Animationen)
• Laden von Inhalten erst bei Initialisierung (Abruf oder Veränderung)
  Einsatz virtueller Proxys (gleich aussehendes Objekt steht als "Platzhalter" an der richtigen Stelle, Datenladung wird erst bei Verwenden des Objekts initialisiert)
• Einsatz von Ghosts (wie virtueller Proxy aber bereits eingeschränkt auch ohne Daten zu laden verwendbar)
• Value Holder (Platzhalter-Objekt verwaltet die Datenbeschaffung bei Daten-Objekten

Eine wichtige Strategie ist auch das Code-Splitting, das sich sowohl bei JavaScript, CSS als auch bei HTML einsetzen lässt. Der Code wird in kleinere Bestandteile "gesplittet", wovon zunächst nur die zwingend benötigten Bestandteile geladen werden, der Rest erst bei Bedarf danach.

Nachteile von Lazy Loading Strategien

Wie eingangs erwähnt, müssen bei Lazy Loading Strategien auch einige möglichen Nachteile berücksichtigt werden, die durch Softwareentwicklung nicht immer oder nur eingeschränkt ausgeglichen werden können.

Primary Content wird von Google nicht erfasst

Als "Primary Content" werden jene Inhalte bezeichnet, die erst angezeigt werden, wenn eine Aktion des Nutzers erfolgt - etwa zusätzliche Elemente am Ende einer Liste, die erst geladen werden, wenn der Nutzer bis dorthin gescrollt hat.

Solche Inhalte können vom Googlebot grundsätzlich nicht gecrawlt werden - sie werden also auch nicht erfasst. Das kann unter Umständen zu beträchtlichen Problemen bei der korrekten Indexierung bei Webseiten führen.

Ladezeiten von Bildern werden häufig nur ungenügend verkürzt

Um Bilder über Lazy Loading Strategien zu laden, muss erst ein entsprechendes (häufig recht großes) Script geladen werden, damit die Daten an das Lazy Load gelangen. In manchen Fällen dauert das Laden des Scripts dann sogar länger als das Laden der Bilder selbst dauern würde. Ein wirklicher Vorteil für die Ladezeiten ergibt sich häufig nur, wenn sehr viele und sehr große Bilder geladen werden sollen.

Umgekehrt kann es bei sehr großen Zahlen an Bildern und HD-Videos oft sinnvoller sein, über den Einsatz eines Content Delivery Networks (CDN) nachzudenken.

Mögliche Probleme beim Aufbau von Webseiten und bei Nutzerablehnung

Auch bei sorgfältig durchgeführter Softwareentwicklung können sich durch den Einsatz von Lazy Loading immer wieder einmal Probleme beim Aufbau von Webseiten ergeben. Auch Nutzer fühlen sich oft durch Lazy Loading Funktionalitäten gestört - und verlassen dann solche Webseiten oder sind deutlich zurückhaltender beim Kauf oder bei ihrer Bewwertung der Webseite. Das hat wiederum in Summe negative Folgen für die Umsätze, die Kundenbindung (neuerlicher Kauf), die Absprungrate oder die Weiterempfehlung der Webseite.

Ein weiteres Problem ergibt sich vor allem bei JavaScript-Einbindung, wenn die Browser-Einstellung beim Nutzer keine Skripte zulässt. In diesem Fall kommt es häufig zu einer negativen User Experience.

Bei einer unvorteilhaften Seitenstruktur ist zudem häufig kein Backtracking möglich.

Eingeschränkte Funktion von Tracking-Pixeln

Berücksichtigt werden muss außerdem, dass ohne zusätzliche Maßnahmen alle Tracking-Pixel erst dann geladen werden, wenn sie in den sichtbaren Bereich gelangen. Das lässt sich allerdings durch entsprechende Gegenmaßnahmen (eager-Attribut oder Klassendefinition und Ausschluss bei JavaScript) bei der Softwareentwicklung vermeiden.

Wird das nicht gemacht, lassen sich Performance-Werte (Klicks, Conversions, etc.) nicht korrekt erfassen.

Last-Problematik

Lazy Loading führt einerseits zu einer deutlichen Verkomplizierung des Codes und der Einbindung von zum Teil großen Skripten und externen Libraries - was wiederum die Ladezeiten verlängern kann.

Dazu muss bedacht werden, dass Lazy Load zwar meist erfolgreich darin ist, die Zahl der Abfragen zu reduzieren - dafür werden die Datenquellen zum Teil aber mit sehr vielen einzelnen Abfragen konfrontiert. Besonders für Datenbanken ist das häufig ein großes Problem, da ihre Funktionsweise grundsätzlich dafür optimiert ist, bei wenigen Abfragen sehr umfassende Ergebnisse auszugeben. Eine hohe Zahl von Einzelabfragen kann Datenbanken, besonders bei hohem Zugriffsvolumen, oft stark belasten (das sogenannte SELECT N+1 Problem). Auch die Netzwerkstruktur wird durch hohe Zahlen von Einzelabfragen häufig übermäßig belastet.

Dieser Aspekt muss bei der Softwareentwicklung und bei der Planung von Lazy Loading Strategien unbedingt berücksichtigt werden, um eine Überlastung der Datenquellen und damit erst recht wieder verzögerte Ladezeiten zu vermeiden (z. B. der Einsatz eines Load Balancers).

Bildnachweis: Gerd Altmann auf Pixabay