Wenn Sie die Leistung Ihrer Website optimieren möchten, werden Sie früher oder später auf den Begriff ” verzögertes Laden” oder ” verzögertes Laden” stoßen . Diese beliebte Methode trägt dazu bei, die Ladezeit von Websites zu verbessern, insbesondere von Websites mit großen Datenmengen wie Bildern oder Videos.

1. Was ist Lazy Loading und wie funktioniert es?
2. Wie wird Lazy Loading implementiert?
   1. Faules Laden mit JavaScript
   2. Lazy Laden native
   3. Faules Laden mit der Intersection Observer API
   4. Faules Laden mit einem WordPress-Plugin
3. Faules Laden und das Tracking-Pixel-Problem
4. Tabelle der Vor- und Nachteile der träges Laden

Wenn eine Website geöffnet wird, lädt der Browser alle Ressourcen, die zur ordnungsgemäßen Anzeige der Seite erforderlich sind. Während dieses Vorgangs werden alle Objekte abgerufen, nicht nur diejenigen, die sich im sichtbaren Bereich befinden , sondern auch diejenigen, die sich außerhalb davon befinden (was auf Englisch als unterhalb der Falte bezeichnet wird ). Dies führt unter anderem zu unnötiger Ladezeit. Um dies zu vermeiden, verwenden Entwickler das verzögerte Laden oder das verzögerte Laden . Mithilfe eines Skripts wie LazyLoad lädt der Browser die Bilder und anderen Daten nur dann, wenn sie im Ansichtsfenster oder Ansichtsfenster (dem sichtbaren Bereich) des Benutzers angezeigt werden, z. B. beim Scrollen oder Maximieren des Browserfensters.

Um zu erklären, wie LazyLoad funktioniert, ist das Beispiel in den Bildern sehr nützlich. Um das verzögerte Laden zu verwenden, müssen Sie das Markup für das img- Tag ändern . Anstelle der src – Attribut verwendet das Verfahren ein Datenattribut , das eine passende Quelle enthält. Sobald das Bild , um den sichtbaren Bereich betritt, das entsprechende Skript fügt das src – Attribut der Verwendung von Daten – Attribute , und das Bild erscheint. Um den Ladevorgang für den Benutzer attraktiver zu gestalten, kann ein Gleit- oder Einblendeffekt verwendet werden.

Es gibt verschiedene Möglichkeiten, das verzögerte Laden in Ihr Webprojekt zu integrieren. Die Implementierung dieser Technologie wurde im Laufe der Jahre kontinuierlich weiterentwickelt und verbessert. In den folgenden Abschnitten stellen wir einige der beliebtesten Lösungen zur Implementierung des verzögerten Ladens vor .

Eine Möglichkeit besteht darin, eine der unzähligen JavaScript-Vorlagen zum langsamen Laden in Ihre Website zu integrieren. Das oben erwähnte LazyLoad- Skript bietet eine kompakte Lösung, für die jQuery nicht erforderlich ist. Neben der Möglichkeit, das native verzögerte Laden von Bildern, Videos und iFrames zu konfigurieren, unterstützt dieses 2,4-KB- Skript (Kilobyte) unter anderem reaktionsschnelle Bilder.

Eine Alternative zu LazyLoad ist das Lazy Load Remastered- Skript von Mika Tuupola. Im Gegensatz zu LazyLoad verwendet dieses Skript jQuery und bietet einige sehr coole Effekte, wie z. B. Bildunschärfe.

Das native verzögerte Laden ist der einfachste Weg, die Methode des verzögerten Ladens in Ihr Webprojekt zu integrieren. Diese Technologie, die ursprünglich nur im Google Chrome-Browser (Version 75 oder höher) verfügbar war, funktioniert jetzt auch in Firefox, Edge und Opera. Um diese Option zu verwenden, müssen Sie nur das Ladeattribut zum entsprechenden Website-Inhalt hinzufügen :

Zusätzlich zum Lazy- Wert für Lazy- Loading stehen folgende Werte zur Verfügung:

• eifrig : Der Browser lädt das Objekt direkt beim Öffnen der Seite.
• auto : Der Browser entscheidet, ob das Objekt direkt oder faul geladen wird.

Der Vorteil des nativen verzögerten Ladens besteht darin, dass der Browser keine zusätzliche JavaScript-Bibliothek laden muss. Dies spart nicht nur Ladezeit , sondern stellt auch sicher, dass der Browser Bilder mit verzögertem Laden lädt, selbst wenn der Benutzer JavaScript deaktiviert hat.

Wenn Sie das verzögerte Laden mit JavaScript integrieren, überprüft der Browser ständig die Position von Objekten. Dies kann zusätzlich zur Überlastung des Servers unangenehme Nebenwirkungen wie Stöße haben. Mit der Intersection Observer API wird dieses Problem gelöst. Diese Schnittstelle überwacht Elementänderungen in Bezug auf ein bestimmtes übergeordnetes Element. Das Hauptelement ist normalerweise das Ansichtsfenster . Wenn das Objekt das übergeordnete Element überlappt oder sich der Abstand zwischen den Elementen in gewissem Maße ändert, führt Intersection Observer eine Rückruffunktion aus und zeigt das Element an.

Wenn Sie Ihre Website mit WordPress erstellt haben, können Sie das verzögerte Laden mit einem Plugin wie a3 Lazy Load problemlos integrieren . Neben Bildern und Videos unterstützt diese Erweiterung auch das verzögerte Laden für andere Arten von eingebetteten Inhalten.

Website-Betreiber verwenden häufig Pixel, um das Benutzerverhalten zu verfolgen. Manchmal befinden sich diese Tracking-Pixel nur im nicht sichtbaren Bereich. Wenn alle Bilder verzögert geladen werden, lädt der Browser das Tracking-Pixel erst, wenn es sich im sichtbaren Bereich befindet. Infolgedessen gehen signifikante Zahlen bei Klicks und Conversions verloren .

Abhängig von der von Ihnen verwendeten Option können Sie die Tracking-Pixel beim Öffnen der Seite unabhängig laden :

• Native Lazy Loading : Fügen Sie dem Tracking-Pixel das Attribut load = “eifrig” hinzu .
• Faules Laden mit JavaScript: Weisen Sie dem Tracking-Pixel eine bestimmte Klasse zu, die Sie aus dem JavaScript-Code ausgeschlossen haben. Wenn Sie möchten, können Sie allen Objekten, die der Browser durch verzögertes Laden laden soll, eine Klasse zuweisen und das Skript ausdrücklich darauf anwenden .