Was ist Lazy Loading?

Was ist Lazy Loading?

Lazy Loading ist eine Technik, bei der bestimmte Teile einer Webseite – insbesondere Bilder – erst dann geladen werden, wenn sie benötigt werden. Anstatt alles auf einmal zu laden, was als Eager Loading oder „eifriges“ Laden bekannt ist, fordert der Browser bestimmte Ressourcen erst an, wenn der Nutzer so interagiert, dass die Ressourcen benötigt werden. Bei richtiger Implementierung kann Lazy Loading die Ladezeiten einer Seite verkürzen.

Diese Art des Ladens wird als „faul“ bezeichnet, weil sie einen Webbrowser zum Zögern anregt. Wenn eine Lazy Loading-Webseite angezeigt wird, sagt der Browser im Wesentlichen: „Ich warte mit dem Laden dieser Bilder, bis ich sie wirklich brauche.“ Wenn eine eifrig ladende Webseite angezeigt wird, nimmt der Browser die entgegengesetzte Haltung ein: „ Ich kümmere mich sofort um alles!“ Während Prokrastination in der realen Welt manchmal negativ konnotiert ist, ist sie in diesem Fall oft effizienter.

Ein Blogbeitrag könnte zum Beispiel ein Bild am oberen Rand der Seite und ein Diagramm am unteren Rand enthalten. Jemand, der den Blogbeitrag liest, erreicht das Ende des Textes möglicherweise erst nach mehreren Minuten, so dass der Browser mit dem Laden des Diagramms wartet, bis der Leser zu diesem Abschnitt gescrollt hat. Auf diese Weise wird die Seite zu Beginn schneller geladen, da der Browser nur ein Bild statt zwei lädt.

Wie funktioniert das Lazy Loading von Bildern?

Die Navigation des Nutzers ist in der Regel der Auslöser für das Lazy Loading von Bildern. Wenn ein Nutzer auf einer Seite nach unten scrollt, wird der Browser angewiesen, die Bilder an dieser Stelle zu laden.

Wenn eine Webseite geladen wird, wird der Teil, den der Nutzer sieht, als „above the fold“ (oberhalb der Falz) bezeichnet, während der Teil, den der Nutzer noch nicht sieht, als „below the fold“ (unterhalb der Falz) bezeichnet wird.* Bilder, die sich oberhalb der Falz befinden, müssen sofort geladen werden, da sonst die Nutzererfahrung beeinträchtigt wird. Der Nutzer sieht die Bilder unterhalb der Falz jedoch erst, wenn er nach unten scrollt. Daher können Bilder „below the fold“ Lazy Loading verwenden.

*Was bedeutet „fold"? Die Bezeichnungen „above the fold“ (oberhalb der Falz) und „below the fold“ (unterhalb der Falz) haben ihren Ursprung im Zeitungslayout. Zeitungen werden in der Regel horizontal in der Hälfte gefaltet, und die vordere Hälfte – der Bereich oberhalb des Knicks – ist das, was der Leser zuerst sieht. Wenn der Begriff auf ein Weblayout angewendet wird, ist die „Falz“ der untere Teil des Bildschirms des Nutzers.

Wie man Lazy Loading für Bilder implementiert

Eine Möglichkeit, Lazy Loading zu implementieren, ist die Verwendung des HTML-Attributs loading in einem Bild-Tag. Durch Hinzufügen von loading="lazy", wie im folgenden Beispiel, wird der Browser angewiesen, mit dem Laden des Bildes zu warten, bis der Nutzer in die Nähe des Bildes scrollt:

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

Webentwickler können auch Programmier-Frameworks verwenden, um anspruchsvolleres Lazy Loading zu implementieren. Angular wird häufig für diesen Zweck verwendet. Die JavaScript-Bibliothek React unterstützt ebenfalls Lazy Loading.

Cloudflare Mirage ist eine weitere Möglichkeit, Lazy Loading zu implementieren. Zusätzlich zur automatischen Größenanpassung von Bildern fungiert Mirage als Lazy Loader und lädt Bilder nur bei Bedarf. Das Feature von Cloudflare Mirage steht Cloudflare-Kunden mit den Self-Service-Tarifen Pro und Business sowie den Enterprise-Kunden zur Verfügung.

Welche anderen Seitenressourcen können Lazy Loading nutzen?

• JavaScript: JavaScript ist eine so genannte Rendering-Blocking-Ressource – das bedeutet, dass ein Browser die Seite erst rendern kann, wenn der JavaScript-Code geladen ist. JavaScript-Code kann in kleinere Module unterteilt werden, die bei Bedarf geladen werden, wodurch die Ladezeit für Seiten, die JavaScript ausführen müssen, verkürzt wird (weitere Informationen).
• CSS: CSS ist ebenfalls eine Ressource, die das Rendern blockiert. Die Aufteilung einer CSS-Datei in mehrere Dateien, die nur bei Bedarf geladen werden, kann dazu beitragen, die Zeit zu verkürzen, die ein Browser für das Rendern des Rests der Seite blockiert. Nicht blockierende CSS-Dateien sollten einen eigenen Link mit einer hinzugefügten Media-Eigenschaft haben, um dem Browser mitzuteilen, wann sie geladen werden sollen (weitere Informationen).
• iframes: iframes werden verwendet, um Inhalte aus einer externen Quelle in eine Webseite einzubetten. iframe-Tags können das gleiche HTML-Ladeattribut enthalten, das oben für Bilder beschrieben wurde.

Was sind die Vorteile von Lazy Loading?

Schnelleres Laden der Seite: Bei sonst gleichen Bedingungen werden Webseiten mit kleineren Dateigrößen schneller geladen. Mit Lazy Loading beginnt eine Webseite kleiner als ihre volle Größe und wird daher schneller geladen. Eine schnellere Web-Performance hat zahlreiche Vorteile, darunter eine besseres SEO, höhere Konversionsraten und eine verbesserte Nutzererfahrung.

Kein unnötiger Inhalt: Nehmen wir an, eine Seite lädt mehrere Bilder, die sich unterhalb der Falz befinden, aber der Nutzer verlässt die Seite, bevor er nach unten gescrollt hat. In einem solchen Fall wurden die Bandbreite, die für die Bereitstellung der Bilder verwendet wurde, und die Zeit, die der Browser für das Anfordern und Rendern der Bilder aufgewendet hat, praktisch verschwendet. Im Gegensatz dazu sorgt Lazy Loading dafür, dass diese Bilder nur bei Bedarf geladen werden. Das spart Zeit und Rechenleistung und kann dem Websitebesitzer Geld sparen, weil weniger Bandbreite verbraucht wird.

Was sind die Nachteile von Lazy Loading?

Nutzer fordern möglicherweise schneller als erwartet Ressourcen an: Wenn ein Nutzer zum Beispiel schnell auf einer Seite nach unten scrollt, muss er eventuell auf das Laden der Bilder warten. Dies kann sich negativ auf die Nutzererfahrung auswirken.

Zusätzliche Kommunikation mit dem Server: Anstatt den gesamten Seiteninhalt auf einmal anzufordern, muss der Browser unter Umständen mehrere Inhaltsanfragen an die Server der Website senden, wenn der Nutzer mit der Seite interagiert. Die Verwendung eines Content Delivery Network (CDN) minimiert diesen möglichen Nachteil, da die Bilder vom CDN gecacht werden und der Browser zum Abrufen der Bilder keine Anfrage an den Ursprungsserver senden muss.

Zusätzlicher Code, den der Browser verarbeiten muss: Wenn ein Entwickler mehrere Zeilen JavaScript zu einer Webseite hinzufügt, um dem Browser mitzuteilen, wie er die Ressourcen der Seite nach und nach laden soll, erhöht dies die Menge an Code, die der Browser laden und verarbeiten muss. Wenn dies auf ineffiziente Weise geschieht, kann diese geringe zusätzliche Lade- und Verarbeitungszeit die durch Lazy Loading eingesparte Zeit aufwiegen.

Was ist Eager Loading?

Beim Eager Loading werden alle Ressourcen der Webseite gleichzeitig oder so schnell wie möglich geladen. Bei einigen Anwendungen, die Eager Loading verwenden, wird möglicherweise ein „Loading“-Bildschirm angezeigt. Komplexe, codeintensive Webanwendungen, wie z. B. Online-Spiele, bevorzugen unter Umständen Eager Loading.

Wie können Entwickler eine Webseite sonst noch beschleunigen?

Es gibt eine Reihe von Faktoren, die sich auf die Performance von Webseiten auswirken, aber diese drei Schritte sind ein guter Ausgangspunkt, um eine Webseite schneller zu machen:

1. Verwenden Sie ein CDN: Wenn Webinhalte in einem CDN gecacht werden, wird die Kommunikation mit dem Ursprungsserver auf ein Minimum reduziert, unabhängig davon, ob Lazy Loading verwendet wird oder nicht. CDN liefern Inhalte auch schneller an die Nutzer, da sie in der Regel näher am Nutzer sind als der Ursprungsserver.
2. Optimieren Sie Bilder: Übermäßig große Bilder beeinträchtigen die Performance, auch wenn Lazy Loading verwendet wird. Verringern Sie die Größe der Bilddateien, wann immer dies möglich ist, um sicherzustellen, dass die Bilder schnell geladen werden.
3. Code verkleinern: Bei der Minifikation werden alle unnötigen Zeichen aus dem CSS- und JavaScript-Code entfernt, ohne die Funktionalität zu verändern. Dazu gehört das Entfernen von Leerzeichen, Kommentaren und Semikolons. Die Minifikation verringert die Größe der Codedatei und erhöht die Ladegeschwindigkeit.

Sehen Sie weitere Möglichkeiten zur Verbesserung der Performance von Webseiten: Tipps zur Verbesserung der Website-Geschwindigkeit