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

Niemand mag eine langsame Website. Wenn Ihre Seiten zu lange zum Laden brauchen, werden Besucher abspringen, bevor sie überhaupt Ihre Inhalte sehen.

Bilder sind oft die Hauptursache für langsame Ladezeiten. Sie beanspruchen die meiste Bandbreite, was Ihre Leistung und Ihr Suchranking beeinträchtigt.

Wir haben Hunderte von Websites auf Geschwindigkeit optimiert, und Lazy Loading ist einer der effektivsten schnellen Erfolge, die wir empfehlen. Es verhindert, dass Bilder geladen werden, bis der Benutzer tatsächlich nach unten scrollt, um sie zu sehen.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Bilder in WordPress einfach per Lazy Loading laden können, um die Geschwindigkeit Ihrer Website sofort zu erhöhen.

Warum Bilder in WordPress lazy loaded?

Lazy Loading von WordPress-Bildern kann Ihre Website beschleunigen und ein besseres Benutzererlebnis 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. 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 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.
• Es spart Bandbreite, indem nur die angezeigten Bilder geliefert werden, was Ihnen Geld bei den WordPress-Hostingkosten sparen kann.

Was ist natives Lazy Loading in WordPress?

Seit WordPress 5.5 enthält die Plattform standardmäßig „natives Lazy Loading“. Das bedeutet, dass WordPress automatisch das HTML-Attribut loading="lazy" zu Ihren img-Tags hinzufügt.

Dies weist moderne Browser (wie Chrome, Firefox und Safari) an, das Laden des Bildes zu verzögern, bis der Benutzer in dessen Nähe scrollt.

Wenn WordPress dies automatisch tut, warum brauche ich dann ein Plugin?

Obwohl natives Lazy Loading ein guter Anfang ist, ist es nicht perfekt. Es hängt vollständig vom Browser des Besuchers ab, um zu entscheiden, wann ein Bild geladen werden soll. Dedizierte Plugins wie WP Rocket bieten eine bessere Leistung, weil sie:

• Hintergrundbilder per Lazy Load laden (was natives WordPress nicht kann).
• Speziell iFrames und Videos per Lazy Load laden.
• Fortschrittliche Skripte verwenden, die Bilder schneller laden als das Standardverhalten des Browsers.

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:

Methode 1: Bilder in WordPress mit WP Rocket lazy laden

Wir empfehlen die Verwendung des WP Rocket-Plugins, um Bilder in WordPress per Lazy Loading 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.

Sofort nach der Installation beschleunigen alle empfohlenen Standard-Caching-Einstellungen Ihre WordPress-Website erheblich.

Als Erstes müssen Sie das WP Rocket-Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden 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 korrekten Installation und Einrichtung von WP Rocket in WordPress.

Methode 2: Bilder in WordPress mit Optimole lazy loaded

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

Wenn Ihr Traffic die Grenzen des kostenlosen Plans überschreitet, 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 zur Installation 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.

Dadurch werden Bilder am Anfang Ihrer Beiträge oder Seiten nicht per Lazy Loading geladen. Dies stellt sicher, dass Bilder oberhalb des sichtbaren Bereichs sofort geladen werden, was Ihren Largest Contentful Paint (LCP)-Wert für bessere SEO verbessert.

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 per Lazy Loading, welche möglicherweise die größten Bilder auf Ihrer Website sind.

Eine weitere Einstellung ist das Lazy Loading von eingebetteten Videos und iFrames. Wenn Sie viele eingebettete Videoinhalte haben, sollten Sie diese Einstellung aktiviert lassen. 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.

Fehlerbehebung bei gängigen Lazy Load-Problemen

Manchmal kann das Aktivieren von Lazy Load dazu führen, dass Bilder verschwinden oder unscharf aussehen.

Hier sind gängige Lösungen:

1. Bilder werden nicht angezeigt

Dies geschieht oft, wenn Sie zwei Lazy Load-Plugins gleichzeitig aktiv haben (z. B. WP Rocket und das integrierte Lazy Load Ihres Themes). Stellen Sie sicher, dass Sie nur eine Methode verwenden, um Konflikte zu vermeiden.

2. Bilder oberhalb des sichtbaren Bereichs erscheinen spät

Wenn Ihr Logo oder Header-Bild erst nach dem Rest der Seite erscheint, kann dies Ihre Benutzererfahrung beeinträchtigen. Wie in den obigen Methoden erwähnt, sollten Sie die ersten 2-3 Bilder auf Ihrer Seite vom Lazy Loading ausschließen, um dies zu beheben.

3. Layout-Verschiebung (CLS)

Wenn Ihr Inhalt beim Laden eines Bildes „springt“, wirkt sich dies negativ auf Ihren SEO-Score aus. Um dies zu verhindern, stellen Sie sicher, dass alle Ihre Bilder definierte width- und height-Attribute haben. WordPress erledigt dies automatisch, aber einige Themes überschreiben dies möglicherweise.

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 ist jedoch begrenzt und gilt nicht für Hintergrundbilder, Iframes oder Videos. Um sicherzustellen, dass alle Ihre Medien optimiert sind, empfehlen wir die Verwendung eines speziellen Plugins wie WP Rocket oder Optimole.

2. Ist Lazy Loading gut für SEO?

Absolut. Lazy Loading verbessert die Ladegeschwindigkeit Ihrer Seite 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 Ihrem Ranking in den Suchergebnissen einen schönen Schub geben.

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

Für umfassende Leistung und einfache Bedienung 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.

6. Wie deaktiviere ich natives Lazy Loading in WordPress?

Wenn Sie lieber ein bestimmtes Plugin verwenden möchten und sicherstellen möchten, dass das native Lazy Loading von WordPress nicht stört, können Sie es deaktivieren, indem Sie einen einfachen Code-Schnipsel zur functions.php-Datei Ihres Themes hinzufügen oder ein Code-Schnipsel-Plugin wie WPCode verwenden.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

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 zum Beispiel, Ihre Bilder zu komprimieren, bevor Sie sie auf Ihre Website hochladen, mit einem Tool wie TinyPNG oder JPEGmini. Alternativ können Sie ein automatisiertes Bildkomprimierungs-Plugin wie Optimole oder EWWW Image Optimizer verwenden.

Es ist auch wichtig, das richtige Dateiformat zu wählen. Während JPEGs und PNGs üblich sind, empfehlen wir dringend die Verwendung von Formaten der nächsten Generation wie WebP. Diese Dateitypen bieten eine überlegene Komprimierung und Qualität, was dazu beiträgt, dass Ihre Website deutlich schneller geladen wird.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bilder in WordPress mit Lazy Loading laden. Möglicherweise möchten Sie auch unser Tutorial zum Thema 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.