Was ist Lazy Loading und wie verbessert es die Benutzererfahrung?

Wenn es einen Aspekt einer Website gibt, den die meisten Websitebesitzer ignorieren, dann ist es die Ladezeit der Seite. Sie verbringen viel Zeit und Geld damit, das perfekte Design für unsere Website zu finden und verschiedene Arten von Inhalten hinzuzufügen, um die Besucher zu fesseln. Was aber, wenn das nicht ausreicht, um Ihre Besucher in Nutzer umzuwandeln?

Studien zeigen, dass mit jeder zusätzlichen Sekunde, die Ihre Website zum Laden benötigt, die Chance sinkt, einen Besucher in einen Kunden umzuwandeln. Laut Portent beträgt die Wahrscheinlichkeit einer Konvertierung in einer Sekunde des Ladens 40 %, während sie in der nächsten Ladesekunde auf 34 % und nach drei Sekunden auf 29 % sinkt. Sie fragen sich vielleicht: „Was ist dann die Lösung?“

Und hier kommt das Konzept des Lazy Loading ins Spiel. Es ist eine schnellere Möglichkeit, Ihre Website zu laden, ohne die Qualität Ihrer Inhalte zu beeinträchtigen.

In diesem Artikel untersuchen wir Lazy Loading, warum man es verwendet und wie es im Vergleich zu anderen Methoden abschneidet. Lasst uns loslegen!

Inhaltsverzeichnis

• Was ist Lazy Loading?
• Die Bedeutung des verzögerten Ladens
• Eifriges Laden vs. Lazy Loading
• Wie Lazy Loading funktioniert
• Lazy Loading implementieren

Was ist Lazy Loading?

Lazy Loading ist eine Möglichkeit, Zeit zu sparen, indem nur Teile einer Website geladen werden, die Sie sofort benötigen. Anstatt alles auf einmal zu laden, was langsam sein und viele Ressourcen verbrauchen kann, lädt diese Methode den Inhalt Stück für Stück

Bilder oder Videos, die nicht sofort geladen werden, enthalten oft Platzhalterelemente, bis sie benötigt werden. Beispielsweise lädt Lazy Loading nicht alle Bilder auf einmal. Es werden nur diejenigen geladen, die Sie auf Ihrem Bildschirm sehen können. Der Rest wird erst geladen, wenn Sie nach unten scrollen

Anstatt darauf zu warten, dass alles geladen ist, können Sie sofort sehen, was bereits auf dem Bildschirm angezeigt wird.

Expertentipp: Prüfen Sie, wie gut Lazy Loading auf verschiedenen Browsern und Geräten funktioniert.Dadurch soll sichergestellt werden, dass es keine Kompatibilitätsprobleme gibt.

Die Bedeutung von Lazy Loading

Wir wissen bereits, dass Lazy Loading Ihnen dabei helfen kann, die Conversion zu steigern. Aber das ist nicht der einzige Vorteil, den es hat. Hier sind einige weitere Gründe, warum Sie Lazy Loading auf Ihrer Website implementieren sollten.

Leistung optimieren

Lazy Loading reduziert die Datenübertragung, wenn jemand Ihre Website besucht. Dies ist von entscheidender Bedeutung für Menschen, die mobile Geräte mit langsamer Internetverbindung und kleinen Datentarifen verwenden.

Reduzieren Sie Bandbreite und Serverlast

Lazy Loading spart Daten und reduziert die Serverarbeit. Dies senkt die Kosten für Website-Eigentümer und -Benutzer, da verhindert wird, dass Inhalte geladen werden, wenn sie nicht benötigt werden.

Verbessern Sie SEO

Suchmaschinen wie Google priorisieren schnell ladende Websites so sehr, dass dies ein offizieller Rankingfaktor ist. Mit der Lazy-Loading-Technik können Sie die Ladegeschwindigkeit Ihrer Seite steigern, die Absprungrate reduzieren und Ihre Website zu einem höheren Ranking führen.

Was ist Eager Loading?

Eager Loading ist das genaue Gegenteil von Lazy Loading. Es lädt zunächst alle erforderlichen Ressourcen auf einmal, einschließlich Mediendateien, Skripte und Stile. Dadurch sind alle notwendigen Seitenelemente sofort verfügbar. Es entsteht also keine zusätzliche Belastung, wenn Benutzer scrollen oder interagieren.

Eager Loading war in der Vergangenheit die herkömmliche Methode und wird auch heute noch von vielen Websites verwendet.

Obwohl es einfach zu implementieren ist, hat Eager Loading aufgrund mehrerer Faktoren an Bedeutung verloren, darunter:

Erhöhte Webseitengröße

Moderne Websites verwenden mehr Rich Media und interaktive Teile. Das bedeutet, dass die durchschnittliche Webseite viel größer ist als zuvor. Daher kann Eager Loading zu längeren anfänglichen Seitenladezeiten führen. Besonders für Benutzer mit langsameren Internetverbindungen.

Negative Auswirkungen auf die Leistung

Längere Seitenladezeiten können wichtige Website-Leistungskennzahlen wie First Contentful Paint (FCP) und Largest Contentful Paint (LCP) beeinträchtigen. Diese sind der Schlüssel für SEO und Benutzererfahrung.

Aufstieg mobiler Nutzer

Angesichts der massiven Nutzung des mobilen Surfens ist es von entscheidender Bedeutung, dass Dinge von Anfang an superschnell geladen werden.

Eager Loading vs. Lazy Loading

Hier ist ein kurzer Vergleich von Eager Loading und Lazy Loading:

Lazy Loading und Eager Loading sind zwei verschiedene Methoden des Ressourcenladens mit jeweils eigenen Vor- und Nachteilen. Aus heutiger technischer Sicht gilt Lazy Loading jedoch aufgrund seiner Effizienz, Leistungsvorteile und besseren Benutzererfahrung als die bevorzugte Technik für die meisten modernen Websites.

So funktioniert Lazy Loading

Nachdem Sie nun wissen, warum Lazy Loading zwischen beiden bessere Ergebnisse liefert, werfen wir einen Blick darauf, wie es dies erreicht.

Benutzernavigation und -interaktion : Lazy Loading hängt davon ab, wie Benutzer die Webseite nutzen.Es beginnt oft, wenn Benutzer scrollen oder ihre Maus bewegen. Während sie scrollen, vermutet der Browser, dass in dem Bereich, den sie sehen, neue Inhalte benötigt werden. Anschließend wird mit dem Laden dieser Ressourcen begonnen. Lazy Loading kann auch mit anderen Aktionen beginnen, etwa dem Klicken auf eine Schaltfläche oder dem Bewegen des Mauszeigers über ein Element.

Technische Umsetzung für Bilder : Lazy Loading funktioniert für verschiedene Arten von Inhalten unterschiedlich.Bei Bildern, die sehr häufig vorkommen, beginnen Sie normalerweise mit der Anzeige eines Platzhalters von geringer Qualität oder eines einfachen Ladesymbols. Wenn der Benutzer in die Nähe des echten Bildes scrollt, wird das klare, hochwertige Bild geladen. Auf diese Weise müssen Benutzer nicht auf Bilder warten, die sie noch nicht sehen können.

Anwendung verschiedener Webressourcen : Lazy Loading ist eine flexible Methode, die für verschiedene Elemente, nicht nur für Bilder, verwendet werden kann.Es funktioniert gleichermaßen gut für Videos, Iframes und sogar Elemente, die viele Skripte erfordern. Wenn Sie diese Elemente nur bei Bedarf laden, können Sie die Ladegeschwindigkeit Ihrer Seite erheblich steigern und Ihre Ressourcen effizient verwalten. Dies ist besonders wichtig für umfangreiche Ressourcen wie hochauflösende Videos.

Lazy Loading implementieren

In diesem Teil zeigen wir Ihnen die verschiedenen Möglichkeiten, Lazy Loading auf Ihrer Website zu implementieren.

Methode 1 – Manuelles Implementieren von Lazy Loading

Die manuelle Methode zur Implementierung von Lazy Loading ist nicht jedermanns Sache. Es ist komplex und Sie sollten zumindest über mittlere Programmierkenntnisse verfügen.

Dazu verwenden Sie hauptsächlich HTML und JavaScript. Bevor Sie beginnen, stellen Sie sicher, dass Sie Zugriff auf die Designdateien Ihrer WordPress-Site haben und sicher sind, HTML und JavaScript zu bearbeiten.

Hier ist eine detaillierte Anleitung, die Ihnen durch den Prozess hilft:

Schritt 1 : Sichern Sie Ihre Website

Sichern Sie immer Ihre WordPress-Site, bevor Sie Änderungen an den Theme-Dateien vornehmen, um einen Datenverlust zu vermeiden, wenn Ihnen ein Fehler unterläuft.

Schritt 2: Bearbeiten Sie die Datei „functions.php“ des Themes

• Greifen Sie auf die Dateien Ihrer WordPress-Site zu (mit einem FTP-Client oder einem Dateimanager in Ihrem Hosting-Kontrollfeld).
• Navigieren Sie zu /wp-content/themes/your-theme/ und suchen Sie die Datei „functions.php“ .
• Öffnen Sie „functions.php“ zum Bearbeiten.

Schritt 3 : Fügen Sie das Lazy Loading-Skript hinzu

Fügen Sie in „functions.php“ eine Funktion hinzu, um eine JavaScript-Datei für Lazy Loading in die Warteschlange einzureihen. Hier ist ein einfaches Beispiel:

Funktion add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

Dieser Code geht davon aus, dass Sie eine JavaScript-Datei mit dem Namen lazy-load.js in einem js- Ordner in Ihrem Theme-Verzeichnis haben.

Schritt 4 : Erstellen Sie die JavaScript-Datei

• Erstellen Sie eine neue Datei mit dem Namen lazy-load.js im js- Ordner Ihres Theme-Verzeichnisses.
• Fügen Sie JavaScript hinzu, um das Lazy Loading zu bewältigen. Hier ist ein einfaches Beispiel mit IntersectionObserver :

document.addEventListener(“DOMContentLoaded”, function() {

let lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if („IntersectionObserver“ im Fenster) {

let lazyImageObserver = new IntersectionObserver(function(entries, Observer) {

Einträge.forEach(function(entry) {

if (entry.isIntersecting) {

let lazyImage = enter.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove(“faul”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(function(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

Schritt 5 : Aktualisieren Sie Ihre Bild-Tags in WordPress

Ändern Sie Ihre Bild-Tags, um Lazy Loading zu unterstützen. Ändern Sie in Ihren PHP-Vorlagen oder direkt in Ihren Beiträgen/Seiten Ihre Bild-Tags wie folgt:

<img class=“lazy“ src=“placeholder-image.jpg“ data-src=“original-image.jpg“ alt=“image description“>

Ersetzen Sie placeholder-image.jpg durch ein Bild mit niedriger Auflösung oder eine Ladegrafik und original-image.jpg durch die tatsächliche Bild-URL.

Expertentipp: Verwenden Sie responsive Platzhalter für verzögert geladene Bilder, um sicherzustellen, dass das Layout stabil bleibt.

Schritt 6 : Testen Sie Ihre Änderungen

• Wenn Sie ein Caching-Plugin installiert haben, leeren Sie unbedingt den Cache Ihrer Website.
• Gehen Sie dann auf Ihre Website und scrollen Sie nach unten zu dem Abschnitt, in dem ein Bild verzögert geladen werden soll.
• Nehmen Sie sich einen Moment Zeit, um zu sehen, ob die Bilder beim Scrollen reibungslos geladen werden.

Anmerkungen

• Stellen Sie sicher, dass Sie den Test immer zuerst in einer Entwicklungsumgebung durchführen, bevor Sie ihn auf Ihrer Live-Website durchführen.
• Erwägen Sie dabei die Erstellung eines untergeordneten Themas. Aktualisierungen des Themes können Ihre Änderungen überschreiben.
• Für andere Inhaltstypen wie Videos oder Iframes kann ein ähnlicher Ansatz verwendet werden, bei dem das src- Attribut durch ein data-src- Attribut ersetzt und im Ansichtsfenster über JavaScript geladen wird.

Diese Technik ist eine einfache Möglichkeit, Lazy Loading zu integrieren. Wenn Sie komplexere Websites oder spezifische Anforderungen haben, möchten Sie möglicherweise eine stärkere Lösung oder ein Plugin ausprobieren.

Methode 2 – Verwendung eines WordPress-Plugins zur Implementierung von Lazy Loading

Dies ist die einfachste der beiden Methoden, da Sie ein WordPress-Plugin verwenden können, um Lazy Loading sicher zu aktivieren. Mehrere Plugins ermöglichen Ihnen dies, in diesem Beispiel verwenden wir jedochWP-Optimize .WP-Optimize ist ein leistungsstarkes WordPress-Plugin, das Ihnen hilft, die Geschwindigkeit Ihrer Website zu steigern und das Benutzererlebnis zu verbessern.

Es bietet eine einfache und unkomplizierte Methode, Ihre Bilder, Iframes und Videos auf Lazy Load einzustellen. Die integrierte Lazy Load-Funktion verzögert automatisch das Laden von Webressourcen, bis sie sichtbar sind, was zu deutlich schnelleren Seitenladezeiten führt. Dies ist jedoch eine Premium-Funktion von WP-Optimize.

So aktivieren Sie die Funktion:

• Öffnen Sie die Registerkarte„WP-Optimize > Bilder“ in Ihrem WordPress-Admin-Dashboard
• Öffnen Sie die Unterregisterkarte Lazy Load Images
• Von hier aus können Sie Lazy Loading sowohl für Bilder als auch für Videos/Iframes aktivieren

Wenn Sie Lazy Loading für bestimmte Bilder, Hintergrundbilder, Videos oder Iframes deaktivieren müssen, aktivieren Sie es einfach hier. Sie können bestimmte Bildklassen auch überspringen.

Vorher und nachher

Wir haben die Geschwindigkeit einer Beispielwebsite vor und nach der Implementierung von Lazy Load getestet. Laut GTMetrix war die Website mit einer First Contentful Paint (FCP) -Ladezeit von 1,5 Sekundenbereits recht schnell.

Nach der Aktivierung von Lazy Loading betrug die FCP 344 ms, was viel schneller ist als zuvor. Die Ergebnisse können je nachdem, wie viel Inhalt Sie auf Ihrer Seite haben, variieren, aber in den meisten Fällen wird sich Ihr FCP-Score verbessern.

Sind Sie bereit, die Ladezeit Ihrer Seite zu verkürzen?

So, das ist es! Wir haben darüber gesprochen, was Lazy Loading ist und welche wichtige Rolle Lazy Loading für moderne Websites spielt. Indem Sie darauf warten, Dinge zu laden, bis Sie sie benötigen, werden Seiten schneller geladen, Internetdaten gespart und das Surfen reibungsloser gestaltet, insbesondere auf Telefonen mit begrenztem Datenvolumen.

Wir haben auch einige nützliche Ratschläge zur Verwendung von Lazy Loading in WordPress gegeben. Wir decken alles ab, von der Selbsterstellung mit Code bis zur Verwendung eines Plugins wie WP-Optimize.

Versuchen Sie, Lazy Loading zu Ihrer Website hinzuzufügen und teilen Sie uns mit, wie sich dies auf Ihre Leistung auswirkt. Gibt es Fragen? Fragt gerne in den Kommentaren nach.

Häufig gestellte Fragen

Ist Lazy Loading gut oder schlecht?

Lazy Loading gilt im Allgemeinen als bewährte Vorgehensweise, da es mehrere Vorteile bietet. Es trägt dazu bei, die Ladezeiten von Webseiten zu verkürzen und verbessert das Benutzererlebnis, indem Inhalte nur dann geladen werden, wenn sie benötigt werden.

Was ist Lazy Loading in der Benutzeroberfläche?

Lazy Loading in der Benutzeroberfläche bezieht sich auf die Praxis, visuelle Elemente wie Bilder und Videos nur dann zu laden, wenn sie sich im Ansichtsfenster des Benutzers (oder in dessen Nähe) befinden.

Beeinflusst Lazy Loading die Suchmaschinenoptimierung?

Bei korrekter Implementierung kann sich Lazy Loading positiv auf die Suchmaschinenoptimierung auswirken, indem es die Ladezeiten der Seiten verbessert und das Benutzererlebnis verbessert – beides wichtige Ranking-Faktoren.

Sollten Sie alle Bilder verzögert laden?

Während es von Vorteil ist, Bilder, die sich außerhalb des Bildschirms befinden, verzögert zu laden, ist dies für Bilder, die beim Laden der Seite sofort sichtbar sind, nicht erforderlich. Durch das sofortige Laden dieser Bilder kann eine Verzögerung bei der Anzeige vermieden werden.

Welche Probleme gibt es beim Lazy Loading?

Zu den Problemen mit Lazy Loading gehören Verzögerungen beim Laden von Inhalten beim Scrollen durch Benutzer, potenzielle Probleme mit der Suchmaschinenindizierung, wenn sie nicht korrekt implementiert ist, und die Abhängigkeit von JavaScript, das möglicherweise nicht von allen Browsern unterstützt wird.