Lazy Loading vs. Eager Loading

Lazy Loading: Was ist das und warum sollte es dich interessieren?

Eine schöne Website ist toll, aber nicht, wenn sie niemand sieht. 

Du hast vielleicht eine tolle Website entworfen, aber wenn sie nicht schnell lädt, verlierst du vielleicht Besucher. 

Verschiedene Studien haben gezeigt, dass etwa 50 Prozent der Internetnutzer erwarten, dass eine Webseite in zwei Sekunden oder weniger geladen wird. Wenn es also drei Sekunden dauert, bis deine Seite geladen ist, ist die Wahrscheinlichkeit groß, dass du einen Besucher verlierst. 

Auf der anderen Seite ist es tatsächlich möglich, die Konversionsrate zu erhöhen, indem man die Ladezeit der Seite verkürzt. 

Wenn du recherchierst, wie du deine Website schneller machen kannst, ist es gut möglich, dass du auf den Begriff "Lazy Loading" gestoßen bist.

Wenn du dir nicht sicher bist, was dieser Begriff bedeutet, keine Sorge. Du bist nicht allein.

Was ist Lazy Loading?

Beim Lazy Loading (auch bekannt als zeitversetztes Laden) werden die notwendigen Seiteninhalte erst dann geladen, wenn sie benötigt werden, um Systemressourcen zu sparen und die Gesamtgeschwindigkeit und Leistung zu verbessern. 

In Bezug auf Bilder bedeutet "Lazy Loading", dass alle Bilder, die nicht sofort benötigt werden, erst dann geladen werden, wenn sie benötigt werden. 

Es funktioniert, indem es dem ursprünglichen Inhalt Attribute hinzufügt.

Indem das Laden von Bildern aufgeschoben wird, bis sie gebraucht werden, können Webseiten mit nur den unmittelbar benötigten Bildern schneller geladen werden. 

Bilder auf der Seite, die sich nicht im Sichtfenster der Nutzer/innen befinden, werden mit einem Platzhalterbild gefüllt, bis sie benötigt werden.

Wenn du ein Instagram-Nutzer bist, hast du diese Funktion wahrscheinlich schon mehrmals gesehen. Wenn du Instagram das nächste Mal benutzt, besuche eine beliebte Seite und stelle fest, dass die Fotos erst geladen werden, wenn du nach unten scrollst, wo die Fotos sind. 

Was ist Eager Loading?

Während Lazy Loading sich beim Laden von Bildern Zeit lässt, hat Eager nicht die gleiche Geduld.

Beim eifrigen Laden werden alle Elemente auf einer Seite auf einmal geladen. Dabei werden zusammenhängende Elemente geladen, auch wenn der Besucher nicht bis zu ihnen scrollt. 

Vielleicht hast du Eager Loading auch schon einmal in Aktion gesehen. Wenn du jemals eine Seite mit vielen Fotos oder Videos besucht hast, auf der ein Ladebildschirm angezeigt wurde, dann ist das Eager Loading. 

Eifriges Laden ermöglicht es dir, alle deine Ressourcen auf einmal zu laden, aber es kann zu viel langsameren Geschwindigkeiten und erhöhtem Bandbreiten- und Ressourcenverbrauch führen. 

Lazy Loading vs. Eager Loading

Welche Art der Beladung am besten funktioniert, hängt von deinen individuellen Bedürfnissen ab. 

Lazy Loading bietet eine Reihe von Vorteilen, z. B. weniger Anfragen, schnellere Ladezeiten, weniger Ressourcen und weniger Bandbreite.

Das ist besonders hilfreich, wenn du viele Fotos auf einer Seite hast oder einen Artikel, der mehrere Fotos enthält.

Und bei mobilen Websites, wo die Nutzer noch ungeduldiger sind

Eager Loading stellt sicher, dass deine Website und alle dazugehörigen Inhalte sofort geladen werden. 

Wenn du leichtgewichtige Assets oder schnelle Abfragen hast, kann Eager Loading eine gute Option sein, weil es Zeit spart, weil keine zusätzlichen SQL-Abfragen ausgeführt werden müssen.

Lazy Loading in WordPress

WordPress hat in Version 5.5 standardmäßig das "Lazy Loading" für Bilder eingeführt.

Bis zur Version 5.5 mussten die Nutzer ein Plugin eines Drittanbieters installieren, um Bilder mit Verzögerung zu laden. 

Das sollte für Millionen von WordPress eine große Verbesserung der Website-Geschwindigkeit bedeuten.

"Wenn WordPress das native Lazy Loading standardmäßig aktiviert, würde dies die Leistung und das Nutzererlebnis von Millionen von Websites erheblich beeinflussen, ohne dass man dafür technische Kenntnisse oder auch nur ein Bewusstsein für das Konzept des Lazy Loading braucht", sagte WordPress Felix Arntz in der 5.5-Ankündigung. "Die Einführung des neuen Ladeattributs ist eine große Chance für WordPress , den Weg für ein schnelleres Web insgesamt zu ebnen."

Lazy Loading kann jetzt zu jeder Seite hinzugefügt werden, indem das Attribut "loading" zu jedem "img"-Tag hinzugefügt wird.