Largest Contentful Paint Bild vorladen

Was ist Preloading?

Preloading weist den Browser an, etwas frühzeitig herunterzuladen, bevor das eigentliche Rendering beginnt. Die Datei ist schneller verfügbar und blockiert das Rendering der Seite nicht. In LCP-Timing-Begriffen reduziert Preloading die Resource Load Delay: die Zeitspanne zwischen dem Empfang des HTML durch den Browser und dem Start des Downloads des LCP-Bildes.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

Warum sollte ich das Largest Contentful Paint Bild vorladen?

Bilder, die sichtbar und im Viewport sind, haben eine hohe Priorität und werden relativ früh im gesamten Seitenladeprozess heruntergeladen. Browser wie Chrome tun ihr Bestes, um diese Bilder für Sie zu priorisieren, und machen oft einen guten Job. Dennoch schätzen Browser die Download-Reihenfolge und priorisieren oft andere Ressourcen wie externes JavaScript oder andere sichtbare Bilder gegenüber dem LCP-Bild.

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

Die Zahlen bestätigen dies. Laut dem Web Almanac 2025 haben 76% der mobilen Seiten ein Bild als LCP-Element. Dennoch laden nur 2,1% der Seiten dieses Bild tatsächlich vor. Das ist eine enorme verpasste Chance. Darüber hinaus sind viele LCP-Bilder im initialen HTML nicht auffindbar, weil sie auf JavaScript oder CSS zum Rendern angewiesen sind. Der Browser kann nicht herunterladen, was er nicht finden kann. Ein Preload-Tag löst dieses Problem.

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

Das Vorladen des LCP-Bildes macht es schneller für das Rendering verfügbar. Das Ergebnis: ein besserer LCP-Wert sowohl in Lighthouse als auch in Felddaten.

Über die von CoreDash überwachten Seiten hinweg erzielen 98% der Seitenaufrufe mit einem vorgeladenen LCP-Bild die Bewertung „gut", verglichen mit 88% ohne Vorladen. Der p75 LCP für vorgeladene Bilder ist ungefähr 2x schneller als für nicht vorgeladene.

Vorladen ist noch wichtiger, wenn das LCP-Bild nicht das erste Bild ist, das der Browser herunterlädt. Dies passiert 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 bei einem Slider-Script oder wenn Ihre Website auf einem JavaScript-Framework wie React aufgebaut ist.

Dennoch laden 17% der mobilen Seiten laut dem Web Almanac 2025 ihr LCP-Bild mit Lazy Loading. Nur 62% der mobilen Ursprünge bestehen LCP. Diese beiden Fakten stehen nicht ohne Zusammenhang. Wenn Sie Ihr LCP-Bild mit Lazy Loading laden, beheben Sie das zuerst und laden Sie es dann vor.

Verwenden Sie fetchpriority="high" für das LCP-Bild

Neben dem Vorladen sollten Sie auch fetchpriority="high" zum LCP-Bildelement selbst hinzufügen. Dies weist den Browser an, dieses Bild gegenüber anderen Ressourcen zu priorisieren. Ein Test bei Google Flights zeigte LCP-Verbesserungen von 2,6 Sekunden auf 1,9 Sekunden allein durch Hinzufügen dieses Attributs.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

Ein vorgeladenes Bild erhält weiterhin die Standardpriorität, es sei denn, Sie erhöhen sie explizit. Die Kombination von rel="preload" mit fetchpriority="high" sowohl beim Link-Tag als auch beim Img-Element gibt dem Browser das klarstmögliche Signal. Für mehr dazu, wie Browser entscheiden, was sie zuerst herunterladen, lesen Sie den vollständigen Leitfaden zur Ressourcenpriorisierung.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

Die Verbreitung von fetchpriority="high" wuchs von 0,03% der mobilen Seiten im Jahr 2022 auf 17,3% im Jahr 2025, größtenteils dank der Integration in den WordPress-Core. Wenn Ihr CMS es nicht automatisch setzt, fügen Sie es selbst hinzu.

Wie man das Largest Contentful Paint Bild vorlädt

Das Vorladen des LCP-Bildes ist einfach. Es sind nur 3 Schritte nötig:

1. LCP-Element bestimmen: 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. Auf responsive Bildformate prüfen. Wenn Sie responsive Bilder verwenden, müssen Sie alle diese Bildgrößen zum srcset des Preload-Tags hinzufügen. Andernfalls laden wir das falsche Bild vor. Das würde die Seite nur verlangsamen.
3. Preload-Tag hinzufügen. Alles was noch zu tun ist, ist das Preload-Tag hinzuzufügen.

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

Der imagesizes-Wert sollte mit dem sizes-Attribut Ihres <img>-Elements übereinstimmen. Wenn Ihr Bild bei halber Viewport-Breite angezeigt wird, verwenden Sie imagesizes="50vw". Wenn Sie dies falsch setzen, lädt der Browser die falsche Bildvariante vor.

Laden Sie nur das LCP-Bild vor. Wenn Sie zu viele Ressourcen vorladen, verwässern Sie den Prioritätsboost und der Browser kann nicht unterscheiden, was am wichtigsten ist. Ein Preload für das LCP-Bild ist alles, was Sie brauchen. Für einen noch aggressiveren Ansatz können Sie Preloading mit 103 Early Hints kombinieren, um den Download zu starten, bevor das HTML überhaupt ankommt.

Preloading sorgt dafür, dass das Bild früher heruntergeladen wird, aber das Bild selbst muss trotzdem optimiert sein. Liefern Sie es in einem modernen Format wie WebP oder AVIF und in den richtigen Dimensionen. Siehe Bilder für Core Web Vitals optimieren für die vollständige Anleitung.

Preloading hilft nur bei einem Teil des LCP-Timings: der Verzögerung, bevor das Bild mit dem Download beginnt. Wenn Ihr Time to First Byte langsam ist, kann kein noch so viel Preloading dies ausgleichen. Das Preload-Tag befindet sich im HTML, daher muss der Browser zuerst das HTML empfangen. Überprüfen Sie Ihren TTFB, bevor Sie Preload-Hinweise hinzufügen.

Wie man das Largest Contentful Paint Bild in WordPress vorlädt

Das Vorladen des Largest Contentful Paint Bildes in WordPress ist überhaupt nicht schwer. Normalerweise ist das Largest Contentful Paint Bild das Beitragsbild für einen Blogbeitrag oder eine Seite. Mit nur wenigen Zeilen Code können wir die URL und das srcset des Beitragsbildes abrufen und dem Head der Seite hinzufügen.

Fügen Sie diesen Code einfach direkt nach dem Title-Element 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());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>