Wie man Bilder in WordPress einfach lazy loaded (2 Wege)

Das Lazy Loading von Bildern in WordPress zu implementieren ist ein kleiner Schritt, der eine große Wirkung für Ihre Website haben kann. Es ist heute eine Schlüsselpraxis für jede leistungsstarke Website.

Diese einzelne Technik hilft direkt bei zwei Dingen, die jeder Website-Besitzer möchte. Eine bessere Erfahrung für Besucher und eine schöne Steigerung der Suchmaschinenrankings.

Für Ihre Besucher bedeutet dies, dass Ihre Seiten außergewöhnlich schnell und reaktionsschnell sind. Sie sehen Ihre Inhalte fast sofort, was sie engagiert hält.

Suchmaschinen wie Google bemerken auch diese Geschwindigkeit. Sie neigen dazu, schnellere Websites zu bevorzugen, was dazu beitragen kann, dass Ihre Inhalte von mehr Menschen entdeckt werden.

Wir möchten Ihnen helfen, diese Vorteile sofort zu nutzen. Hier sind zwei einfache Methoden, um Lazy Loading noch heute auf Ihrer Website zu aktivieren.

Warum Bilder in WordPress lazy loaded?

Das Lazy Loading von WordPress-Bildern kann Ihre Website beschleunigen und eine bessere Benutzererfahrung bieten.

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

Suchmaschinen wie Google mögen auch keine langsam ladenden Websites. Deshalb ranken schnellere Websites in den Suchergebnissen höher.

Bilder benötigen auf Ihrer WordPress-Website die meiste Ladezeit im Vergleich zu anderen Web-Elementen. Wenn Sie viele Bilder zu Ihren Artikeln hinzufügen, erhöht jedes Bild Ihre Seitenladezeit.

Eine Möglichkeit, diese Situation zu bewältigen, ist die Verwendung eines CDN-Dienstes wie BunnyCDN oder einer einfacheren Option wie Envira CDN, das speziell für Bilder entwickelt wurde. Ein CDN ermöglicht es Benutzern, Bilder von einem Webserver herunterzuladen, der ihnen am nächsten ist, und reduziert die Ladezeiten der Website.

Ihre Bilder werden jedoch weiterhin geladen und beeinträchtigen die gesamte Ladezeit der Seite. 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 Lazy Loading von Bildern?

Anstatt alle Ihre Bilder auf einmal zu laden, lädt Lazy Loading nur die Bilder herunter, die auf dem Bildschirm des Benutzers sichtbar sind. Alle anderen Bilder werden durch ein Platzhalterbild oder einen leeren Bereich ersetzt.

Wenn ein Benutzer nach unten scrollt, lädt Ihre Website Bilder, die im sichtbaren Bereich des Browsers erscheinen.

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

• Es reduziert die anfängliche Ladezeit der Webseite, sodass Benutzer Ihre Website schneller sehen.
• Dies spart Bandbreite, da nur die angezeigten Bilder geliefert werden, was Ihnen Geld bei den WordPress-Hosting-Kosten sparen kann.

Die Veröffentlichung von WordPress 5.5 fügte Lazy Loading als Standardfunktion hinzu.

Wenn Sie jedoch anpassen möchten, wie Ihre Bilder Lazy Load laden und auch Hintergrundbilder Lazy Load laden, benötigen Sie ein WordPress-Plugin.

Schauen wir uns an, wie man Bilder in WordPress mit zwei verschiedenen Plugins lazy loaded. Sie können die Schnelllinks unten verwenden, um direkt zu der gewünschten Methode zu springen:

1. Bilder in WordPress mit WP Rocket per Lazy Load laden (empfohlen)
2. Bilder in WordPress mit Optimole per Lazy Load laden (kostenlos)
3. Häufig gestellte Fragen zum Lazy Loading von Bildern
4. Bonustipps zur Optimierung Ihrer WordPress-Bilder

Methode 1: Bilder in WordPress mit WP Rocket lazy laden

Wir empfehlen die Verwendung des WP Rocket Plugins, um Bilder in WordPress lazy loaded zu laden. Es ist das beste WordPress Caching-Plugin auf dem Markt, mit dem Sie das Lazy Loading von Bildern einfach aktivieren können.

Abgesehen davon ist es ein sehr leistungsstarkes Plugin, das Ihnen hilft, die Geschwindigkeit Ihrer Seiten zu optimieren, ohne komplexe technische Begriffe kennen oder Experten-Einstellungen konfigurieren zu müssen.

Direkt nach dem Auspacken werden alle ihre standardmäßig empfohlenen Caching-Einstellungen Ihre WordPress-Website erheblich beschleunigen.

Das Erste, was Sie tun müssen, ist das WP Rocket Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Um das Lazy Loading von Bildern 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 den Tab 'Medien' zu klicken. Dann können Sie zum Abschnitt 'LazyLoad' scrollen und die Kontrollkästchen neben 'Für Bilder aktivieren' und 'Für iframes und Videos aktivieren' aktivieren.

Weitere Details finden Sie in unserem Leitfaden zur richtigen Installation und Einrichtung von WP Rocket in WordPress.

Methode 2: Bilder in WordPress mit Optimole lazy loaded

Diese Methode verwendet das kostenlose Optimole Plugin. Es ist eines der besten WordPress-Plugins zur Bildkomprimierung, mit dem Sie das Lazy Loading von Bildern einfach aktivieren können.

Wenn Sie über 5.000 Besucher pro Monat haben, benötigen Sie die Premium-Version von Optimole. Weitere Details finden Sie in unserem vollständigen Optimole-Testbericht.

Zuerst müssen Sie das Optimole-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung sehen Sie einen Bildschirm, auf dem Sie aufgefordert werden, sich für einen API-Schlüssel anzumelden. Sie können diesen Bildschirm auch finden, indem Sie im Admin-Menü zu Optimole navigieren.

Sie müssen sicherstellen, dass die angegebene E-Mail-Adresse korrekt ist, und dann auf die Schaltfläche „Konto erstellen & verbinden“ klicken. Alternativ, wenn Sie bereits ein bestehender Benutzer sind, klicken Sie einfach auf die Schaltfläche „Ich habe bereits einen API-Schlüssel“.

Möglicherweise müssen Sie einige Sekunden warten, während das Plugin eine Verbindung zu Optimole herstellt. Danach beginnt das Plugin automatisch, Ihre Bilder zu optimieren, sodass Ihre Besucher nun die besten Bilder für ihre Geräte sehen.

Während dies geschieht, können Sie auf den Tab „Einstellungen“ klicken, um das Lazyload zu konfigurieren.

Hier müssen Sie sicherstellen, dass die Einstellung 'Bilder skalieren und & Lazy Load' aktiviert ist. Dies generiert Bilder basierend auf der Bildschirmgröße Ihres Besuchers und verbessert die Ladezeiten.

Klicken Sie dann auf die Menüoption „Erweitert“ und wählen Sie „Lazyload“. Auf diesem Bildschirm gibt es einige verschiedene Einstellungen, mit denen Sie anpassen können, wie Ihre Bilder per Lazy Load geladen werden.

Zuerst können Sie die Einstellung 'Erste Anzahl von Bildern vom Lazyload ausschließen' anpassen. Dies verhindert, dass Bilder am Anfang Ihrer Beiträge oder Seiten lazy geladen werden, sodass Bilder oberhalb des sichtbaren Bereichs immer angezeigt werden.

Sie können dies auf 0 setzen, wenn Sie möchten, dass jedes Bild per Lazy Loading geladen wird.

Es gibt einige weitere fortgeschrittene Lazy-Load-Einstellungen in Optimole, die Sie überprüfen können. Diese Einstellungen sind standardmäßig aktiviert.

Die erste ist die Einstellung „Bilder skalieren“. Dies skaliert Bilder auf die Bildschirmgröße des Besuchers und beschleunigt das Laden Ihrer Seite.

Danach sehen Sie die Einstellung „Lazyload für Hintergrundbilder aktivieren“. Dies lädt Ihre Hintergrundbilder verzögert, welche die größten Bilder auf Ihrer Website sein können.

Eine weitere Einstellung ist das Lazy Loading von eingebetteten Videos und Iframes. Wenn Sie viele eingebettete Videoinhalte haben, sollten Sie diese Einstellung beibehalten. Es wird ein Platzhalterbild anstelle des Videos geladen. Wenn auf den Platzhalter geklickt 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, stellen Sie sicher, dass Sie unten auf der Seite auf die Schaltfläche „Änderungen speichern“ klicken.

Häufig gestellte Fragen zum Lazy Loading von Bildern

Wir wissen, dass Sie möglicherweise noch einige Fragen zum Lazy Loading in WordPress haben. Hier sind die Antworten auf einige der häufigsten Fragen, die wir erhalten.

1. Lädt WordPress Bilder automatisch per Lazy Load? (Lazy Loading)

Ja, seit der Veröffentlichung von WordPress 5.5 ist das grundlegende Lazy Loading für Bilder eine Standardfunktion. Diese native Funktion gilt jedoch nicht für Dinge wie Hintergrundbilder oder Videos. Für mehr Kontrolle und um sicherzustellen, dass alle Ihre Medien per Lazy Loading geladen werden, empfehlen wir die Verwendung eines speziellen Plugins wie WP Rocket oder Optimole.

2. Ist Lazy Loading gut für SEO?

Absolut. Lazy Loading verbessert Ihre Seitenladezeit erheblich, was ein Schlüsselfaktor für die Benutzererfahrung ist. Suchmaschinen wie Google bevorzugen schnellere Websites, daher kann die Verbesserung Ihrer Geschwindigkeit durch Lazy Loading Ihrer Website einen schönen Schub in den Suchrankings geben.

3. Was ist das beste Lazy Load Plugin für WordPress?

Für Allround-Leistung und Benutzerfreundlichkeit empfehlen wir WP Rocket. Es ist das beste Performance-Plugin auf dem Markt und enthält eine leistungsstarke und einfache Lazy-Load-Funktion mit nur wenigen Klicks. Wenn Sie nach einer großartigen kostenlosen Alternative suchen, ist Optimole eine ausgezeichnete Wahl, die ebenfalls robuste Lazy-Loading-Optionen bietet.

4. Können Videos in WordPress Lazy Load geladen werden?

Ja, das können und sollten Sie! Dies ist eine fantastische Möglichkeit, die Geschwindigkeit von Seiten zu verbessern, die viele eingebettete Videoinhalte enthalten. Sowohl WP Rocket als auch Optimole ermöglichen es Ihnen, das Lazy Loading für Ihre Videos einfach zu aktivieren, wodurch sie durch ein Platzhalterbild ersetzt werden, bis ein Benutzer auf „Play“ klickt.

5. Sollten Sie Bilder oberhalb der Falz (above the fold) mit Lazy Load laden?

Es ist generell am besten, Bilder ganz oben auf Ihrer Seite (oberhalb des sichtbaren Bereichs) vom Lazy Loading auszuschließen. Dies stellt sicher, dass das Erste, was Ihre Besucher sehen, sofort geladen wird, was einen guten ersten Eindruck hinterlässt. Plugins wie Optimole ermöglichen es Ihnen aus diesem Grund, die ersten paar Bilder einfach vom Lazy-Loading auszuschließen.

Bonustipps zur Optimierung Ihrer WordPress-Bilder

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

Wir empfehlen beispielsweise, Ihre Bilder zu komprimieren, bevor Sie sie auf Ihre Website hochladen, indem Sie ein Tool wie TinyPNG oder JPEGmini verwenden. Alternativ können Sie 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 für einfache oder transparente Bilder und GIFs nur für animierte Bilder.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bilder in WordPress Lazy Load laden. Möglicherweise möchten Sie auch unser Tutorial zu wie Sie Bilder einfach für das Web optimieren, ohne Qualitätsverlust und unsere Expertenauswahl der besten Dateiupload-Plugins für WordPress sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.