Um zu vermeiden, dass Bilder im Above the Fold Bereich von WordPress als Lazy Load ausgegeben werden, kann man Lazy Loading für bestimmte Bilder deaktivieren.
Seit WP-Version 5.5 gehört das Lazy Loading zum WordPress Core, das bedeutet, dass alle Bilder einer WordPress Website verzögert vom Webbrowser geladen werden.
Mit WordPress Version 5.9 wurde das Lazy Loading nochmals optimiert, indem von nun an das erste Bild auf der Seite, automatisch vom Lazy Loading ausgeschlossen wird.
Mit WordPress 6.1 wurde wieder eine neue Kernfunktionalität eingeführt, die das Attribut decoding="async"
zu allen Bildern hinzufügt. Ähnlich wie beim Lazy Loading, hilft es dem Webbrowser, den Gesamtinhalt einer Seite schneller laden zu können.
Info:
Die Lazy Load Funktion wird auch von vielen Performance-Plugins angeboten. Sofern man ein solches nutzt, empfiehlt es sich, diese Funktion auch zu aktivieren, da sie bei so ziemlich allen Plugins technisch besser ausgereift ist, als bei WordPress!
In diesem Artikel möchte ich hier mal genauer darauf eingehen, wann Lazy Loading Sinn macht, wann nicht und wie es gezielt deaktiviert werden kann.
Was ist Lazy Loading?
Hierbei werden die Bilder einer Website erst dann geladen, wenn der Nutzer sie in den sichtbaren Bereich scrollt.
Im allgemeinen ist das eine sinnvolle Funktion, da keine Ressourcen zum Laden von Bildern verschwendet werden, die ohnehin gar nicht sichtbar sind.
Dadurch können relevantere Inhalte auf der Seite deutlich schneller geladen werden.
Lazy Loading – Nachteile
Allerdings hat das verzögerte Laden aller Bilder auch Nachteile. Dadurch, dass auch die Bilder im Above the Fold Bereich (Der Bereich des Bildschirms, der ohne zu scrollen sichtbar ist) verzögert geladen werden, führt das z.B. zu einem schlechteren LCP Wert (Largest Contentful Paint).
Der LCP Wert gibt an, wie lange es dauert, alle Elemente im sichtbaren Bereich des Bildschirms zu laden. Verzögert man nun aktiv das Laden der Bilder durch Lazy Loading, verschlechtert sich auch der LCP entsprechend.
Nun ist das erste Bild in den meisten Fällen das Logo und sofern sich noch ein, oder zwei weitere Bilder im sichtbaren Bereich befinden, werden diese nach wie vor verzögert geladen. Dadurch verschlechtert sich entsprechend der Largest Contentful Paint.
Prüfen, welche Bilder mit Verzögerung, also „lazy“ geladen werden
1.
Website untersuchen
Öffne deine Website im Google Chrome Browser, betätige dann die rechte Maustaste und geh auf „Untersuchen“.
2.
Google Entwicklerkonsole
Die Google Entwicklerkonsole öffnet sich. In der obersten Menüreihe befindet sich ganz links ein Icon, mit einem kleinen Pfeil, klickt man es an, hat man die Möglichkeit, einzelne Elemente der Seite auszuwählen.
3.
Bilder inspizieren
Bewege den Cursor auf jedes einzelne Bild und klicke es an. Unter dem Reiter Elemente ist nun der entsprechende HTML Code markiert. Befindet sich in dem <img>
Tag das HTML-Attribut loading="lazy"
, wird das Bild verzögert geladen.
In meinem Fall befinden sich drei Bilder im Above the Fold Bereich. WordPress hat das erste Bild, in meinem Fall das Logo, vom Lazy Loading ausgeschlossen.
Lazy Load für ein bestimmtes Bild deaktivieren
Um den LCP Wert zu verbessern, sollte Lazy Load für alle Bilder im Above the Fold Bereich deaktiviert werden!
Um zu bestimmen, welche Bilder genau vom Lazy Loading ausgeschlossen werden sollen, musst du zunächst die ID der Bilder herausfinden
ID eines Bildes herausfinden
Bei WordPress wird jedem Bild automatisch eine ID zugeordnet. So findest du die ID eines Bildes:
- Öffne im WordPress Dashboard das Medienverzeichnis
- Beweg den Cursor über den Titel des entsprechenden Bildes
- Im dem Link der unten links erschient, findest du die ID des Bildes, die Zahl hinter
post=
ist die ID des Bildes
Die ID kann aus einer, oder mehreren Ziffern bestehen.
Sofern du das bestimmte Bild im Medienverzeichnis nicht finden, oder zuordnen kannst, findest du die ID eines Bildes auch in der Google Entwicklerkonsole. In dem selben <img>
Tag, in dem wir auch das Loading="lazy"
Attribut gefunden haben, findet man die ID hinter wp-image-
.
Codeschnipsel zum Deaktivieren von Lazy Load für ein bestimmtes Bild
Dieser Code ermöglicht es, ein bestimmtes Bild anhand der ID vom Lazy Loading auszuschließen.
function no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4133 );
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'no_lazy_load_id', 4133, 4133 );
Die ID muss im Codeschnipsel an drei Stellen eingetragen werden. 1x in Zeile 3 und 2x in Zeile 10. Ersetze einfach meine ID, 4133, mit deiner Bild ID.
Achtung:
Bevor mit Code herumhantiert wird, empfehle ich generell ein ein Backup der WordPress Website zu erstellen! Das lässt sich kostenlos und ohne viel Aufwand bewerkstelligen. Eine Video-Anleitung werde ich hier verlinken.
1.
Code kopieren
Kopiere den Codeschnipsel und beachte, dass die ID noch ersetzt werden muss.
2.
Code einfügen
Der Code muss in die functions.php Datei eingefügt werden. Damit er beim nächsten Theme Update nicht überschrieben wird, solltest du ein Child Theme verwenden. Alternativ empfehle ich das Plugin Code Snippets, zum Einfügen von Custom Code.
3.
ID’s ersetzen
Nun müssen nur noch die ID’s deiner Bilder eingefügt werden. Am besten den Code nochmal kurz kontrollieren und dann speichern.
Videoanleitung:
Lazy Load für das erste Bild einer Seite deaktivieren
Um das erste Bild auf einer WordPress Website vom Lazy Loading auszuschließen, kann dieser Codeschnipsel verwendet werden:
function add_responsive_class($content){
if ( is_single() || is_page() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) {
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Zurück zu meiner Situation:
Da sich in meinem Fall ja zwei Bilder nach dem Logo im Above the Fold Bereich befinden, habe ich folgende Codeschnipsel genutzt, um das native Lazy Loading von WordPress für diese Bilder zu deaktivieren:
Schritt 1
Mit diesem Codeschnipsel habe ich loading="lazy"
für das 1. Bild deaktiviert. In Zeile 2 sieht man, dass ich die Funktion auf die Home Page beschränkt habe.
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) {
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Schritt 2
Für das 2. Bild habe ich die ID rausgesucht, um es mit dem zweiten Codeschnipsel gezielt zu deaktivieren.
function no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 3689 );
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'no_lazy_load_id', 3689, 3689 );
Lazy Load für das Beitragsbild deaktivieren
Da beim Aufrufen eines Blogbeitrags meistens das Beitragsbild (Featured Image) ganz oben im Above the Fold Bereich angezeigt wird, macht es natürlich Sinn, dieses auch vom Lazy Loading auszuschließen.
Codeschnipsel:
function disable_lazy_load_featured_images($attr, $attachment = null) {
$attr['loading'] = 'eager';
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'disable_lazy_load_featured_images');
Lazy Load komplett deaktivieren
Wer das Lazy Loading auf seiner WordPress Website grundsätzlich für alle Bilder deaktivieren möchte, der kann diesen Codeschnipsel in die function.php Datei seines Child Themes einfügen.
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Natürlich kann auch hier alternativ das Code Snippets Plugin genutzt werden.
Was bedeutet das Bildattribut decoding=“async“ ?
Das Attribut decoding="async"
für das img
-Tag bewirkt die asynchrone Decodierung aller Bilder vom Browser.
Das bedeutet, dass nebenbei andere Prozesse ausgeführt werden können, wodurch sich zwar die gesamt Renderzeit der Seite reduziert, worunter jedoch der LCP Wert leiden kann, da auch beim Laden der Bilder im „Above the Fold Bereich“ nebenbei andere Prozesse stattfinden.
WordPress hat diese Funktion integriert, da insbesondere Websites mit vielen Bildern schneller geladen werden können.
Doch genau wie beim klassischen Lazy Loading, kann insbesondere bei Bildern die zum LCP beitragen, eine Verzögerung der Bild-Decodierung zu einer schlechteren LCP-Bewertung führen. Was sich dann natürlich negativ auf das Benutzererlebnis und auch auf den SEO-Score auswirkt.
Codeschnipsel zum deaktivieren von decoding=“async“
add_filter('wp_img_tag_add_decoding_attr', '__return_false')