Preload Largest Contentful Paint Bild

Was ist Preloading?

Das Preloaden einer Ressource löst aus, dass der Browser eine Ressource frühzeitig herunterlädt, noch bevor das Haupt-Rendering des Browsers beginnt. Dies stellt sicher, dass eine Ressource früher verfügbar ist und weniger wahrscheinlich das Rendern der Seite blockiert, was die Leistung in den meisten Fällen verbessert.

<link rel="preload" 
as="image" 
href="image.jpg" 
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w">

Warum sollte ich das Largest Contentful Paint Bild preloaden?

Bilder, die sichtbar sind und sich im Viewport befinden, haben eine hohe Priorität und werden relativ früh im gesamten Seitenladeprozess heruntergeladen. Browser wie Chrome werden ihr Bestes tun, um diese Bilder für Sie zu priorisieren, und werden oft gute Arbeit leisten. Dennoch werden Browser eine fundierte Vermutung über die Download-Reihenfolge anstellen und andere Ressourcen wie externes JavaScript oder andere sichtbare Bilder gegenüber dem LCP-Bild priorisieren.

Aufgrund dieses Verhaltens beginnt der LCP-Bild-Download nicht so früh, wie Sie es vielleicht möchten. Das Preloaden des Largest Contentful Paint Bildes wird dieses Problem beheben.

Wie beeinflusst das Preloaden des Largest Contentful Paint Bildes die Seitenleistung?

Das Preloaden des Largest Contentful Paint Bildes macht das Bild früher im Rendering-Prozess für das Rendering verfügbar. Dies führt normalerweise zu einem besseren LCP-Score. In fast allen Fällen führt das Preloaden des LCP-Elements zu besseren Lighthouse- und RUM-Scores.

Das Preloaden des LCP-Elements kann sogar noch vorteilhafter sein, wenn aus irgendeinem Grund das LCP-Bild nicht das erste Bild ist, das heruntergeladen wird. Dies kann passieren, wenn:

• Mehrere Bilder im sichtbaren Viewport vorhanden sind
• Das LCP-Bild ein Hintergrundbild ist (Hintergrundbilder werden normalerweise später heruntergeladen als Vordergrundbilder)
• Das LCP-Element auf JavaScript angewiesen ist. Zum Beispiel mit einem Slider-Skript oder wenn Ihre Website auf einem JavaScript-Framework wie REACT basiert.

So preloaden Sie das Largest Contenful Paint Bild

Das Preloaden des LCP-Bildes ist relativ einfach. Es sind nur 3 Schritte zu unternehmen:

1. Bestimmen Sie das LCP-Element: Führen Sie ein Lighthouse-Audit durch und überprüfen Sie das Largest Contentful Paint Element. Stellen Sie sicher, dass das LCP-Element tatsächlich ein Bild ist!
2. Überprüfen Sie auf responsive Bildformate. Wenn Sie responsive Bilder verwenden, müssen Sie alle diese Bildgrößen zum srcset des Preload-Tags hinzufügen. Andernfalls preloaden wir das falsche Bild. Das wird die Seite nur verlangsamen.
3. Fügen Sie das Preload-Tag hinzu. Alles, was übrig bleibt, ist das Hinzufügen des Preload-Tags. Die Syntax ist unkompliziert.

<link 
   <!-- indicate preload -->
   rel="preload" 
   <!-- as is required and indicates we are preloading an image -->
   as="image" 
   <!-- image src -->
   href="wolf.jpg" 
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w">

So preloaden Sie das Largest Contentful Paint Bild in Wordpress

Das Preloaden des Largest Contentful Paint Bildes in Wordpress ist überhaupt nicht schwer. Normalerweise ist das Largest Contentful Paint Bild das Beitragsbild für einen Blogpost oder eine Seite. Mit nur wenigen Codezeilen können wir die URL und das srcset des Beitragsbildes abrufen und diese zum Head der Seite hinzufügen.

Fügen Sie diesen Code einfach direkt nach dem Titelelement in der header.php-Datei Ihres aktuellen Templates ein.

<?php if((int)get_post_thumbnail_id() > 0){?>
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.