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

  • Post author:

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
Screenshot Image ID finden auf wordpress.org
  1. Gehe im WordPress Menü auf zu Design > Theme-Editor > functions.php
  2. Fügen dort das Code-Snippet ein
  3. Klicken Sie auf die Schaltfläche «Datei aktualisieren».

Das war’s!

Hast du Fragen? Schreib sie hier direkt ins Kommentarfeld.

This Post Has One Comment

  1. Melch M.

    funktioniert das auch, wenn ich statt der ID des Bildes die Klasse adressiere? also:

    if ( »class_name› === ‹hier-die-klasse ) {
    ….

    weil, ich suche einen weg, das native Lazy-Loading für ein Widget (das oben auf der Seite ist, zu deaktivieren)

Schreiben Sie einen Kommentar