Lazy Loading in WordPress richtig aktivieren und testen

Nutzen Sie die native Lazy-Loading-Funktion von WordPress. Seit Version 5.5 reicht das für die meisten Websites völlig aus. Betreffen die verzögert geladenen Bilder Ihr Hero-Bild oder andere LCP-relevante Elemente, setzen Sie gezielt Ausnahmen per Filter. Ein zusätzliches Plugin lohnt sich erst, wenn Ihre Seite komplexe Slider, Hintergrundbilder oder nachgeladene Inhalte per JavaScript einsetzt.

Kurz gesagt:

• WordPress setzt seit Version 5.5 automatisch loading="lazy" bei Bildern mit definierter Breite und Höhe, was für die meisten Seiten ausreichend ist.
• Das gleichzeitige Verwenden von loading="lazy" und fetchpriority="high" bei einem Bild ist ein Fehler, weil beide widersprüchliche Anweisungen sind.
• Für Hero-Bilder oder das initial sichtbare Content sollte loading auf eager stehen, um die Ladezeit und das LCP zu verbessern.
• Detaillierte Steuerung des Lazy-Loading-Verhaltens funktioniert über Filter wie wp_lazy_loading_enabled oder wp_get_loading_optimization_attributes.
• Ein zusätzliches Lazy-Load-Plugin ist nur bei komplexen Elementen wie Hintergrundbildern, Slider oder AJAX-Inhalten sinnvoll und sollte sinnvoll konfiguriert werden, um Konflikte zu vermeiden.

Inhaltsverzeichnis

• Was ist Lazy Loading und wie funktioniert das loading-Attribut?
• Was macht WordPress-Core seit Version 5.5 automatisch?
• Wie aktivieren Sie Lazy Loading mit und ohne Plugin?
• Wie erkennen Sie Regressionen bei LCP und CLS?
• Welche Probleme entstehen durch Slider, Hintergrundbilder und dynamische Inhalte?
• Welches Lazy-Load-Plugin passt zu Ihrer WordPress-Seite?
• Wie löst eine Agentur Lazy-Loading-Probleme in der Praxis?
• So unterstützt Werbeeinfach Sie bei der Umsetzung
• Quellen
• FAQ

Was ist Lazy Loading und wie funktioniert das loading-Attribut?

Lazy Loading verzögert das Laden von Bildern und iframes, die noch außerhalb des sichtbaren Bereichs liegen. Der Browser lädt diese Elemente erst, wenn der Nutzer nahe genug scrollt. Technisch steckt dahinter das HTML-Attribut loading, das zwei Werte kennen kann: lazy und eager.

Bei loading="lazy" schiebt der Browser das Nachladen auf, bis das Element in die Nähe des Viewports rückt. Bei loading="eager" lädt er sofort, ganz ohne Verzögerung. Für Bilder, die beim ersten Blick auf die Seite sichtbar sind, ist eager die richtige Wahl. Alles, was weiter unten auf der Seite liegt, darf ruhig warten.

Ein zweites Attribut kommt oft ins Spiel: fetchpriority. Es teilt dem Browser mit, wie dringend eine Ressource gebraucht wird. Für das größte, zuerst sichtbare Bild einer Seite, das sogenannte LCP-Element, setzt WordPress automatisch fetchpriority="high". Genau hier entsteht ein häufiger Fehler: Ein Bild darf niemals gleichzeitig loading="lazy" und fetchpriority="high" tragen, weil sich beide Anweisungen widersprechen und der Browser in der Konsole eine Warnung ausgibt.

Moderne Browser unterstützen das native loading-Attribut breit, Chrome, Firefox und Edge sind seit Jahren dabei. Für die Core Web Vitals zählt vor allem eines: weniger Daten beim ersten Rendern bedeutet einen schnelleren Largest Contentful Paint, kurz LCP.

Kurz zusammengefasst wirkt sich Lazy Loading auf drei Kennzahlen aus:

• Schnellerer initialer Seitenaufbau, weil der Browser weniger Bilder gleichzeitig anfordert
• Geringerer Datenverbrauch für Besucher, die nicht bis zum Seitenende scrollen
• Bessere PageSpeed-Werte, sofern die Hero-Bilder korrekt ausgenommen bleiben

Was macht WordPress-Core seit Version 5.5 automatisch?

WordPress hat Lazy Loading nicht als Zusatzfunktion, sondern als Kernbestandteil eingebaut. Seit Version 5.5 fügt WordPress Bildern mit gesetzter Breite und Höhe automatisch loading="lazy" hinzu, Version 5.7 erweiterte das auf iframes.

Die Entwicklung ging danach weiter, mit spürbaren Feinjustierungen:

• Version 5.5: automatisches loading="lazy" für img-Tags mit width und height
• Version 5.7: gleiches Verhalten für eingebettete iframe-Elemente
• Version 5.9: ein Schwellenwert, der die ersten Content-Bilder vom Lazy Loading ausnimmt
• Version 6.3: die Funktion wp_get_loading_optimization_attributes, die loading, fetchpriority und decoding zentral zusammen berechnet

Wichtig für die Praxis: Analysen zeigten, dass das Auslassen des ersten Content-Bildes den median LCP messbar verbessern kann, ohne dass dabei nennenswert mehr Daten geladen werden. WordPress setzte deshalb einen Schwellenwert, der die ersten Bilder eines Beitrags standardmäßig eager lädt statt lazy.

Für Entwickler stehen mehrere Filter zur Verfügung, mit denen sich das Verhalten präzise steuern lässt:

• wp_lazy_loading_enabled schaltet Lazy Loading global oder für bestimmte Kontexte ab, wie die offizielle Funktionsreferenz beschreibt
• wp_img_tag_add_loading_attr greift direkt am generierten img-Tag und erlaubt individuelle Anpassungen
• wp_omit_loading_attr_threshold bestimmt, wie viele der ersten Bilder von der Lazy-Loading-Regel ausgenommen werden
• wp_get_loading_optimization_attributes liefert seit WordPress 6.3 alle relevanten Lade-Attribute gebündelt und verhindert automatisch widersprüchliche Kombinationen

Warum lädt WordPress manche Bilder gar nicht lazy, obwohl sie unterhalb des sichtbaren Bereichs liegen könnten? Weil die ersten Content-Bilder oft zugleich das LCP-Element sind. Sie sofort zu laden, verbessert die gefühlte Ladezeit stärker, als jede Zeile Zusatzcode das könnte.

Wie aktivieren Sie Lazy Loading mit und ohne Plugin?

Die Reihenfolge entscheidet, ob Ihre Seite am Ende schneller wird oder durch doppelte Mechanismen sogar langsamer. So gehen Sie vor:

1. Prüfen Sie zuerst den aktuellen Zustand. Öffnen Sie den Seitenquelltext und suchen Sie nach loading="lazy" in Ihren Bild-Tags. In den meisten Fällen setzt WordPress das bereits automatisch, ganz ohne zusätzlichen Code.
2. Setzen Sie gezielte Ausnahmen per Filter, wenn nötig. Möchten Sie Lazy Loading für ein bestimmtes Widget komplett deaktivieren, nutzen Sie:

   add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
       if ( $context === 'widget_text_content' ) {
           return false;
       }
       return $default;
   }, 10, 3 );
   

3. Kontrollieren Sie einzelne Bilder direkt beim Ausgeben. Über wp_get_attachment_image() lässt sich das loading-Attribut pro Bild überschreiben, etwa mit array( 'loading' => 'eager' ) als Attribut-Parameter für Ihr Hero-Bild.
4. Installieren Sie nur bei Bedarf ein Plugin. Ein Lazy-Load-Plugin für WordPress lohnt sich vor allem, wenn Ihre Seite Hintergrundbilder per CSS, komplexe Slider oder nachgeladene AJAX-Inhalte enthält, die Core nicht abdeckt.
5. Vermeiden Sie doppeltes Lazy Loading. Aktivieren Sie im Plugin die Option, Core-eigene Bilder zu ignorieren, oder deaktivieren Sie Core-Lazy-Loading komplett über wp_lazy_loading_enabled, bevor das Plugin übernimmt. Zwei Mechanismen gleichzeitig führen zu Konflikten und manchmal zu doppelt angeforderten Bildern.
6. Leeren Sie danach jeden Cache. Browser-Cache, Plugin-Cache und, falls vorhanden, den CDN-Cache. Ohne diesen Schritt sehen Sie oft noch die alte Version.
7. Testen Sie mit den DevTools. Öffnen Sie den Network-Tab in Chrome, laden Sie die Seite neu und beobachten Sie, welche Bilder sofort und welche erst beim Scrollen nachgeladen werden.
8. Messen Sie mit Lighthouse oder WebPageTest. Beide Tools zeigen, ob sich LCP und Gesamtladezeit durch Ihre Änderung verbessert oder verschlechtert haben.

Profi-Tipp: Testen Sie jede Änderung zuerst auf einer Staging-Umgebung. Ein einziges falsch ausgenommenes Hero-Bild kann den LCP-Wert einer ganzen Seite unbrauchbar machen, und das merken Sie oft erst, wenn die Google Search Console eine Woche später Alarm schlägt.

Ein Lazy-Load-Plugin für WordPress bringt dabei häufig zusätzliche Optionen mit, etwa das gezielte Ausschließen bestimmter Bildklassen oder eine bessere Unterstützung für Hintergrundbilder in WooCommerce-Produktgalerien.

Wie erkennen Sie Regressionen bei LCP und CLS?

Nach jeder Anpassung braucht es eine feste Prüfroutine, sonst schleichen sich Fehler unbemerkt ein. Testen Sie mindestens drei Seitentypen: die Startseite, einen längeren Artikel und, bei einem Shop, eine Produktseite. Jede davon einmal mobil und einmal am Desktop, denn die Ergebnisse unterscheiden sich oft deutlich.

Drei Werkzeuge gehören in jede Testroutine:

• Chrome DevTools, insbesondere der Network-Tab, um zu sehen, wann welches Bild angefragt wird
• Lighthouse, direkt in Chrome integriert, für einen schnellen Blick auf LCP, CLS und weitere Core Web Vitals
• WebPageTest, für einen detaillierteren Wasserfall-Bericht und echte Mess-Standorte weltweit

Ergänzend lohnt sich ein Blick auf echte Nutzerdaten, etwa über die Google Search Console oder ein Real-User-Monitoring-Tool. Synthetische Tests zeigen nur eine Momentaufnahme, echte Besucher liefern die Realität.

Drei Fehlersignale tauchen in der Praxis immer wieder auf:

• Das Hero-Bild lädt sichtbar verspätet, weil es fälschlich loading="lazy" trägt statt eager oder fetchpriority="high"
• Ein Bild wird doppelt heruntergeladen, weil sowohl Core als auch ein Plugin gleichzeitig aktiv sind
• Bilder besitzen kein srcset, wodurch der Browser unnötig große Dateien für mobile Geräte lädt

Wenn WordPress das erste Content-Bild eigentlich vom Lazy Loading ausnehmen sollte und trotzdem verzögert lädt, deutet das auf einen Konflikt mit einem Theme oder Plugin hin, das die Core-Logik überschreibt. Ein kurzer Blick in die aktiven Filter hilft dabei meist schneller als stundenlanges Debuggen im Frontend.

Welche Probleme entstehen durch Slider, Hintergrundbilder und dynamische Inhalte?

Der häufigste Fehler bei Lazy Loading heißt Layout-Verschiebung, auf Englisch Cumulative Layout Shift oder kurz CLS. Fehlt einem Bild die feste Breite und Höhe, springt der Inhalt sichtbar, sobald das Bild nachlädt. Die Lösung ist simpel: Setzen Sie width und height als Attribute oder definieren Sie in Ihrem CSS ein aspect-ratio für den Bildcontainer.

Slider und Karussells bringen ein eigenes Problem mit. Lädt das erste, sichtbare Slide lazy, sieht der Besucher beim Seitenaufruf zunächst eine leere Fläche. Setzen Sie deshalb für das erste Slide immer loading="eager", alle folgenden dürfen ruhig verzögert laden.

Hintergrundbilder, die per CSS mit background-image eingebunden sind, greift das native loading-Attribut gar nicht, weil es nur für img– und iframe-Tags gilt. Solche Bilder brauchen eine eigene Lösung, etwa über JavaScript-basiertes Lazy Loading oder ein Plugin mit expliziter Background-Unterstützung.

Dynamisch nachgeladene Inhalte, etwa per AJAX eingefügte Produktkarten in einem WooCommerce-Shop, stellen eine dritte Falle dar. Prüfen Sie, ob das nachgeladene JavaScript tatsächlich vollständige img-Tags mit korrektem loading-Attribut erzeugt. Fehlt das, tauchen diese Bilder in keiner Lazy-Loading-Logik auf, weder in der von Core noch in der eines Plugins.

Profi-Tipp: Öffnen Sie bei Verdacht auf CLS-Probleme die Chrome DevTools und aktivieren Sie unter „Rendering“ die Option „Layout Shift Regions“. Betroffene Bereiche blitzen dann bei jedem Sprung blau auf, das macht die Fehlersuche erheblich schneller als das bloße Beobachten der Seite.

Welches Lazy-Load-Plugin passt zu Ihrer WordPress-Seite?

Bevor Sie überhaupt ein Plugin installieren, prüfen Sie erst das gerenderte Markup Ihrer Seite: WordPress deckt die Grundlagen in den meisten Fällen bereits ab. Ein zusätzliches Plugin lohnt sich vor allem, wenn Ihre Anforderungen über einfache Content-Bilder hinausgehen.

Vier Kriterien entscheiden, ob ein Lazy-Load-Plugin für WordPress wirklich einen Mehrwert bringt:

• Unterstützung für iframes und Hintergrundbilder, nicht nur für klassische img-Tags
• Exklusiv-Listen, mit denen Sie bestimmte Bilder oder Bereiche von der Lazy-Loading-Logik ausschließen können
• Erhalt von srcset und sizes, damit responsive Bilder weiterhin die passende Auflösung pro Gerät ausliefern
• CDN-Kompatibilität, falls Ihre Bilder über ein Content Delivery Network ausgeliefert werden

Automatische Lösungen bergen ein Risiko, das oft unterschätzt wird: Sobald ein Plugin ungefragt jedes Bild mit einer eigenen JavaScript-Lazy-Loading-Lösung überschreibt, kollidiert es mit dem, was WordPress-Core längst nativ übernimmt. Das Ergebnis sind doppelte Ladevorgänge oder Bilder, die gar nicht mehr erscheinen. Prüfen Sie deshalb immer, ob sich das Plugin so konfigurieren lässt, dass es die Core-Logik respektiert statt sie zu duplizieren.

Vor jeder Installation gehört eine kurze Checkliste dazu:

• Vollständiges Backup der Website und der Datenbank anlegen
• Änderung zuerst auf einer Staging-Umgebung testen, nie direkt live
• LCP und CLS vor und nach der Installation mit Lighthouse vergleichen

Wer sich unsicher ist, welche Einstellungen zur eigenen Theme-Struktur passen, findet in unserem Beitrag zu technischer Optimierung eine breitere Einordnung, wie Lazy Loading in die gesamte Performance-Strategie einer Website passt.

Wie löst eine Agentur Lazy-Loading-Probleme in der Praxis?

Eine erfahrene WordPress-Agentur arbeitet seit über 14 Jahren an WordPress- und WooCommerce-Projekten, mit einem klaren Fokus auf Performance. Lazy Loading ist dabei selten das einzige Rädchen, das wir anfassen.

Ein Fallbeispiel aus unserer Praxis: Ein WooCommerce-Shop mit über 400 Produkten litt unter einem LCP-Wert von über vier Sekunden auf Mobilgeräten. Die Ursache lag nicht nur an fehlenden Bild-Ausnahmen, sondern auch an einer langsamen Server-Antwortzeit. Nach der Einführung von Redis als Objekt-Cache sank die Time to First Byte deutlich, kombiniert mit gezielten fetchpriority-Anpassungen für das Hero-Bild der Kategorieseiten sank auch der LCP-Wert spürbar unter die kritische Zwei-Sekunden-Marke.

Ein Wartungsvertrag lohnt sich immer dann, wenn solche Anpassungen nicht einmalig, sondern kontinuierlich überwacht werden müssen, etwa nach jedem Theme-Update oder jeder neuen Produktkategorie. Ein einzelnes Performance-Audit reicht dagegen, wenn Sie punktuell wissen wollen, wo genau Ihre Seite bei LCP und CLS aktuell steht, bevor Sie selbst Hand anlegen.

So unterstützt Werbeeinfach Sie bei der Umsetzung

Eine spezialisierte Agentur kann eine Alternative zur aufwendigen Eigenrecherche sein, wenn Sie Lazy Loading und die gesamte PageSpeed-Optimierung nicht selbst durchprobieren möchten: Sie kennen die Core-Filter, die Plugin-Fallstricke und die typischen WooCommerce-Sonderfälle bereits aus zahlreichen Projekten.

Das Leistungsspektrum umfasst unter anderem eine gründliche PageSpeed-Analyse, die gezielte Behebung von LCP- und CLS-Problemen, saubere Theme-Anpassungen und, falls nötig, eine individuelle Pluginintegration, die Core-Verhalten respektiert statt es zu duplizieren. Wenn Ihre Seite komplexere Anforderungen hat, etwa einen WooCommerce-Shop mit vielen Produktbildern oder ein individuell entwickeltes Theme, lohnt sich oft ein Blick auf unsere WordPress Wartung, die genau solche Performance-Themen fortlaufend im Blick behält.

Läuft Ihre Website bereits, funktioniert nach einer Lazy-Loading-Anpassung aber nicht mehr richtig, hilft unsere WordPress Problemlösung schnell und unkompliziert weiter. Planen Sie dagegen einen kompletten Relaunch oder brauchen ein neues Theme mit durchdachter Bildstrategie von Anfang an, schauen Sie sich unsere WordPress Websites an. Schreiben Sie uns einfach über unser Kontaktformular, und wir schauen uns Ihre aktuelle PageSpeed-Situation gemeinsam an.

Quellen

Für alle, die tiefer in die Materie einsteigen möchten, lohnt sich der direkte Blick in die offiziellen WordPress-Core-Artikel. Sie dokumentieren jede Änderung am Lazy-Loading-Verhalten seit Version 5.5 nachvollziehbar und mit technischem Detail, etwa den ursprünglichen Artikel zu Lazy Loading in Version 5.5 und die spätere Verfeinerung in der Developer-Referenz zu wp_get_loading_optimization_attributes.

Für regelmäßige Messungen empfehlen sich Lighthouse, direkt in den Chrome DevTools verfügbar, sowie WebPageTest für detailliertere Wasserfall-Diagramme. Wer zusätzlich an der SEO-Seite seiner Performance arbeiten möchte, findet bei regionalen Partnern wie den SEO-Agenturen in Ulm weitere Ansätze, wie sich technische Optimierung und Sichtbarkeit sinnvoll verbinden lassen.

• Lazy-loading Images in 5.5
• Enhanced lazy-loading performance in 5.9
• Image performance enhancements in WordPress 6.3
• wp_lazy_loading_enabled()

FAQ

Wie aktiviert man Lazy Loading in WordPress?

WordPress aktiviert Lazy Loading seit Version 5.5 automatisch für Bilder mit gesetzter Breite und Höhe, ganz ohne Zusatzaufwand. Für iframes gilt das seit Version 5.7 ebenfalls. Ein Lazy-Load-Plugin brauchen Sie nur bei Hintergrundbildern, Slidern oder dynamisch nachgeladenen Inhalten.

Warum lädt meine WordPress-Seite so langsam?

Häufige Ursachen sind zu große Bilddateien, fehlendes Caching, eine langsame Server-Antwortzeit oder Konflikte zwischen mehreren Performance-Plugins. Lazy Loading allein löst selten alle Probleme, es ist ein Baustein unter mehreren. Ein gezieltes Performance-Audit zeigt meist schnell, wo der eigentliche Engpass liegt.

Ist Lazy Loading schlecht für SEO?

Nein, richtig umgesetzt schadet Lazy Loading der Suchmaschinenoptimierung nicht, im Gegenteil: Es verbessert häufig die Ladezeit und damit indirekt das Ranking. Problematisch wird es nur, wenn das Hero-Bild fälschlich verzögert lädt und dadurch den LCP-Wert verschlechtert.

Wie deaktiviert man Lazy Loading in WordPress?

Über den Filter wp_lazy_loading_enabled lässt sich Lazy Loading global oder für bestimmte Kontexte deaktivieren. Für einzelne Bilder reicht es, das loading-Attribut manuell auf eager zu setzen, etwa direkt bei wp_get_attachment_image().

Braucht jede Website ein zusätzliches Lazy-Load-Plugin?

Nein, in den meisten Fällen genügt die native WordPress-Funktion völlig. Ein Plugin lohnt sich nur bei speziellen Anforderungen wie CSS-Hintergrundbildern oder komplexen Sliderlösungen, die Core nicht abdeckt.

Empfehlungen

• Website-Ladezeit optimieren: Workflow für WordPress & WooCommerce
• Unter 300 ms: TTFB in WordPress mit drei Hebeln sofort senken
• Bis zu 60 % schneller: Redis Objektcache für WordPress-Entwickler
• Core Web Vitals unter WordPress: So messen und verbessern Sie sie