Die Optimierung Ihrer Website für Besucher sowie für Google und andere Suchmaschinen sind wichtige Aufgaben, wenn Sie es mit Ihrer Internetpräsentation ernst meinen.
Google bietet die Google Search Console an, um auf bestimmte Metriken hinzuweisen, die nach Ansicht von Google verbessert werden sollten. Eine dieser Metriken, die häufig vorkommen, heißt LCP. Largest contentful paint.
LCP-Metriken messen die Renderzeit des größten Bild- oder Textblocks, der im Darstellungsbereich sichtbar ist. Also im Grunde das größte Element „above the fold“. Das ist ziemlich oft ein Bild, besonders bei Blogposts oder anderen inhaltsreichen Seiten.
Das Problem hier ist, dass WordPress ab Version 5.4 damit begann, alle Bilder der Seite per „Lazy Load“ zu laden. Es handelt sich um eine Standardfunktion, die eine große Verbesserung darstellt. In diesem Fall wäre es jedoch besser, wenn das erste Bild des Inhalts nicht per Lazy Load geladen würde. Vor allem, wenn Ihre Website das erste Bild über dem Inhalt und damit sofort sichtbar „above the fold“ anzeigt.
Der Grund dafür ist, dass Bilder, die verzögert geladen werden, etwas langsamer geladen werden. Daher ist der LCP-Score oft viel schlechter als er sein könnte. Googles Pagespeed Insights schlägt tatsächlich vor, dass LCP BIlder nicht per Lazy Loading geladen werden sollten.
Da ich dieses Problem schon für mehrere Kunden hatte, habe ich mir einen einfachen Code zusammengestellt, der in die functions.php Ihres Wordpress-Themes eingefügt werden kann.
//function to get first image in post content area
function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img[^>]*src="([^"]+)"/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
//defines a default image if no image was found
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}
// disable lazy loading for first image inside post content
function no_lazy_load_on_first_image( $value, $image, $context ) {
if ( 'the_content' === $context ) {
//uses above function to check if image is the first image of the content area
$image_url = get_first_image();
if ( false !== strpos( $image, '' . $image_url . '' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'no_lazy_load_on_first_image', 10, 3);Dieser Code verwendet tatsächlich zwei Funktionen und den WP-Filter „wp_img_tag_add_loading_attr“. Mit diesem Filter können wir ändern, wie Lazy Loading hinzugefügt wird.
Die erste Funktion findet das erste Bild innerhalb des aktuellen Beitragsinhalts. Die zweite Funktion überprüft einfach, ob das das Bild ist, das der Filter gerade durchläuft. Wenn dies der Fall ist, wird statt des regulären Werts false zurückgegeben.
Gerne könnt ihr den Code unten, verbessern, korrigieren und kommentieren.
