Wie man Bilder in WordPress ganz einfach „Lazy Load“ (2 Wege)

Niemand möchte warten, bis eine Seite langsam geladen ist, z. B. wenn ein Blog-Beitrag viele Bilder enthält. Auch wenn sie atemberaubend aussehen, kann die Wartezeit, bis sie angezeigt werden, für Ihre Besucher frustrierend sein.

Hier kann „Lazy Loading“ helfen. Dabei handelt es sich um einen cleveren Trick, bei dem Bilder nur dann geladen werden, wenn sie benötigt werden. Anstatt jedes Bild auf einer Seite auf einmal zu laden, wartet Ihre Website, bis ein Besucher nach unten scrollt, wo ein Bild erscheinen soll.

Das bedeutet schnellere Ladezeiten der Seiten, zufriedenere Besucher und sogar einen Schub für die Suchmaschinenoptimierung Ihrer Website.

Das Beste daran ist, dass das Hinzufügen von „Lazy Loading“ zu Ihrer WordPress Website einfacher ist, als Sie denken. In diesem Artikel führen wir Sie durch den Prozess, damit Sie eine schnellere, effizientere Website genießen können.

Warum Lazy Load Bilder in WordPress?

Lazy Loading WordPress-Bilder können Ihre Website beschleunigen und dem Benutzer ein besseres Erlebnis bieten.

Niemand mag langsame Websites. Eine Studie zur Website-Performance hat ergeben, dass eine Verzögerung von 1 Sekunde bei der Seitenladezeit zu 7 % weniger Konversionen, 11 % weniger Seitenaufrufen und einem Rückgang der Kundenzufriedenheit um 16 % führt.

Auch Suchmaschinen wie Google mögen keine langsam ladenden Websites. Deshalb werden schnellere Websites in den Suchergebnissen höher eingestuft.

Bilder benötigen im Vergleich zu anderen Webelementen die meiste Zeit, um auf Ihrer WordPress-Website zu laden. Wenn Sie viele Bilder zu Ihren Artikeln hinzufügen, erhöht jedes Bild die Ladezeit Ihrer Seite.

Eine Möglichkeit, mit dieser Situation umzugehen, ist die Nutzung eines CDN-Dienstes wie BunnyCDN. Mit einem CDN können Benutzer Bilder von einem Webserver in ihrer Nähe herunterladen und die Ladegeschwindigkeit der Website verringern.

Ihre Bilder werden jedoch trotzdem geladen und beeinträchtigen die Ladezeit der Seite insgesamt. Um dieses Problem zu umgehen, können Sie das Laden von Bildern verzögern, indem Sie „Lazy Load“ auf Ihrer Website implementieren.

Wie funktioniert das faule Laden von Bildern?

Anstatt alle Bilder auf einmal zu laden, werden beim „Lazy Loading“ nur die Bilder heruntergeladen, die auf dem Bildschirm des Nutzers sichtbar sind. Alle anderen Bilder werden durch ein Platzhalterbild oder Leerraum ersetzt.

Wenn ein Benutzer auf der Seite nach unten scrollt, lädt Ihre Website Bilder, die im Anzeigebereich des Browsers sichtbar sind.

Lazy Loading kann für Ihren WordPress-Blog sehr vorteilhaft sein:

• Es reduziert die anfängliche Ladezeit der Webseite, so dass die Nutzer Ihre Website schneller sehen.
• Es spart Bandbreite, indem es nur Bilder bereitstellt, die auch angesehen werden, wodurch Sie bei den WordPress-Hostingkosten Geld sparen können.

Mit der Veröffentlichung von WordPress 5.5 wurde „Lazy Loading“ als Standardfunktion hinzugefügt.

Wenn Sie jedoch die Art und Weise, wie Ihre Bilder „lazy“ geladen werden, anpassen und auch Hintergrundbilder „lazy“ laden möchten, müssen Sie ein WordPress-Plugin verwenden.

Schauen wir uns an, wie man Bilder in WordPress mit Hilfe von zwei verschiedenen Plugins verzögert laden kann. Sie können die Links unten verwenden, um direkt zu der Methode zu gelangen, die Sie verwenden möchten:

Methode 1: Lazy Load Bilder in WordPress mit WP Rocket

Wir empfehlen die Verwendung des WP Rocket-Plugins für das Lazy Loading von Bildern in WordPress. Es ist das beste WordPress-Caching-Plugin auf dem Markt, mit dem Sie einfach das Lazy Loading von Bildern aktivieren können.

Abgesehen davon ist es ein sehr leistungsfähiges Plugin, das Ihnen hilft, Ihre Seitengeschwindigkeit zu optimieren, ohne komplexe technische Begriffe zu kennen oder Experteneinstellungen zu konfigurieren.

Alle standardmäßig empfohlenen Caching-Einstellungen beschleunigen Ihre WordPress-Website erheblich.

Als Erstes müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Um das „Lazy Loading“ für Bilder zu aktivieren, müssen Sie nur ein paar Kästchen ankreuzen. Sie können sogar das „Lazy Loading“ für Videos aktivieren, was die Geschwindigkeit Ihrer Website noch weiter verbessert.

Alles, was Sie tun müssen, ist, in Ihrem WordPress-Dashboard zu Einstellungen “ WP Rocket zu gehen und auf die Registerkarte „Medien“ zu klicken. Dann können Sie zum Abschnitt „LazyLoad“ scrollen und die Kästchen neben „Für Bilder aktivieren“ und „Für Iframes und Videos aktivieren“ ankreuzen.

Weitere Einzelheiten finden Sie in unserer Anleitung zur korrekten Installation und Einrichtung von WP Rocket in WordPress.

Methode 2: Lazy Load Bilder in WordPress mit Optimole

Diese Methode verwendet das kostenlose Optimole-Plugin. Es ist eines der besten WordPress-Plugins für die Bildkomprimierung, mit dem Sie das „Lazy Loading“ von Bildern leicht aktivieren können.

Wenn Sie mehr als 5.000 Besucher pro Monat haben, benötigen Sie die Premium-Version von Optimole. Weitere Einzelheiten finden Sie in unserem vollständigen Optimole-Test.

Zunächst müssen Sie das Optimole-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung wird ein Bildschirm angezeigt, auf dem Sie aufgefordert werden, sich für einen API-Schlüssel zu registrieren. Sie können diesen Bildschirm auch finden, indem Sie im Verwaltungsmenü zu Optimole navigieren.

Vergewissern Sie sich, dass die angegebene E-Mail-Adresse korrekt ist, und klicken Sie dann auf die Schaltfläche „Create & connect your account“. Wenn Sie bereits ein Nutzer sind, können Sie auch einfach auf die Schaltfläche „Ich habe bereits einen API-Schlüssel“ klicken.

Es kann sein, dass Sie ein paar Sekunden warten müssen, während das Plugin eine Verbindung zu Optimole herstellt. Danach wird das Plugin automatisch damit beginnen, Ihre Bilder zu optimieren, so dass Ihre Besucher nun die besten Bilder für ihre Geräte sehen.

Während dies geschieht, können Sie auf die Registerkarte „Einstellungen“ klicken, um die Ladeverzögerung zu konfigurieren.

Hier müssen Sie sicherstellen, dass die Einstellung „Bilder skalieren und & Lazy load“ aktiviert ist. Dadurch werden Bilder auf der Grundlage der Bildschirmgröße Ihrer Besucher generiert und die Ladegeschwindigkeit verbessert.

Klicken Sie anschließend auf die Menüoption „Erweitert“ und wählen Sie „Lazyload“. Auf diesem Bildschirm gibt es einige verschiedene Einstellungen, mit denen Sie festlegen können, wie Ihre Bilder langsam geladen werden sollen.

Zunächst können Sie die Einstellung „Die erste Anzahl von Bildern vom Lazyload ausschließen“ anpassen. Dadurch werden die Bilder am Anfang Ihrer Beiträge oder Seiten nicht mehr mit Verzögerung geladen, so dass die Bilder oberhalb der Falz immer angezeigt werden.

Sie können diesen Wert auf 0 setzen, wenn Sie möchten, dass jedes Bild mit Verzögerung geladen wird.

In Optimole gibt es noch einige andere erweiterte Einstellungen für das faule Laden, die Sie überprüfen können. Diese Einstellungen sind standardmäßig aktiviert.

Die erste ist die Einstellung „Bilder skalieren“. Damit werden die Bilder auf die Bildschirmgröße des Besuchers skaliert und Ihre Seite wird schneller geladen.

Danach sehen Sie die Einstellung „Lazyload für Hintergrundbilder aktivieren“. Dadurch werden Ihre Hintergrundbilder, die die größten Bilder auf Ihrer Website sein können, mit Verzögerung geladen.

Eine weitere Einstellung ist das träge Laden eingebetteter Videos und Iframes. Wenn Sie viele eingebettete Videos haben, dann sollten Sie diese Einstellung aktiviert lassen. Es wird ein Platzhalterbild anstelle des Videos geladen. Wenn der Platzhalter angeklickt wird, wird das vollständige Video geladen.

Sie können diese Einstellungen weiter anpassen und sehen, was für Ihre Website und Ihre Bilder am besten funktioniert.

Bevor Sie die Plugin-Einstellungen verlassen, klicken Sie bitte auf die Schaltfläche „Änderungen speichern“ am unteren Rand der Seite.

Bonustipps zur Optimierung Ihrer WordPress-Bilder

Obwohl Lazy Loading dazu beiträgt, die Ladegeschwindigkeit der Website zu verbessern, gibt es noch einige andere Möglichkeiten, Ihre WordPress-Bilder für die beste Leistung zu optimieren.

Wir empfehlen zum Beispiel, Ihre Bilder vor dem Hochladen auf Ihre Website mit einem Tool wie TinyPNG oder JPEGmini zu komprimieren. Alternativ können Sie auch ein automatisiertes Bildkomprimierungs-Plugin wie Optimole oder EWWW Image Optimizer verwenden.

Es ist auch wichtig, die richtige WordPress-Bildgröße und das richtige Dateiformat für Ihre Bilder zu wählen. JPEGs eignen sich am besten für Fotos oder Bilder mit vielen Farben, PNGs sind für einfache oder transparente Bilder geeignet und GIFs sind nur für animierte Bilder geeignet.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Bilder in WordPress verzögert lädt. Vielleicht interessiert Sie auch unser Tutorial auf , wie Sie Bilder ohne Qualitätsverlust für das Web optimieren können, und unsere Expertenauswahl der besten Plugins für den Upload von Dateien für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.