Lazy Loading in WordPress: So lädst du Bilder, Videos und mehr verzögert

Nutzt deine WordPress-Website viele Bilder? Das wäre keine Überraschung, denn sie sind das beliebteste Medienformat im Web. Gleichzeitig können Bilder deine Website aber auch erheblich ausbremsen, und deshalb musst du wissen, wie du Lazy Loading in WordPress einsetzt.

Wir haben schon früher über das Optimieren von Bildern gesprochen, damit sie so klein wie möglich werden und schnell laden. Allerdings kannst du die Dateigröße deiner Bilder nur bis zu einem gewissen Punkt verringern, ohne Abstriche bei der Qualität zu machen. Außerdem summiert sich ihre Größe, wenn du viele Bilder auf derselben Seite hast, selbst wenn sie optimiert wurden.

Adame Dahmani, Product Manager bei WP Rocket, erklärt:

Lazy Loading schiebt das Laden nicht sichtbarer Bilder, Videos und iframes auf, bis sie gebraucht werden, und reduziert so unnötige Anfragen. Das entlastet Bandbreite und Verarbeitung und hilft dem Browser, den Hauptthread und den kritischen Rendering-Pfad effizienter zu verwalten. Richtig umgesetzt verbessert es den First Contentful Paint und oft auch den Largest Contentful Paint, weil Inhalte above the fold Vorrang bekommen.

Grund genug, eine ausführliche Anleitung zu Lazy Loading in WordPress zusammenzustellen, findest du nicht? Deshalb erfährst du im folgenden Artikel, wie es funktioniert und wie du Lazy Loading auf deiner Website anwenden kannst, um die besten Ergebnisse zu erzielen.

Was ist Lazy Loading?

Wenn du eine Webseite öffnest, lädt dein Browser normalerweise alle ihre Daten auf einmal. Jedes Bild, jeden Text, jeden Link usw. darauf.

Gerade bei Bildern kann das lange dauern, wenn es viele davon gibt. Bilder sind viel größer als andere Elemente einer Website. Außerdem blockieren sie oft das Laden anderer Ressourcen, solange der Browser mit ihnen beschäftigt ist, sodass deine Seite den Rendering-Prozess nicht abschließen kann.

Das Ergebnis: Deine Besucher müssen lange warten, bis sie die angeforderte Webseite sehen. Und viele warten das nicht ab, was deine Absprungrate in die Höhe treibt.

Lazy Loading verhindert das, indem es Bilder und andere Ressourcen, die anfangs nicht auf dem Bildschirm sichtbar sind, zunächst nicht lädt, und es ist eine wirksame Methode, um die Ladezeit deiner Website zu optimieren.

Stattdessen laden Bilder weiter unten auf der Seite erst nach und nach, wenn Besucher zu ihnen scrollen. So verstopfen sie den Browser nicht, und er kann andere Teile der Website schneller laden. Dadurch erscheinen Seiten für Besucher schneller, was zu einem besseren Erlebnis führt.

Genau das meinen übrigens Tools für Geschwindigkeitstests, wenn sie dir sagen: „Nicht sichtbare Bilder aufschieben“.

So funktioniert Lazy Loading

Es gibt mehrere Möglichkeiten, Lazy Loading umzusetzen. Früher brauchtest du dafür ziemlich ausgefeiltes JavaScript. Inzwischen ist es jedoch eine Standardfunktion der Browser.

Deshalb kannst du Bilder, die du auf diese Weise laden willst, einfach mit einem HTML-Attribut kennzeichnen, und die Browser deiner Besucher erledigen dann den Rest.

Das ist ideal, weil es die Umsetzung vereinfacht, keinen zusätzlichen Code auf deiner Website erfordert und das Vorgehen vereinheitlicht. Weil es zum De-facto-Standard geworden ist, heißt es inzwischen auch „natives Lazy Loading“.

Vorteile von Lazy Loading

Da du jetzt weißt, wie es funktioniert: Welche Vorteile bringt Lazy Loading für die Bilder auf deiner Website?

• Kürzere Seitenladezeiten: Darüber haben wir schon gesprochen. Indem du verhinderst, dass Bilder und andere Medien gleich zu Beginn geladen werden, kannst du die Zeit, bis eine Webseite erscheint, stark verkürzen.
• Weniger Arbeit für den Browser: Wenn Bilder per Lazy Loading geladen werden, muss dein Browser sie erst parsen, wenn ein Besucher die Seite nach unten scrollt.
• Weniger HTTP-Anfragen: Außerdem reduzierst du die Anzahl der HTTP-Anfragen und verbesserst die Bewertung für den Largest Contentful Paint.
• Bessere Nutzererfahrung: Website-Besucher lieben schnell ladende Seiten, deshalb kann Lazy Loading den Konversionen und anderen Engagement-Kennzahlen zugutekommen.
• Geringere Server- und CDN-Kosten: Dein Server oder CDN muss weniger Daten herunterladen, was zu niedrigeren Rechnungen führt, wenn deine Bandbreite begrenzt ist.
• Schnellere mobile Performance: Bilder wirken sich bei langsameren mobilen Verbindungen stärker aus. Wenn du diesen Faktor verringerst, profitieren vor allem deine mobilen Nutzer.
• SEO-Vorteile: Lazy Loading verbessert die Core Web Vitals, die ein Rankingfaktor von Google sind.

Mögliche Nachteile

Gleichzeitig kann Lazy Loading auch Probleme mit sich bringen:

• Performance-Probleme: Lazy Load above the fold einzusetzen (bei Logos, Hero-Bildern usw.), kann sich sogar negativ auf die Performance auswirken. Das liegt daran, dass das Largest Contentful Paint-Element wahrscheinlich ein Bild above the fold ist und daher so schnell wie möglich laden sollte. Wie du Bilder vom Lazy Loading ausschließt, besprechen wir später.
• SEO-Probleme: Bei falscher Umsetzung kannst du verhindern, dass Suchmaschinen per Lazy Loading geladene Bilder indexieren. Wenn du dich an die Anleitung hier hältst, sollte das aber kein Problem sein.

• Layoutverschiebungen: Wenn du die Größe von Bildern mit Lazy Loading nicht festlegst, kann sich das Layout der Website verschieben, was schlecht für den Cumulative Layout Shift ist.
• Mögliche Konflikte: Die Funktion kann mit einigen Plugins kollidieren.
• Auswirkungen auf die Nutzererfahrung: Lazy Loading ist sichtbar, wenn jemand sehr schnell auf der Seite nach unten scrollt.

Wann du Lazy Loading einsetzen solltest

Wann ist es also sinnvoll, diese Technik einzusetzen?

In den meisten Fällen ist sie am wirkungsvollsten, wenn du viele Bilder auf deiner Website hast, z. B. lange Blogartikel mit vielen Screenshots. Das kann aber auch für Produkt- oder Portfolioseiten gelten.

Lazy Load solltest du genau bei den Bildern below the fold einsetzen. Das verkürzt die Ladezeit der Seite, ohne die Nutzererfahrung zu beeinträchtigen. Wie oben schon erwähnt, solltest du Lazy Load nicht auf Bilder above the fold anwenden, da sich das negativ auf die Ladezeit der Seite auswirken kann.

💡 Wusstest du schon? WP Rocket enthält jetzt Rocket Insights, den integrierten Performance-Hub auf Basis von GTmetrix. Er bringt das Performance-Monitoring genau dorthin, wo du deine Website ohnehin optimierst: Du kannst deine wichtigsten Seiten überwachen, deine Ergebnisse verstehen, klare Empfehlungen mit Bezug zu WP-Rocket-Funktionen erhalten und jederzeit neu testen, ganz ohne zwischen mehreren Tools zu wechseln.

🚀 Aktualisiere WP Rocket auf die neueste Version, um Rocket Insights direkt in deinem Dashboard zu nutzen: Er ist in deinem Tarif kostenlos enthalten!

So lädst du Bilder mit nativem Lazy Loading verzögert

Genug der Theorie, kommen wir zur Praxis. Sehen wir uns als Erstes an, wie du Lazy Loading umsetzt, wenn du die native Lösung des Browsers nutzen willst.

Das HTML-Attribut loading

Damit Browser Lazy Loading anwenden, müssen die Elemente der Website, die verzögert laden sollen, mit dem HTML-Attribut <loading=“lazy“> gekennzeichnet sein. So sieht das in der Praxis aus:

<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />
<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>

Das Attribut kennt zwei Werte:

• lazy: Schiebt das Laden von Bild- oder iframe-Elementen auf.
• eager: Das ist das Standard-Ladeverhalten. Die Ressource wird sofort angefordert, unabhängig davon, wo sie sich befindet.

Derzeit unterstützt das Attribut loading nur die Tags <img> und <iframe>. Du kannst es zum Beispiel nicht verwenden, um CSS-Hintergrundbilder per Lazy Loading zu laden. Optionen dafür besprechen wir weiter unten.

Da es außerdem von so gut wie jedem Browser übernommen wurde (siehe unten), ist diese Methode auch die sicherste, wenn es um die Indexierung von Bildern mit Lazy Loading für SEO geht. Solange das img-Tag ein src-Attribut enthält, sollte zumindest Google keine Probleme haben, deine Bilder zu indexieren.

Nur wenn du Lazy Loading mit JavaScript umsetzt, könnte es eine gute Idee sein, das src-Attribut innerhalb eines <noscript>-Tags anzugeben. Das ist für Suchmaschinen gedacht, deren Crawler nicht mit JavaScript umgehen können (Google kommt, wie gesagt, bestens damit zurecht).

In beiden Fällen ist es eine gute Idee, zusätzlich eine Bild-Sitemap bereitzustellen.

Browserunterstützung

Lazy Loading ist zu einem De-facto-Webstandard geworden. Laut Can I Use sollte es bei mehr als 95 % der Browsernutzer weltweit funktionieren.

Außerdem gilt: Auch wenn du Lazy Loading auf deiner Website umgesetzt hast, leidet das Erlebnis in einem Browser, der es nicht unterstützt, nicht darunter.

Lazy Loading in WordPress: Integrierte Optionen

Seit WordPress 5.5 lädt das CMS Bilder standardmäßig per Lazy Loading. In Version 5.7 wurde die Funktion auf iframes ausgeweitet und in WordPress 5.9 feinjustiert.

Wenn du also deine Website von einem CMS wie Squarespace zu WordPress migriert hast und deine WordPress-Website mit der neuesten Version läuft, erhält jedes Bild und jedes iframe, dem ein width- und ein height-Attribut zugewiesen ist, automatisch das Attribut <loading=“lazy“>. Diese Bedingung wurde eingeführt, um die bereits erwähnten Probleme mit dem Cumulative Layout Shift zu vermeiden.

Außerdem wird Lazy Loading ab WordPress 5.9 nicht auf das erste iframe oder Bild einer Seite angewendet. So sollen die zuvor besprochenen Probleme mit dem LCP vermieden werden.

Darüber hinaus wendet WordPress das Attribut an folgenden Stellen auf Bilder an:

• Beitragsinhalte
• Textauszüge von Beiträgen
• Text-Widgets
• Avatarbilder
• Als Anhang hinzugefügte Bilder

Anpassungsmöglichkeiten

Derzeit gibt es keine No-Code-Optionen, um natives Lazy Loading in WordPress gezielt für bestimmte Seiten oder Bilder abzuschalten. Wenn du das möchtest, musst du ein Plugin oder einige der folgenden Filter und Funktionen verwenden.

• wp_lazy_loading_enabled: Damit kannst du Lazy Loading für Bilder in bestimmten Kontexten vollständig ein- und ausschalten.
• wp_filter_content_tags(): Füge img-HTML-Tags die Attribute srcset, sizes und loading hinzu und iframes das Attribut loading.
• wp_img_tag_add_width_and_height_attr(): Wird verwendet, um img-Tags, denen width- und height-Attribute fehlen, diese Attribute hinzuzufügen, damit Lazy Loading auf sie angewendet werden kann.
• wp_img_tag_add_srcset_and_sizes_attr(): Ergänze vorhandene img-Tags um die Attribute srcset und sizes, zu ähnlichen Zwecken wie oben.
• wp_img_tag_add_loading_attr(): Fügt img-Tags das Attribut loading hinzu. Für iframes verwende wp_iframe_tag_add_loading_attr().
• wp_omit_loading_attr_threshold(): Lege einen Schwellenwert dafür fest, wie viele der ersten Bilder und iframes nicht per Lazy Loading geladen werden sollen. Nützlich, wenn deine Website mehrere Medienelemente above the fold zeigt und du Lazy Load für sie alle deaktivieren willst.

Beispiele dafür, wie du das oben Genannte nutzt, um Lazy Loading in WordPress anzupassen, findest du in den Ankündigungen zu WordPress 5.5, 5.7 und 5.9.

Tipps zur Fehlerbehebung

Wenn natives Lazy Loading auf deiner WordPress-Website nicht funktioniert, liegt das wahrscheinlich daran, dass du Elemente ansprichst, die kein <img>- oder <iframe>-Tag haben. Das sind die einzigen Tags, die WordPress nativ per Lazy Loading lädt. Für andere Optionen sieh dir den nächsten Abschnitt an.

So aktivierst du Lazy Loading für Bilder und Videos in WordPress per Plugin

Es gibt viele Plugins, mit denen du deiner Website Lazy Loading hinzufügen kannst. Der mit Abstand einfachste Weg ist aber WP Rocket. Das dauert weniger als eine Minute.

Du musst dazu nur in deinem WordPress-Adminbereich Einstellungen > WP Rocket > Medien aufrufen.

Setze Häkchen bei den Medientypen, für die du Lazy Loading aktivieren willst:

• Bilder
• CSS-Hintergrundbilder
• iframes und Videos

Außerdem kannst du WP Rocket eingebettete YouTube-Videos durch ein Vorschaubild ersetzen lassen. Und schließlich gibt es eine Option, mit der du Bildern fehlende width- und height-Attribute hinzufügst, damit auch sie von Lazy Loading profitieren können.

Triff deine Auswahl und klicke unten auf Änderungen speichern. Fertig.

Unterschiede zum nativen Lazy Loading

Wie du oben schon sehen kannst, gehen die Optionen von WP Rocket über das native Lazy Loading von WordPress hinaus. Einer der wichtigsten Unterschiede ist, dass WP Rocket Lazy Loading auch auf Hintergrundbilder anwendet, sowohl auf Inline-Hintergrundbilder als auch auf die in CSS-Dateien definierten. Hier zum Beispiel Markup, das mit dieser Funktion kompatibel ist:

<div style="background-image: url(image.jpg)">

Mehr zum Lazy Loading von Hintergrundbildern mit WP Rocket erfährst du in unserer technischen Dokumentation.

So prüfst du, ob Lazy Loading funktioniert

Um zu sehen, ob Lazy Loading auf deiner Website erfolgreich angewendet wird, kannst du die Entwicklertools des Browsers verwenden. Gehe zum Tab Netzwerk und nutze den Filter Img. Lade die Seite neu, dann solltest du in der Liste nur Bilder above the fold sehen.

Sobald du anfängst, nach unten zu scrollen, sollten immer mehr Bilder erscheinen. Außerdem solltest du in der Spalte Initiator den Wert lazyload sehen.

Tipps zur Fehlerbehebung

Wenn du feststellst, dass einige Bilder nicht per Lazy Loading geladen werden, obwohl du die Option aktiviert hast, gibt es dafür mehrere mögliche Gründe:

• Einige Bildtypen sind absichtlich ausgeschlossen, zum Beispiel WooCommerce-Produktgalerien
• Die Bilder enthalten eines von mehreren ausgeschlossenen Attributen, etwa data-src und data-no-lazy
• Das Bild wurde dynamisch mit JavaScript hinzugefügt
• Es gibt einen Konflikt mit einem anderen Plugin, das Lazy Loading hinzufügt, oder dein Theme hat eine eigene Lazy-Loading-Funktion

Weitere Informationen findest du in unserer Dokumentation dazu, warum einige Bilder nicht per Lazy Loading geladen werden, zu häufigen Problemen mit LazyLoad und zu kompatiblen Plugins.

So deaktivierst du Lazy Loading in WordPress

Es gibt Fälle, in denen du Lazy Loading deaktivieren willst, entweder auf der ganzen Website, auf einer ganzen Seite oder für bestimmte Bilder. Hier sind verschiedene Möglichkeiten, das zu tun.

Deaktiviere das native Lazy Loading von WordPress vollständig

Wenn du das integrierte Lazy Loading auf deiner WordPress-Website deaktivieren willst, kannst du das mit diesem Code-Snippet tun:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Füge es in die Datei functions.php deines Themes ein (des Child-Themes!). Alternativ füge es mit einem Plugin wie Insert Headers and Footers hinzu oder erstelle dein eigenes MU-Plugin.

Um das native Lazy Loading von WordPress nur in bestimmten Kontexten oder nur für bestimmte Bilder zu deaktivieren, nutze die Funktionen und Filter im Abschnitt Anpassungsmöglichkeiten weiter oben.

Schalte Lazy Loading in WP Rocket aus

Du kannst die Funktion LazyLoad in WP Rocket genauso einfach deaktivieren, wie du sie aktiviert hast. Gehe zum Bereich Medien, entferne die Häkchen und speichere.

Schließe bestimmte Beiträge und Seiten vom Lazy Loading aus

Wenn du diese Funktion nur für einen bestimmten Beitrag oder eine bestimmte Seite deaktivieren willst, kannst du auch das mit WP Rocket ganz einfach tun. Öffne die Seite oder den Beitrag im Editor und suche in der Seitenleiste die „WP-Rocket-Optionen“ (Hinweis: Der Inhalt muss veröffentlicht sein, damit sie verfügbar sind).

Entferne einfach das Häkchen bei der Option, die du nicht verwenden willst, und aktualisiere den Inhalt. Ist eine Option ausgegraut, musst du sie zuerst global in den Einstellungen von WP Rocket aktivieren.

Entferne Lazy Loading für bestimmte Bilder oder iframes

Du kannst Lazy Loading auch für einzelne Medienelemente deaktivieren. Diese Option findest du im Bereich Medien der Einstellungen von WP Rocket.

Gib im Feld den Dateinamen, die CSS-Klasse, das img-Attribut, den Domainnamen (bei externen Bildern) oder den Namen der CSS-Datei des Bildes ein, das du nicht per Lazy Loading laden willst, und speichere. Weitere Informationen und Beispiele in der Dokumentation.

Beachte aber, dass du diese Funktion nicht verwenden musst, um Bilder above the fold vom Lazy Loading auszuschließen. Weil es sich so stark auf den Largest Contentful Paint und den PageSpeed-Insights-Score insgesamt auswirken kann, wenn du das nicht tust, erledigt WP Rocket das automatisch, ohne dass du einen Finger rühren musst. Wenn du andere Gründe hast, Bilder oder iframes vom Lazy Loading auszuschließen, kannst du die oben beschriebene Methode trotzdem verwenden.

Passe das Lazy Loading von WP Rocket per Code an

Wenn du mehr Kontrolle darüber willst, wie Lazy Loading in WP Rocket funktioniert, kannst du es auch per Markup anpassen. Die folgenden Snippets gehören in deine functions.php oder in ein Plugin für diesen Zweck.

Deaktiviere Lazy Loading unter bestimmten Bedingungen

Wir beginnen mit einer allgemeinen Funktionsstruktur, mit der du Lazy Loading unter verschiedenen Umständen abschalten kannst:

add_action('wp', function () {

   	 // Declare condition set to false as a default
   	 $condition = false;

   	 // Build your condition logic to turn ‘$condition’ to ‘true’ when applicable

   	 if ($condition) {

   	  // Disable Rocket Lazy Load if condition is met
   	  add_filter('do_rocket_lazyload', '__return_false');
   	 
   	 }
    }
);

Es folgen einige Beispiele dafür, wie du diesen Ansatz nutzen kannst.

Deaktiviere Lazy Loading auf allen Seiten

Verwende das, wenn du Bilder in deinen Beiträgen per Lazy Loading laden willst, aber nicht in Seiten:

add_filter( 'wp', function () {
   	 if ( is_page() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Schalte Lazy Load auf der Startseite aus

Deaktiviere Lazy Loading für die Startseite deiner Website (die Seite, die du unter Einstellungen > Lesen > Homepage festlegst):

add_filter( 'wp', function () {
   	 if ( is_front_page() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Deaktiviere Lazy Load auf deiner Blogseite

Dasselbe wie oben, aber für den Fall, dass du deine Startseite als Blog eingerichtet hast:

add_filter( 'wp', function () {
   	 if ( is_home() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Entferne Lazy Load bei einzelnen Beiträgen

Um Lazy Loading bei allen einzelnen Beiträgen zu deaktivieren, es aber für Seiten und die Startseite deines Blogs beizubehalten, verwende dieses Snippet:

add_filter( 'wp', function () {
   	 if ( is_single() ) {
   		 add_filter('do_rocket_lazyload', '__return_false');
   	 }
    }
);

Deaktiviere LazyLoad für bestimmte Bilder

Mit dem Attribut data-no-lazy kannst du WP Rocket anweisen, bei bestimmten Bildern kein Lazy Loading zu verwenden:

<img src="my-image.jpg" data-no-lazy="1" alt="" width="100" height="100" />

Füge Bildern mit Lazy Loading einen Fade-in-Effekt hinzu

Für Besucher kann es etwas irritierend sein, wenn deine per Lazy Loading geladenen Bilder wie aus dem Nichts auf der Seite auftauchen. Bilder nach und nach einzublenden ist ein beliebter Effekt, um dieses Erlebnis zu verbessern.

Das folgende CSS-Snippet fügt deiner Website einen Fade-in-Effekt hinzu. Beachte, dass es in deine style.css gehört, nicht in die functions.php:

img[data-lazy-src] {
    opacity: 0;
}

img.lazyloaded {
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

Passe den LazyLoad-Schwellenwert an

Standardmäßig lädt WP Rocket Bilder mit Lazy Loading, sobald sie höchstens 300 Pixel vom Browserfenster entfernt sind. Diesen Schwellenwert kannst du so anpassen:

add_filter( 'rocket_lazyload_threshold', function ( $threshold ) {
    return 100;
});

Hinweis: Im obigen Beispiel ist der Schwellenwert auf 100px gesetzt. Passe die Zahl nach Belieben an.

Starte jetzt mit Lazy Loading in WordPress

Lazy Loading ist eine hervorragende Möglichkeit, die Performance deiner Website zu verbessern. Am wirkungsvollsten ist es bei Websites mit vielen Bildern, weil es verhindert, dass diese und andere Medienelemente geladen werden, bevor sie tatsächlich auf dem Bildschirm erscheinen.

WordPress bringt inzwischen zwar standardmäßig natives Lazy Loading mit, bietet Nicht-Entwicklern aber nicht viele Einstellmöglichkeiten und gilt nur für Bilder und iframe-Elemente. Wenn du granularer vorgehen und Lazy Loading auch auf Dinge wie CSS-Hintergründe anwenden willst, ist eine Plugin-Lösung wie WP Rocket der richtige Weg. Damit kannst du Lazy Loading für bestimmte Bereiche deiner Website und sogar für einzelne Dateien abschalten.

Probier es jetzt aus. Falls du nicht überzeugt bist, kannst du dich jederzeit auf unsere 100-prozentige Geld-zurück-Garantie verlassen.

FAQ

Was ist Lazy Loading?

Lazy Loading ist eine Technik, die das Laden nicht sichtbarer Bilder, Videos und iframes aufschiebt, bis sie gebraucht werden. Bilder weiter unten auf der Seite laden erst nach und nach, wenn Besucher zu ihnen scrollen, sodass der Browser andere Teile der Website schneller laden kann. Dadurch erscheinen Seiten für Besucher schneller, und es gibt weniger unnötige Anfragen.

Ist Lazy Loading in WordPress standardmäßig integriert?

Ja, seit WordPress 5.5 lädt das CMS Bilder standardmäßig per Lazy Loading. In Version 5.7 wurde die Funktion auf iframes ausgeweitet und in WordPress 5.9 feinjustiert: Seit WordPress 5.9 wird Lazy Loading nicht auf das erste iframe oder Bild einer Seite angewendet. Das Attribut <loading=“lazy“> erhalten automatisch alle Bilder und iframes, denen ein width- und ein height-Attribut zugewiesen ist.

Welche Bilder sollte ich lazy loaden?

Lazy Loading solltest du bei den Bildern below the fold einsetzen. Das verkürzt die Ladezeit der Seite, ohne die Nutzererfahrung zu beeinträchtigen. Bilder above the fold wie Logos oder Hero-Bilder solltest du dagegen nicht per Lazy Loading laden, weil das Largest Contentful Paint-Element wahrscheinlich eines davon ist und so schnell wie möglich laden sollte.

Wie deaktiviere ich Lazy Loading in WordPress?

Das native Lazy Loading von WordPress deaktivierst du vollständig mit dem Code-Snippet add_filter( 'wp_lazy_loading_enabled', '__return_false' ); in der functions.php deines Child-Themes oder über ein Plugin wie Insert Headers and Footers oder ein eigenes MU-Plugin. In WP Rocket entfernst du im Bereich „Medien“ die Häkchen bei LazyLoad und speicherst. Für einzelne Beiträge und Seiten kannst du Lazy Loading in den „WP-Rocket-Optionen“ in der Seitenleiste des Editors abschalten.

Was bewirkt das Attribut loading=“lazy“?

Das HTML-Attribut loading mit dem Wert lazy schiebt das Laden von Bild- oder iframe-Elementen auf. Der Wert eager ist dagegen das Standard-Ladeverhalten: Die Ressource wird sofort angefordert, unabhängig davon, wo sie sich befindet. Das Attribut unterstützt derzeit nur die Tags <img> und <iframe>, für CSS-Hintergrundbilder kannst du es also nicht verwenden.