Lazy Loading: Verzögertes Laden für mehr Performance

Was ist Lazy Loading?

Konkret ist Lazy Loading eine Technik, ein Programmier-Designmuster, das auf Websites angewendet wird, bei dem Elemente und Ressourcen nicht vollständig geladen werden, sondern stattdessen on the fly oder on-demand entsprechend der Nutzung des Benutzers ausgeführt werden, wodurch ein "verzögertes Laden" der Inhalte entsteht.

Auf diese Weise werden Ressourcen optimiert und Inhalte wie Texte, Videos, Bilder und andere Materialien werden nur dann geladen, wenn sie benötigt werden, was Geschwindigkeit, Speicherauslastung und Verarbeitung, Reaktionsfähigkeit und Ladezeiten verbessert. Dies steht im Gegensatz zum vollständigen Laden, bei dem eine Website oder Seite komplett geladen wird, auch wenn der Nutzer nicht jedes Element verwendet.

Allgemeine Vorteile von Lazy Loading

Da der Hauptzweck von Lazy Loading darin besteht, das Laden von Elementen nur dann zu optimieren, wenn sie verwendet werden, gibt es mehrere Vorteile, die wie folgt zusammengefasst werden können:

• ›Geschwindigkeit beim Anzeigen der Hauptelemente einer Website.
• ›Erhebliche Verbesserung der Nutzererfahrung auf der Seite (UX).
• ›Verbesserte Leistung auf Mobilgeräten, insbesondere bei begrenzten Netzwerkressourcen; mit aktiviertem Lazy Loading ist das Surfen auf Seiten möglich, das unter solchen schlechten Empfangsbedingungen sonst nicht durchführbar wäre.
• ›Allgemeine und vollständige Optimierung von Ressourcen wie CPU, RAM und Akku auf Mobilgeräten.
• ›Die Erhöhung der Verweildauer auf unseren Seiten, da keine Ladeprobleme auftreten, schlägt sich indirekt in Ranking-Verbesserungen nieder.
• ›Senkung der Bounce Rate.

Ebenso hat der Programmieransatz Lazy Loading aus einer technischeren Sicht Vorteile und Neuerungen, wie zum Beispiel:

• ›Lazy Loading ist vollständig kompatibel mit JS-Frameworks wie React und Angular sowie mit CMS-Plattformen wie WordPress. Tatsächlich wurde kürzlich bekannt gegeben, dass Lazy Loading für Bilder ab WordPress-Version 5.5 standardmäßig enthalten sein wird.
• ›Dank der IntersectionObserver-API werden Bilder vor Suchmaschinen nicht versteckt.
• ›Unterstützung für mehrere Inhaltstypen wie Bilder und responsive-Klassenressourcen.
• ›Es ermöglicht die Indexierung von Seitenbildern, was für SEO entscheidend ist.
• ›Es ist eine zu 100 % SEO-freundliche Ressource, da sie viele Schlüsselpunkte im SEO direkt und indirekt verbessert.

Wie implementiert man Lazy Loading in WordPress?

Wenn wir unsere Seite auf WordPress haben, sollten wir wissen, dass wir einen großen Vorteil haben, da es viele Lösungen gibt, um Lazy Loading auf unseren Seiten zu implementieren, damit sie viel schneller laden. Dieser Screenshot unten zeigt einige der möglichen Lösungen, die wir im Plugin-Repository haben:

Ansicht der bekanntesten WordPress-Plugins zur Implementierung von Lazy Loading.

Um diese Implementierung durchzuführen, haben wir mehrere Optionen:

• ›Wähle ein spezifisches Lazy-Loading-Plugin wie "Lazy loader", "a3 lazy load"...
• ›Wähle ein Web-Optimierungs-Plugin wie "WP Rocket", das diese Option bereits standardmäßig zusammen mit anderen Verbesserungen enthält.

SEO-Aspekte im Zusammenhang mit Lazy Loading

Wir kennen bereits die Hauptmission des verzögerten Ladens und seine wichtigsten Vorteile sowie wie es die Verbesserung unserer Seitenleistung, unserer UX und unseres SEO beeinflusst.

Nun muss klug mit dem verzögerten Laden umgegangen werden, um das Beste daraus zu machen, denn bei unsachgemäßer Verwendung könnte es den gegenteiligen Effekt haben.

Zum Beispiel nutzt Lazy Loading den Cache, um die Geschwindigkeit zu verbessern, sodass es bei zu viel dort gespeichertem Inhalt zu Verlangsamungen oder Fehlern kommen kann, wenn es nicht korrekt implementiert wird, was sogar verhindert, dass Google Seiten und Elemente indexiert, was sich ernsthaft auf das Ranking der Seite auswirken kann. Einige Tipps sind:

• ›Optimiere den Cache und nutze ihn intelligent.
• ›Verwende die Google Search Console, um den Inhalt zu überprüfen, den Google auf der Seite crawlt.
• ›Füge ALT-Text hinzu, damit jedes Bild von Google indexiert werden kann.
• ›Nutze immer die IntersectionObserver-API.
• ›Füge das loading-Attribut zu iframes oder eingebetteten Inhalten von anderen Seiten oder Quellen hinzu, dank der Blink LazyLoad-Funktion des Chrome-Browsers. Gilt für Bilder, Fotos, Videos, Texte und andere Inhalte.

Lazy Loading und UX

Wenn es um eine Website geht, ist sowohl die technische als auch die allgemeine Optimierung, um eine gute Nutzererfahrung (UX) zu bieten, hinsichtlich Ladezeiten, Reaktionsfähigkeit, Ressourcennutzung und allgemeinem Verhalten unerlässlich. Wenn eine Seite nicht sehr reaktionsschnell ist, wird ihre Bounce Rate hoch sein, und wenn sie eine schlechte Nutzererfahrung bietet, wirkt sich das auf ihren Traffic, ihre Sichtbarkeit und sogar auf ihr SEO aus.

Mit verzögertem Laden besteht das Ziel darin, die UX einer Seite in einem einzigen Schritt drastisch zu verbessern, indem ihr Inhalt schrittweise und dann geladen wird, wenn der Nutzer ihn beim Scrollen der Seite benötigt – sei es Bilder oder Text –, was die Ressourcennutzung gegenüber dem Laden der gesamten Plattform optimiert, die wahrscheinlich Elemente zeigt, die für den Nutzer nicht wichtig sind.

Natives Lazy Loading (HTML) in Chrome

Um die Bedeutung zu zeigen, die Google der UX beimisst: Seit 2020 und ab Version 75 seines Chrome-Browsers ist es möglich, natives Lazy Loading zu HTML-Seiten-Tags und ihren Multimedia-Inhalten wie Fotos, Videos und mehr hinzuzufügen.

Auf diese Weise versteht der Chrome-Browser durch das automatische Hinzufügen des HTML-Lazy-Loading-Attributs, dass der Seiteninhalt entsprechend der Navigation des Nutzers und nicht alles auf einmal geladen wird, was Geschwindigkeit und Reaktionsfähigkeit verbessert. Um es zu verwenden, wird das loading-Attribut mit dem Wert lazy zu jedem Tag der visuellen und multimedialen Ressourcen sowie zu iframes hinzugefügt:

<img src="image.jpg" loading="lazy" alt="..." />

<iframe src="video-player.html" loading="lazy"></iframe> Diese Ressource kann sowohl in Bildern, die einen großen Teil der Informationen ausmachen, die der Browser herunterladen muss, als auch in iframes verwendet werden; denke daran, dass wir diese verwenden, um externe Ressourcen in unsere Seite einzubetten.

Es ist wichtig, die Verwendung in iframes hervorzuheben, da diese kritische Ladestellen auf unserer Seite darstellen können.

Auf der Negativseite ist natives Lazy Loading nur mit Chrome kompatibel, obwohl seine Verwendung in anderen Browsern über kompatible Bibliotheken implementiert werden kann, falls keine Unterstützung vorhanden ist, wie es bei Mozilla Firefox der Fall ist.

Anwendungen von Lazy Loading

Wie wir bereits kommentiert haben, konzentriert sich Lazy Loading darauf, das Laden von Elementen einer Seite zu verzögern, um ihre Reaktion zu optimieren. In diesem Sinne konzentriert sich die Verwendung des Tools auf alle visuellen Ressourcen, obwohl der Schwerpunkt auf Bildern, Videos und iframes liegt, die Dokumente und andere Dateien enthalten können – alles durch die Modifikation von Tags und das Einfügen des loading-Attributs mit dem Wert lazy, was die allgemeine Geschwindigkeit der Seite optimiert, auch wenn sie schwere Elemente oder große Multimedia-Inhalte hat.

Hast du Fragen zu Lazy Loading oder möchtest es in deinem Projekt implementieren? Wir stehen dir zur Verfügung!

Dokumentation und Referenzen:

• ›Lazy Loading für Bilder
• ›Lazy Loading für Videos
• ›Natives Lazy Loading