Wie man das Beste aus Lazy Load von WP Rocket in WordPress herausholt

Bei dieser Technik wird ein Bild nur dann auf eine Seite geladen, wenn der Besucher es sehen will. Dadurch wird die Ladegeschwindigkeit der Seite insgesamt deutlich erhöht. Dies ist besonders wichtig für Websites, die über Fotogalerien verfügen.

Heute werde ich Ihnen zeigen, wie Sie dies mit dem Lazy Load Plugin erreichen können.

Was kann Lazy Load für Ihre Website tun?

Lazy Load ist eine leistungsstarke Technik für Entwickler, die mehr bewirken kann, als Sie denken.

Fangen wir mit dem Offensichtlichen an: Bilder. Tatsächlich wurde die Technik speziell für sie entwickelt und wirkt Wunder. Durch die Verbesserung der Ladezeit Ihrer Website wird nicht nur das Nutzererlebnis verbessert, sondern auch die Suchmaschinenoptimierung Ihrer Website.

Schließlich ist die Geschwindigkeit ein bestätigter Faktor, den Google und andere Suchmaschinen für die Platzierung verwenden.

Während Bilder nach wie vor sehr beliebt sind, haben sich Videoinhalte zu den begehrtesten Inhalten im Internet entwickelt. Und Sie können jetzt sogar Videos mit Verzögerung laden. Dieses Plugin ersetzt nämlich die YouTube-iframes durch die Vorschau-Thumbnails.

Nicht jeder Besucher wird auf ein Video klicken, also gibt es keinen Grund, dass es Ihre Seite verlangsamt.

Hinweis: Dies sollte sich nicht auf Videos auswirken, die so eingestellt sind, dass sie automatisch abgespielt werden, wenn eine Seite geladen wird.

So fügen Sie Lazy Load zu WordPress hinzu

Schritt 1: Installieren Sie Lazy Load

Das Lazy-Load-Plugin von WP Rocket ist recht einfach einzurichten und hat über 100.000 aktive Installationen. Dieses Plugin ermöglicht es Ihnen, Lazy Load sowohl für Bilder als auch für Videos zu verwenden. Sie können auch das faule Laden für bestimmte Inhalte deaktivieren. Dies ist ideal für Inhalte, die Sie Ihren Besuchern zeigen möchten.

Klicken Sie zunächst auf Plugins und wählen Sie die Option Neu hinzufügen in der linken Administrationsleiste.

Suchen Sie in dem verfügbaren Suchfeld nach Lazy Load. Dadurch werden weitere Plugins angezeigt, die Sie möglicherweise hilfreich finden.

Scrollen Sie nach unten, bis Sie das Lazy-Load-Plugin finden, und klicken Sie auf die Schaltfläche „Jetzt installieren“, um das Plugin für die Verwendung zu aktivieren. Es ist das von WP Rocket erstellte.

Hinweis: Es ist erwähnenswert, dass Sie, wenn Sie derzeit Jetpack verwenden, eine Option zur Aktivierung des Lazy-Load-Moduls darin sehen werden. Dies ist eine weitere großartige Option, die Sie in Betracht ziehen sollten, insbesondere wenn Sie Jetpack bereits installiert haben.

Schritt 2: Aktivieren Sie Lazy Load

Ich habe gesagt, dass dieses Plugin einfach zu bedienen ist, und ich habe nicht gelogen. In Wirklichkeit besteht es aus drei Kontrollkästchen, mit denen Sie die Funktion für verschiedene Arten von Inhalten ein- und ausschalten können.

Klicken Sie auf der linken Verwaltungsseite auf Einstellungen und wählen Sie die Option LazyLoad.

Es gibt drei Kontrollkästchen, mit denen Sie das langsame Laden von Bildern, iframes und Videos sowie die Möglichkeit, YouTube-Videos durch ein Miniaturbild zu ersetzen, aktivieren können.

Wenn Sie das Kontrollkästchen für Bilder oder Iframes aktivieren, wird die Anzahl der HTTP-Anfragen, die eine Seite beim Laden ausführt, reduziert. Dadurch wird sie viel schneller geladen.

Die Option „Lazy Load Thumbnail Replacement“ tut genau das, wonach sie klingt. Dies kann sich auf Seiten mit Videoinhalten enorm auswirken. Dies ist besonders wichtig für mobile Benutzer. Smartphones haben einen langen Weg hinter sich, sind aber im Vergleich zum Desktop immer noch blass.

Daher kann das Laden mehrerer Videos auf einer Seite für mobile Nutzer, insbesondere auf älterer Hardware, einige Sekunden dauern. Denken Sie daran, dass diese Option nicht gut ist, wenn das Video das Hauptmerkmal der Seite ist.

Kreuzen Sie die Kästchen an, wie Sie es für richtig halten.

Sie werden auch eine Anzeige für die Premium-Version dieses Plugins, WP Rocket, sehen. Dieses Premium-Plugin konzentriert sich auf die Maximierung der Geschwindigkeit Ihrer Website und geht weit über das Hinzufügen von „Lazy Load“ für Bilder und Videos hinaus. Es ist eine gute Wahl für jeden Entwickler, der seine Website beschleunigen möchte.

Klicken Sie auf die Schaltfläche „Änderungen speichern“.

Sie können dann feststellen, wie viel schneller Ihre Seiten geladen werden. Stellen Sie sicher, dass Sie es sowohl mit Bild- als auch mit Videoinhalten testen, um die Ergebnisse zu sehen.

Schritt 3: Deaktivieren Sie Lazy Load

Bei den im vorherigen Schritt verfügbaren Optionen handelt es sich um globale Optionen, d. h. sie wirken sich auf den gesamten Inhalt Ihrer Website aus. In Wirklichkeit möchten Sie vielleicht nur ein paar Seiten von der Implementierung dieser Funktion ausschließen.

Und in manchen Fällen möchten Sie vielleicht nur einzelne Bilder ausschließen. Das Plugin verfügt jedoch nicht über diese Funktion, zumindest nicht von Haus aus. Stattdessen bietet die Plugin-Seite den Code, der notwendig ist, um diese Ergebnisse zu erzielen.

Hinweis: Da Sie den Code Ihrer Website bearbeiten müssen, empfehle ich Ihnen dringend, ein Backup Ihrer Website zu erstellen. So stellen Sie sicher, dass Sie Ihre Website wiederherstellen können, falls etwas schief geht, und vermeiden Ausfallzeiten. Abgesehen davon ist nichts sehr schwer.

Um Lazy Load auf bestimmten Seiten zu deaktivieren, fügen Sie den folgenden Code in Ihre Funktionsdatei ein:

[ht_message mstyle=“info“ title=““ show_icon=““ id=““ class=““ style=““ ]

add_action( ‚wp‘, ‚deactivate_rocket_lazyload_on_single‘ );

function deactivate_rocket_lazyload_on_single() {

if ( is_single() ) {

add_filter( ‚do_rocket_lazyload‘, ‚__return_false‘ );

}

}

[/ht_message]

Wenn Sie daran interessiert sind, das Plugin für bestimmte Bilder zu deaktivieren, können Sie die folgende Eigenschaft zu Ihrem img oder iframe Tag hinzufügen:

[ht_message mstyle=“info“ title=““ show_icon=““ id=““ class=““ style=““ ]data-no-lazy=“1″[/ht_message]

Die einzige andere Möglichkeit, diese Funktion zu deaktivieren, besteht darin, das Kontrollkästchen zu deaktivieren. Wir hoffen, dass in Zukunft mehr Optionen zur Deaktivierung hinzugefügt werden, um Anfängern zu helfen.

Herzlichen Glückwunsch zum Einrichten des Lazy Load Plugins in WordPress.

Optimieren Sie Ihre Bilder und Videos

Die Verwendung von Lazy Load ist eine großartige Möglichkeit, die Leistung Ihrer Website zu verbessern, aber sie ist kein Ersatz für die Optimierung Ihrer Bilder. Auch wenn Sie das Plugin verwenden, wird die Optimierung Ihrer Bilder die Leistung der Seite und die Benutzerfreundlichkeit verbessern.

Schließlich müssen diese Bilder irgendwann einmal geladen werden.

Das wirkt sich nicht nur auf die Leistung Ihrer Website aus, sondern spart auch Serverplatz. Ein typisches Bild sollte insgesamt nur wenige KB groß sein. Nur sehr große Bilder sollten diese Menge überschreiten. Für Websites mit Tausenden von Bildern ist dies unerlässlich.

In manchen Fällen zahlen Website-Besitzer Hunderte von Dollar für zusätzlichen Serverplatz, weil sie die Bilder nicht optimieren.

Diese Tipps gelten auch für Videos, möglicherweise sogar in noch stärkerem Maße. Videos sind riesige Dateien, vor allem, wenn Sie sich dafür entscheiden, das Video auf Ihrer eigenen Website zu hosten. Laden Sie es stattdessen immer auf YouTube hoch und betten Sie es auf Ihrer Website ein, um die besten Ladezeiten zu erzielen.

Machen Sie Ihre Website schnell

Es besteht kein Zweifel daran, dass schnelle Websites sowohl der Benutzerfreundlichkeit als auch Ihrem Ranking zugute kommen. Es gibt keinen Grund, sich mit weniger als einer schnellen und schlanken Website zufrieden zu geben. Allerdings können Bilder und Videoinhalte die Ladezeiten von Beiträgen und Seiten erheblich verlangsamen, aber das lässt sich abmildern.

Sie sind jedoch bei weitem nicht die einzigen Faktoren, die die Geschwindigkeit einer Website beeinträchtigen können. Wussten Sie zum Beispiel, dass Plugins Ihre Website verlangsamen? Aus diesem Grund versuchen viele Entwickler, das Hinzufügen neuer Plugins nach Möglichkeit zu vermeiden.

Dieses Tutorial kann also nur der erste Schritt sein, um die schnellsten Ergebnisse zu erzielen.

Haben Sie das Lazy-Load-Plugin auf einigen Seiten deaktiviert? Wie viel schneller laden Ihre Seiten?