WordPress: So vermeidest du lazy loading für ein bestimmtes Bild – ohne Plugin.

Last updated on März 28th, 2023.

WordPress lädt standardmässig alle Bilder mit dem lazy-Tag. Wenn sich ein Bild jedoch above the fold befindet, empfehle ich das lazy loading für dieses Bild zu deaktivieren. Denn lazy laoding above the fold kann sich negativ auf die Largest Contentful Paint Render-Zeit auswirken.

Hier kommt die Anleigung zum Deaktivieren eines einzelnen Bildes ohne Pulgin:

1. Kopiere den untenstehenden Code:

/* Disable lazy loading for single image* */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 36, 'large' ); 
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 36, 36 );

2. In der vierten und in der letzten Zeile ersetze die Nummer 36 mit der Image ID deines Bildes.

Du findest die Image ID auf der WordPress-Seite, auf der das Bild erscheint. Öffne den Code-Editor der Seite und suche «id». So geht’s:

• Kicke auf die drei Punkte oben rechts
• Wähle den Code-Editor aus oder benütze die Tastenkombination ⇧⌥⌘M für Mac und Ctrl + Shift + Alt + M für Windows
• Kopiere die Image ID

3. Gehe im WordPress Menü auf zu Design > Theme-Editor > functions.php
4. Fügen dort das Code-Snippet ein
5. Klicken Sie auf die Schaltfläche «Datei aktualisieren».

Das war’s!

Im untenstehenden Video gehe ich jeden Schritt dieses Manuals durch. (Das Video ist auf Englisch.)

Ich hoffe, ich konnte dir helfen. Gib mir doch hier einen Kaffee aus, damit ich weiterhin Energie habe neue Posts zu schreiben.