Lazy Loading - kürzere Ladezeiten und mehr Engagement

Unabhängig vom Zweck einer Website werden Besucher durch lange Ladezeiten abgeschreckt. Ein schnelles Laden der Seite und eine schnelle Leistung (Website-Performance) sind der Schlüssel zu einer positiven Web-Nutzererfahrung. Ein möglicher Grund, warum eine Website langsam lädt, ist die Größe der Seite. Genauer gesagt, die Größe aller darauf platzierten Elemente und die Menge des Inhalts. Viele Bilder, Videos und andere Medien können eine Website verlangsamen und dazu beitragen, dass frustrierte Besucher die Seite zugunsten der Konkurrenz verlassen. Glücklicherweise gibt es eine Lösung, bei der keine Inhalte entfernt werden müssen. Sie heißt Lazy Loading. Es verbessert die Leistung Ihrer Website und wirkt sich sogar positiv aus auf SEO! Erfahren Sie mehr über ihn.

Was ist "Lazy Loading"?

Lazy Loading oder On-Demand Loading ist eine Optimierungstechnik, die darauf abzielt, wichtige Ressourcen zu einem bestimmten Zeitpunkt zu laden. Der Browser lädt nicht alle auf einmal vom Server herunter, sondern nur die vorrangigen, die für den Benutzer sichtbar sein sollen. Die Technik des "Lazy Loading" wird hauptsächlich für Grafiken und Bilder auf einer Seite verwendet. Diese sind in der Regel am größten. Eine Website mit implementiertem Lazy Loading lädt nur den benötigten Inhalt zu Beginn und lädt den Rest erst, wenn der Nutzer ihn braucht.

Dieser Prozess wird als "faul" bezeichnet, weil er das Laden aufschiebt, bis es notwendig ist. Genauso wie manche Menschen Aufgaben aufschieben, bis es kein Entrinnen mehr gibt. In diesem Fall ist Faulheit jedoch eine großartige Sache!

Woher kennen Sie diese Technik?

Vielleicht hören Sie jetzt zum ersten Mal den Begriff "Lazy Loading". Ich kann Ihnen jedoch versichern, dass Sie dieser Technik schon oft begegnet sind. Das häufigste Beispiel ist Google Graphics. Wenn ich nach "manuli" suche, zeigt mir Google auf einer einzigen Ergebnisseite etwa ein Dutzend Bilder an. Es macht keinen Sinn, all diese Bilder auf einmal auf die Seite zu laden. Warum eigentlich? Weil ich wahrscheinlich nicht sehr weit scrollen werde, bevor ich ein Bild finde, das mir gefällt, und die Seite verlasse. Das ist der Grund verzögertes Laden ist in Google Graphics implementiert. Bei versteckten Inhalten lädt Google Ersatzbilder anstelle der echten Bilder. Diese werden viel kürzer geladen, und die eigentlichen Bilder werden nur schnell geladen, wenn ich nach unten scrolle.

Was sind die Vorteile des "Lazy Charging"?

Die Technik des "Lazy Loading" bietet viele Vorteile. Die wichtigsten davon sind:

• Beschleunigung der anfänglichen Ladezeit von Webseiten durch Verringerung der zum Laden erforderlichen Größe
• verbesserte Benutzerfreundlichkeit. Dies steht in direktem Zusammenhang mit einer Verkürzung der Wartezeiten für das Laden von Ressourcen)
• geringere Netzbelastung durch Vermeidung der Übertragung unnötiger Daten

Langsames Laden und SEO

Die Ladegeschwindigkeit einer Website ist einer der wichtigsten Ranking-Faktoren. Das Problem scheint also einfach zu sein. Lazy Loading wirkt sich positiv auf die Suchmaschinenoptimierung aus, denn mit dieser Technik müssen Website-Besucher nicht lange warten, bis sie die Ressourcen sehen, die sie interessieren. Allerdings gab es in der Vergangenheit Gerüchte, dass Suchmaschinenroboter Websites bevorzugen, deren reiner Code HTML sind in der Lage, korrekt zu scrawlen, und "Lazy Loading" ist ein zusätzliches Skript, das Probleme bei der Indexierung verursacht. Glücklicherweise sind Bots so spezialisierte Mechanismen, und Lazy Loading ist bereits eine so verbreitete Technik, dass ihre korrekte Implementierung keine negativen Auswirkungen auf die Positionierung.

Implementierung von "Lazy Loading

Es wird Sie sicher interessieren, wie die Implementierung von Lazy Loading aus technischer Sicht aussieht. Kurz und bündig Dazu gehört die Implementierung eines geeigneten JavaScript-Codes, der feststellt, wo auf der Seite sich der Besucher befindet. Mit diesen Informationen können dem Nutzer sogenannte "above-the-fold"-Inhalte angezeigt werden. Das sind die Inhalte, die man sehen kann, ohne auf der Website nach unten scrollen zu müssen.

Wenn Sie sich für Lazy Loading entscheiden und die Grundlagen der Arbeit mit Code kennen, machen Sie sich mit dem Die offiziellen Leitlinien von Googlewie sie umgesetzt werden sollen. Die drei von dem Riesen aus Mountain View vorgeschlagenen Methoden sind:

• IntersectionObserver API und Polyfill

• natives träges Laden von Bildern und iframes

• offene QuelleBibliotheken, die das Laden von Daten unterstützen

Wenn Ihre Websites auf WordPress basieren, können Sie auch Verwenden Sie das entsprechende Plug-in wie zum Beispiel Faule Lader.

Lazy Loading versus Eager Loading - was ist der Unterschied?

Das Herunterladen von Daten zur Anzeige kann nicht nur durch "Lazy Loading" erfolgen. Der umgekehrte Prozess zum lazy loading ist das Eifriges Laden. Dies bedeutet, dass alle Daten sofort heruntergeladen werden, wenn die Seite oder der Anwendungsbildschirm angezeigt wird. Wann ist diese Technik anwendbar? Wenn viele Ressourcen im Hintergrund geladen werden müssen, damit die Website ordnungsgemäß funktioniert.

An dieser Stelle sei darauf hingewiesen, dass "Lazy Loading" eine nützliche Funktion ist, die jedoch nicht verwendet werden sollte, wenn sie nicht benötigt wird. Wenn die Seite kurz ist und/oder hauptsächlich "leichte" Inhalte enthält (d. h. überwiegend Text mit minimalen Bildern/Videos), ist es am besten, eine übermäßige Kombination und Implementierung zusätzlicher Skripte zu vermeiden. Solche Maßnahmen können kontraproduktiv sein.

Faul bedeutet nicht immer schlecht

Lazy Loading ist eine häufig verwendete Lösung bei der Erstellung und Optimierung von Websites. Sie ermöglicht es Ihnen, die Ladezeit Ihrer Website zu verkürzen und sie so benutzerfreundlicher zu gestalten. Wenn Sie sich für "Lazy Loading" entscheiden, Testen Sie Ihre Website mit der neuen Funktion, bevor Sie sie einführen. Fehler können dazu führen, dass verborgene Inhalte gar nicht angezeigt werden, und kein Inhalt ist noch schlimmer als ein langsam ladender Inhalt. Denken Sie auch daran, dass "Lazy Loading" keine notwendige Optimierungsmaßnahme ist. Wenn Ihre Seiten keine großen Ressourcen enthalten, können Sie diesen Schritt überspringen.