Es gibt viele verschiedene Ansätze, um Lazy Loading auf Ihrer Website zu implementieren. Werfen Sie einen Blick auf unsere Rangliste der Top-Plugins für WordPress, die langsames Laden unterstützen.
Es gibt zahlreiche kostenlose Plugins im WordPress-Verzeichnis, die zum verzögerten Laden von Bildern und Videos verwendet werden können. Nachdem wir einige Dutzend Plugins in Betracht gezogen und einige getestet haben, haben wir zwei Plugins gefunden, die die Leistung der Website erheblich steigern. Wenn Sie Lazy Loading implementieren möchten, sollten Sie die folgenden Optionen in Betracht ziehen.
WP Rocket verwenden (Premium)
WP Rocket ist der einfachste Ansatz, um langsames Laden auf Ihrer Website zu implementieren. Darüber hinaus dauert der Prozess der Aktivierung weniger als eine Minute. LazyLoad ist der Name des Plugins, das WP Rocket als seine Version von Lazy Image Loading enthält.
Wenn LazyLoad aktiviert ist, stoppt WP Rocket sofort das WordPress-eigene "Lazy Loading" von Bildern, um mögliche Probleme zu vermeiden.
Führen Sie die folgenden Schritte aus, um die LazyLoad-Funktion von WP Rocket zu aktivieren: -
- Sie können LazyLoad aktivieren, indem Sie innerhalb Ihrer WordPress-Installation zu Einstellungen > WP Rocket > Medienpanel navigieren.
- Klicken Sie unter dem Bereich LazyLoad am oberen Bildschirmrand auf "Für Bilder aktivieren".
- Klicken Sie auf "Änderungen speichern", nachdem Sie Ihre Auswahl getroffen haben.
Das ist alles, was noch getan werden muss. Das hat zur Folge, dass die Besucher die Fotos nur langsam laden können.
LazyLoad bietet im Gegensatz zum nativen Ansatz von WordPress ein "Lazy Loading" für zusätzliche HTML-Elemente, wie z. B. Iframes und Videos. Außerdem wird LazyLoad für Hintergrundbilder verwendet, wenn solche Bilder inline für bestimmte HTML-Komponenten verwendet werden.
Wenn Sie die WordPress-eigene Funktion zum langsamen Laden von Bildern nutzen möchten, können Sie die Option LazyLoad in WP Rocket deaktivieren. Andererseits wird die neue Ladeeigenschaft noch nicht von allen Browsern unterstützt. Darüber hinaus ist die Installation von WordPress nur auf Fotos ausgerichtet. Daher ist LazyLoad von WP Rocket immer noch die bessere Alternative, insbesondere wenn Ihre Website viele Bilder, Videos und Einbettungen enthält.
Was ist bei der Aktivierung von WP Rocket's Native Lazy Loading zu beachten?
Auch wenn WP Rocket keine automatische Kompatibilität mit Chrome-Browsern bietet, die natives Lazy Loading verwenden, haben Sie immer noch die Möglichkeit, die Unterstützung für Chrome's natives Lazy Loading zu wählen, indem Sie es durch ein Helper-Plugin aktivieren. Ebenso ist es der Fall, obwohl WP Rocket keine automatische Kompatibilität mit anderen Browsern bietet, die natives Lazy Loading verwenden.
Mit diesem hilfreichen Plugin können Sie die folgenden Dinge sicherstellen:
- Jedes Ihrer Fotos enthält die notwendige HTML-Syntax, um das native Lazy Loading zu nutzen; Browser, die mit Chrome kompatibel sind, nutzen automatisch das native Lazy Loading; alle anderen Browser nutzen automatisch WP Rocket's LazyLoad.
- Sie haben die Möglichkeit, weiterhin unsere robuste LazyLoad-Technologie zu nutzen oder auf die in Chrome eingebaute Lazy-Load-Funktion umzusteigen.
Das hängt ganz von Ihnen ab! Probieren Sie zunächst beide Ansätze an Ihrem Standort aus und entscheiden Sie sich dann für den, der für Sie am besten geeignet ist.
a3 Lazy Load verwenden (kostenlos)
Wenn Sie nach einer kostenlosen Option suchen, empfehlen wir Ihnen das a3LazyLoad Plugin. Mit dem a3-Plugin können Sie das faule Laden für bestimmte Bilder und Seiten deaktivieren. Außerdem ermöglicht es das verzögerte Laden von Videos auf Ihrer Website:
Außerdem unterstützt dieses Plugin das faule Laden externer Bilder und Videos. Die WordPress-Kernimplementierung führt diese Aktion nicht durch.
Sie können dieses Plugin über Ihr WordPress-Dashboard installieren und aktivieren. Jetzt können Sie die Einstellungen des Tools anpassen.
Schritt 2: Anpassen der Plugin-Bildeinstellungen
Gehen Sie nun zu Einstellungen > a3 Lazy Load. Wenn Sie unter Lazy Load Activation nachsehen, ist das Plugin nach der Installation standardmäßig aktiviert.
Öffnen Sie nun die Registerkarte LazyLoad-Bilder. Sie können (1) auswählen, welche Website-Bilder verzögert werden sollen und (2) einen Fallback für Webbrowser bereitstellen, die JavaScript nicht akzeptieren. Für Bilder, deren Laden Sie nicht verzögern möchten, können Sie (3) eine CSS-Klasse festlegen:
In den Standardeinstellungen sind alle Optionen aktiviert. Wir empfehlen Ihnen dringend, diese Einstellung beizubehalten. Erstellen Sie eine CSS-Klasse, die es Ihnen ermöglicht, das verzögerte Laden für bestimmte Bilder zu überspringen.
Schritt 3: Anpassen der Plugin-Videoeinstellungen
Die Registerkarte Lazy Load Videos und iframes ist der nächste Schritt. Mit a3 Lazy Load können Sie das verzögerte Laden für bestimmte Clips auswählen, genau wie bei Bildern.
Das Plugin erlaubt Videos in (1) Inhalten und Widgets und bietet (2) eine Fallback-Funktion für Browser, die JavaScript nicht unterstützen:
Sie können in den Videoeinstellungen (3) eine CSS-Klasse angeben, um bestimmte Videos vom verzögerten Laden auszuschließen. Wenn Sie eine einfachere Konfiguration wünschen, verwenden Sie dieselbe Klasse, die Sie im Abschnitt Bilder gewählt haben.
Mehr Lazy Loading Plugins für WordPress
Abgesehen von WP rocket & a3 Lazy Load gibt es mehrere nützliche Plugins für Lazy Load, die Sie in Betracht ziehen können:
- Lazy Load für Videos
- BJ Faule Last
- Mehr Produkte für WooCommerce laden
- WordPress Infinite Scroll - Ajax Load Mehr
- Disqus Bedingte Last
- Lazy Load für Kommentare
Abschließende Überlegungen
Wenn Sie Ihre Website aktualisieren oder ändern, sollten Sie sich unbedingt über mögliche Konflikte im Klaren sein. Schauen Sie sich diese Liste mit häufigen Problemen im Zusammenhang mit Lazy Load an, wenn Sie feststellen, dass das Zulassen von Lazy Loading dazu geführt hat, dass irgendein Aspekt Ihrer Website nicht mehr funktioniert.
Es ist möglich, dass es Inkompatibilitäten gibt, weil die Funktion "Lazy Loading" nicht auf die Bilder angewendet wird, die von Plugins wie Revolution Slider und Envira Gallery hochgeladen werden. Die gesamte Liste der kompatiblen Plugins finden Sie hier.
Diesen und viele andere Artikel finden Sie im Seahawk Media Blog.
