Die besten Lazy-Load-Plugins, um Ihre WordPress-Site schneller zu machen

Das Laden von Websites mit einer Menge Bilder kann ewig dauern. Für jedes Bild ist das eine weitere HTTP-Anforderung, und Ihre Benutzer müssen länger frustriert warten, während Seiten langsam geladen werden.

Also, was ist die Lösung? Faules Laden.

Lesen Sie weiter oder springen Sie mit diesen Links weiter:

• Natives Lazy Loading kam mit WordPress 5.5
• Ist ein Plugin noch notwendig?
  • Zugriff auf eine Schnittstelle
  • Browser-Kompatibilität
  • Zusätzliche Optimierung
• Gibt es irgendwelche Vorteile für natives Lazy Loading?
• Die besten Lazy-Load-Plugins
• Mehr über Lazy Loading

Lazy Loading kann bildlastige Websites erheblich beschleunigen und ist im Handumdrehen auf Ihrer Website aktiviert.

Kurz gesagt, es zwingt Bilder dazu, nur geladen zu werden, wenn sie „above the fold“ sind – mit anderen Worten, es werden nur Bilder geladen, die im Browser eines Benutzers zu sehen sind.

Wenn Sie also eine Seite mit 10 frischen und kostenlosen Vollbild-WordPress-Designs haben, werden nur die ersten paar Bilder im Beitrag geladen und die anderen werden geladen, wenn der Benutzer die Seite nach unten scrollt.

Natives Lazy Loading kam mit WordPress 5.5

Lazy Loading ist noch ein relativ neues Feature für WordPress.

Es funktioniert, indem Sie das Attribut „faul“ hinzufügen und den Wert auf „loading“ für Ihre Bilder setzen, was dann vom Browser bei der Ausgabe verarbeitet wird.

Wenn Sie ein Lazy-Loading-Plugin haben, dem Sie treu sind, oder Phasen durchlaufen, in denen Sie Lazy Load überhaupt nicht aktivieren möchten, werden Sie erfreut sein zu hören, dass Sie es deaktivieren können.

Einige Plugins tun dies automatisch, aber wenn Sie es manuell tun müssen, gehen Sie einfach zu Ihrer Datei functions.php und fügen Sie Folgendes hinzu:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Dadurch wird die Lazy-Loading-Funktion von WordPress deaktiviert, was bedeutet, dass Sie ein Plugin Ihrer Wahl ohne das Risiko eines Konflikts verwenden können.

Es ist nur eine Codezeile, aber wenn Sie sich nicht wohl dabei fühlen, sie hinzuzufügen, können Sie dieses einfache Plugin herunterladen, das dies für Sie erledigt.

Ist ein Plugin noch notwendig?

Sie fragen sich vielleicht, ob Sie jetzt überhaupt ein Plugin verwenden sollen, da WordPress natives Lazy Loading anbietet.

Lesen Sie weiter, denn es gibt tatsächlich ein paar Gründe, warum Sie bei einem Plugin bleiben sollten:

Zugriff auf eine Schnittstelle

Ein gutes Lazy-Loading-Plugin wie Smush bietet eine Schnittstelle mit Optionen zum Optimieren bestimmter Einstellungen sowie die Möglichkeit, Lazy Loading per Knopfdruck ein- und auszuschalten.

Diese Optionen können von den Bildtypen, die verzögert geladen werden, bis zu den Seiten reichen, für die verzögertes Laden gilt. Wenn Sie solche Einstellungen ohne Plugin ändern möchten, müssen Sie tief in den Code eintauchen und diese Ausnahmen manuell hinzufügen.

Browser-Kompatibilität

Ein weiterer großer Vorteil ist, dass die meisten Plugins in allen Browsern funktionieren. Safari ist einer der Hauptbrowser, der das Ladeattribut nicht unterstützt. Wenn Sie also eine Website mit vielen Bildern haben, könnten Sie Benutzer von nicht unterstützten Browsern abprallen sehen. Dies ist etwas, worüber Sie sich bei der Verwendung eines Plugins keine Gedanken machen müssen.

Zusätzliche Optimierung

Die meisten Plugins bieten viel mehr als nur Lazy Loading. Die Einführung eines Bildoptimierungs-Plugins auf Ihrer Website ist möglicherweise eine der besten Entscheidungen, die Sie jemals treffen werden.

Plugins wie Smush können Ihnen helfen, die bildbezogenen PageSpeed-Empfehlungen von Google zu übertreffen und Ihrer Website einen Geschwindigkeitsschub zu verleihen – Lazy Loading ist nur der Anfang!

Gibt es irgendwelche Vorteile für natives Lazy Loading?

An der Oberfläche mag es so aussehen, als würde ein Plugin alles tun, was natives Lazy Loading kann, und noch mehr.

Obwohl dies technisch korrekt ist, besteht der Hauptunterschied darin, dass die meisten Plugins die Einführung einer JavaScript-Bibliothek beinhalten, von der Ihre Website abhängig sein wird.

Natives verzögertes Laden ist einfacher und unkomplizierter und erfordert nicht viel zusätzlichen Code.

Unser Bildoptimierungs-Plugin Smush bietet tatsächlich eine eigene Version des nativen Lazy Loading.

Es funktioniert auf der gleichen Basis wie WordPress, unterstützt aber dieselben Bildformate wie Smush.

Natives Lazy Loading ist vielleicht etwas, das als Grundlage für andere Entwicklungen in der Zukunft verwendet werden kann, aber zumindest für den Moment sind Plugins für die meisten Websites die richtige Wahl.

Wenn Sie die Idee eines Plugins bevorzugen, um Ihre Lazy-Loading-Anforderungen zu lösen, haben wir eine Sammlung kostenloser Lazy-Loading-Plugins zusammengestellt.

• Smush-Bildoptimierung

  

  Smush ist aus gutem Grund das beliebteste All-in-One-Bildoptimierungs-Plugin. Wir enthalten alles, was Sie brauchen, damit Ihre Bilder schneller geladen werden.

  Lazy Loading ist sowohl in der kostenlosen Version von Smush als auch im turbogeladenen Smush Pro verfügbar, das komplett mit dem Smush Pro CDN geliefert wird und im Gegensatz zu nativem Lazy Loading mit allen Browsern kompatibel ist.

  

  Um Lazy Loading mit Smush zu aktivieren, haben wir den Prozess super-duper einfach gemacht. Alles, was Sie tun müssen, ist, in Smush zum Lazy Loading -Bereich zu gehen und die Schaltfläche Aktivieren zu drücken. Das ist es.

  Sie können Ihre Einstellungen weiter anpassen, sobald Lazy Loading aktiviert ist, dies ist jedoch nicht erforderlich. Die Standardeinstellungen von Smush und Smush Pro sind alles, was Sie brauchen, um eine große Leistungsverbesserung zu sehen.

• a3 Lazy-Load

  

  A3 Lazy Load ist ein beliebtes Plugin für Lazy Loading von Bildern, Iframes, Videos und anderen Elementen auf Ihrer Website.

  Es hat viele Einstellungen, so dass Sie anpassen können, wie die Assets auf Ihrer Website geladen werden sollen.

  Es wurde auch auf 100 % Kompatibilität mit beliebten Plugins wie WooCommerce, Advanced Custom Fields und einer Vielzahl von CDNs getestet.

• Verrückt faul

  

  Hier ist ein weiteres ultraschlankes Lazy-Loading-Plugin, das einfach funktioniert. Keine komplizierte Konfiguration erforderlich.

  Abhängig vom Thema oder der Verwendung von jQuery verwendet Crazy Lazy optional eine modifizierte Version des jQuery-Plugins Unveil.js oder die native JavaScript-Bibliothek lazyload.js.

• Lazy Load für Videos

  

  Nicht alle Lazy-Loading-Plugins funktionieren mit Videos, was schade ist, da Videos mehr Masse zur Dateigröße Ihrer Webseite hinzufügen können als Bilder.

  Lazy Load für Videos kann Ihnen helfen, Videos, die auf Vimeo oder YouTube gehostet werden, verzögert zu laden. Es lädt ein Platzhalterbild und lädt nur dann das vollständige Video und den Videoplayer, wenn ein Besucher darauf klickt.

  Dies ist wichtig, wenn Ihre Website viele Videos enthält und Sie ein leichtes Plugin wählen, das kein Lazy Loading für Videos enthält.

Mehr über Lazy Loading

Die Verwendung eines Plugins ist der einfachste Weg, Lazy Loading zu Ihrer Website hinzuzufügen, aber es ist nicht der einzige Weg. Sie können auch JavaScript auf Ihrer Website verwenden, wenn Sie eine schlankere Lösung wünschen.

Wenn du mehr erfahren möchtest, sieh dir How to Defer Offscreen Images in WordPress With Lazy Loading an, um eine vollständige Aufschlüsselung darüber zu erhalten, wie Lazy Loading funktioniert und wie du die Technik auf deiner Website nachbauen kannst.

Wenn Sie mehr über die Lazy-Loading-Funktion von WordPress erfahren möchten, lesen Sie die Ankündigung.

Der einfachste Weg, mit Lazy Loading zu beginnen, ist mit Smush Free oder Smush Pro.

Smush Pro fügt weitere Funktionen hinzu, die Ihnen bei anderen Möglichkeiten von Google PageSpeed ​​Insights helfen können. Es kann Ihnen dabei helfen , Bilder in Next-Gen-Formaten bereitzustellen, indem es Ihre Bilder in WebP-Dateien konvertiert und Bilder richtig dimensioniert, indem Sie Ihre Bilder mit dem Smush Pro CDN skalieren. Smush Pro ist sogar mit dem beliebten WP Retina 2x-Plugin kompatibel, sodass Sie diese riesigen Retina-Bilder faul laden können, ohne WordPress zu verlangsamen.

Testen Sie Smush Pro kostenlos und sehen Sie, wie viel Unterschied es für Ihre Website machen kann.

• Bilder