Langsame Hero-Bilder beheben & Core Web Vitals

Wie man langsame Hero-Bilder behebt: in Kürze

Hero-Bilder sind große Bilder oben auf einer Webseite. Diese Hero-Bilder verursachen einen langen Largest Contentful Paint, wenn die Hero-Bilder nicht optimiert sind. 9 von 10 Websites, die ich optimieren soll, haben Probleme mit den Hero-Bildern. In diesem Artikel werde ich Ihnen verschiedene Techniken zeigen, wie Sie Hero-Bilder beschleunigen können.

Zuletzt überprüft von Arjen Karel im Februar 2026

Was ist ein Hero-Bild?

Ein Hero-Bild, manchmal auch 'Hero Header' genannt, ist ein großes Bild mit Text, das oft oben auf einer Webseite platziert wird. Ein Hero-Bild dient als erster Eindruck des Nutzers von Ihrem Unternehmen und Angebot, aufgrund seiner prominenten Platzierung im oberen Bereich einer Webseite, die sich normalerweise über die gesamte Breite erstreckt.

Eine kurze Erinnerung: Hero-Bilder, die Core Web Vitals und der Largest Contentful Paint: 
Aufgrund der Größe des Hero-Bildes (es erstreckt sich normalerweise über die gesamte Breite der Seite und einen großen Teil der Höhe des sichtbaren Viewports) wird dieses Element in fast allen Fällen zum Largest Contentful Paint Element.
Der Largest Contentful Paint ist eine wichtige Core Web Vitals Metrik. Das Largest Contentful Paint Element ist das größte Element, das im sichtbaren Viewport des Browsers gezeichnet wird. Laut dem 2025 Web Almanac ist auf 76 % der mobilen Seiten das LCP-Element ein Bild. Nur 62 % der mobilen Origins bestehen derzeit LCP. Beheben Sie das Hero-Bild und Sie beheben LCP für die meisten Websites.
Da nicht optimierte Bilder tendenziell viel Bandbreite beanspruchen und daher lange zum Laden benötigen, verursachen Hero-Bilder oft schlechte Largest Contentful Paint Metriken.

Optimierung des Hero-Bildes und des Largest Contentful Paint

Es gibt viele Techniken zur Optimierung der Hero-Bilder und des Largest Contentful Paint. Ich werde sie hier erklären. Die meisten Techniken können für noch bessere Ergebnisse kombiniert werden!

1. Preload des Hero-Bildes oder 103 Early Hints senden

Wenn Sie möchten, dass ein Element so schnell wie möglich im Browser verfügbar ist, könnten Sie dieses Element preloaden. Preloading beinhaltet die Verwendung von Resource Hints. Resource Hints teilen dem Browser etwas über die Priorität eines Elements mit und lösen einen sehr frühen Download dieser Ressource aus. Laut dem 2025 Web Almanac nutzen nur 2,1 % der Seiten Preloading für ihr LCP-Bild. Das ist eine riesige verpasste Gelegenheit.

<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  fetchpriority="high"
  imagesrcset="hero_400px.jpg 400w, hero.jpg 800w, hero_1600px.jpg 1600w"
  imagesizes="50vw">

103 Early Hints ermöglichen es Servern, Resource Hints vor der endgültigen HTML-Antwort zu senden. Der Browser kann mit dem Preloading des Hero-Bildes beginnen, während der Server die Seite noch generiert. Chrome, Edge und Firefox unterstützen alle Preloading über Early Hints. Safari unterstützt preconnect, aber noch kein Preload über Early Hints. Für Details zur Einrichtung lesen Sie den kompletten Leitfaden zu 103 Early Hints.

Über alle von CoreDash überwachten Websites hinweg haben Seiten mit einem preloaded LCP-Bild eine 'gute' LCP-Rate von 81 % im Vergleich zu 64 % ohne Preloading. Für eine vollständige Anleitung aller Preloading-Optionen, siehe wie man das LCP-Bild preloadet.

2. Verwenden Sie fetchpriority="high" auf dem Hero-Bild

Das Attribut fetchpriority teilt dem Browser mit, welche Ressourcen am wichtigsten sind. Das Setzen von fetchpriority="high" auf Ihrem Hero-Bild erhöht dessen Download-Priorität gegenüber anderen Bildern und konkurrierenden Ressourcen wie Skripten und Schriftarten.

<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="...">

Laut dem 2025 Web Almanac setzen nur 17 % der Seiten fetchpriority="high" bei ihrem LCP-Bild. Das bedeutet, dass 83 % der Websites einfache Performance-Gewinne liegen lassen.

Sie können auch fetchpriority="high" zu dem oben gezeigten Preload-Link hinzufügen. Verwenden Sie fetchpriority="high" nur bei einem einzigen Bild pro Seite. Mehrere Bilder mit hoher Priorität konkurrieren miteinander und heben den Vorteil auf. Für weitere Informationen darüber, wie Browser Ressourcen priorisieren, lesen Sie den Core Web Vitals Leitfaden zur Ressourcenpriorisierung.

3. Komprimieren Sie das Hero-Bild und verwenden Sie next-gen formats

Das Komprimieren von Bildern verringert deren Dateigröße. Kleinere Dateigrößen beanspruchen weniger Bandbreite und stehen dem Browser so schnell wie möglich zur Verfügung. Die Komprimierung von Bildern kann in Ihrem Foto-Editor, in Ihrem CMS (Tipp: Ihr Entwickler kann das WordPress-Komprimierungsniveau einstellen) oder mit einem Online-Bildkomprimierungstool durchgeführt werden.

Die meisten langsamen Hero-Bilder sind langsamer als nötig, weil sie im 'falschen' Bildcontainer wie PNG oder JPEG bereitgestellt werden. Es gibt viel schnellere Alternativen zu JPEG und PNG wie WebP und AVIF. Laut dem 2025 Web Almanac werden 57 % der LCP-Bilder immer noch als JPEG und 26 % als PNG bereitgestellt, während nur 11 % WebP und weniger als 1 % AVIF verwenden.

Für viele CMS-Systeme gibt es Konvertierungs-Plugins, die Ihre Bilder in next-gen formats umwandeln. Wenn sich die Bildkonvertierung nur schwer in Ihre Website integrieren lässt, könnte ein CDN mit Unterstützung für Bildkonvertierung die Lösung sein, nach der Sie suchen. Für einen vollständigen Überblick über Bildoptimierungstechniken, siehe Bilder für Core Web Vitals optimieren.

4. Verwenden Sie keine Hintergrundbilder, verwenden Sie normale responsive images

Ihr Hero-Bild sollte ein normales Bild sein und niemals ein Hintergrundbild. Der übliche Weg, Hero-Bilder einzubinden, besteht darin, dem Hero-Container ein Hintergrundbild hinzuzufügen und die background-size dieses Containers auf cover zu setzen. Dies stellt sicher, dass das Hero-Bild in allen Fällen auf den Bildschirm passt.

Hintergrundbilder sind schlecht für die Core Web Vitals. Denken Sie daran! Lesen Sie mehr darüber, warum Hintergrundbilder schlecht für die Performance sind. Wenn Sie Hintergrundbilder nicht ganz vermeiden können, können Sie zumindest Hintergrundbilder verzögern (defer), die sich below the fold befinden.

• Hintergrundbilder werden mit einer niedrigeren Priorität geladen
• Hintergrundbilder sind nicht responsive (außer Sie möchten die Dinge wirklich kompliziert machen)
• Hintergrundbilder könnten Core Web Vitals Probleme mit den meisten Lazy Loading Bibliotheken verursachen

Ich mache es so, dass ich ein normales Bild in absoluter Positionierung hinzufüge und die Eigenschaft object-fit dieses Bildes auf cover setze. Sobald ich das Hintergrundbild in ein normales Bild geändert habe, kann ich responsive images verwenden. Wenn Sie Elementor verwenden, schauen Sie sich an, wie man Elementor Hero-Bilder behebt.

Responsive images bedeuten, dass für verschiedene Geräte (Mobile, Desktop, Tablet) eine andere Version desselben Hero-Bildes gesendet werden kann. Für ein Desktop-Gerät könnte ich ein riesiges 1920x1280 Hero-Bild senden, während ich für ein mobiles Gerät nur ein kleineres Hero-Bild mit 400x266 Pixeln senden müsste. Das ist 25-mal weniger Datenvolumen!

• Die Hero-Bilder werden nun mit einer höheren Priorität geladen
• Ich kann nun responsive images für das Hero-Bild verwenden

style.css

<style>
#herocontainer{
    position:relative;
    padding:4rem 0
}
#heroimg{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
</style>

index.html

<div id="herocontainer">
<h1>Welcome to my site</h1>
<picture>
    <source
        type="image/webp"
        media="(max-width:540px)"
        srcset="herosm.webp">
    </source>
    <img fetchpriority="high" loading="eager" decoding="async" src="hero.webp" id="heroimg">
</picture>
</div>

5. Stellen Sie Hero-Bilder von der Haupt-Domain bereit und ziehen Sie ein CDN in Betracht

Allzu oft sehe ich, dass das Largest Contentful Paint Bild von einer anderen Domain bereitgestellt wird, zum Beispiel 'static.mydomain.com'. Diese Subdomains zeigen oft auf ein CDN. Obwohl ich die Nutzung eines CDNs befürworte (siehe unten), ist ein solches Setup nicht empfehlenswert. Das Bild auf der Subdomain erfordert eine neue Verbindung zu einem neuen Server. Neue Verbindungen sind aufwendig und nehmen wertvolle Zeit in Anspruch. Wenn das Bild von der Haupt-Domain (zum Beispiel www.mydomain.com) bereitgestellt wird, können die Bilder über die bereits bestehende Serververbindung viel schneller abgerufen werden.

Wenn ein CDN auf der Haupt-Domain eingerichtet ist, kann es eine enorme Geschwindigkeitssteigerung bieten. Besonders wenn Ihre Website aus der ganzen Welt besucht wird. Ein CDN verfügt über strategisch auf der ganzen Welt verteilte Server, auf denen Ihre statischen Ressourcen (wie Bilder) für schnelle lokale Reaktionszeiten gecacht werden. Das bedeutet, dass Daten nicht um die ganze Welt reisen müssen, sondern von einem lokalen Edge-Server bereitgestellt werden können. Für eine vollständige Einrichtungsanleitung, siehe wie man Cloudflare für Core Web Vitals konfiguriert.

6. Vermeiden Sie Lazy Loading des Hero-Bildes

Stellen Sie sicher, dass auf Ihr Hero-Bild kein Lazy Loading angewendet wird. Hero-Bilder sollten immer eager geladen werden.

Viele Websites, insbesondere WordPress-Websites, verwenden irgendeine Art von WordPress Pagespeed-Plugin wie WP Rocket oder WP Core Web Vitals. Diese Plugins leisten normalerweise hervorragende Arbeit bei der Beschleunigung langsamer Websites, aber sie können Dummheit nicht reparieren :-)

Diese Plugins werden Bilder lazy loaden, die als gute Kandidaten für Lazy Loading erscheinen. Wenn das Hero-Bild kein Eager-Bild ist, werden diese Plugins wahrscheinlich auch das Hero-Bild lazy loaden.

Dies wird im besten Fall eine kleine Verzögerung in den LCP-Metriken verursachen. Im schlimmsten Fall, besonders wenn JavaScript-basiertes Lazy Loading aktiviert ist, wird es eine größere Verzögerung verursachen. Laut dem 2025 Web Almanac laden etwa 17 % der Seiten ihr LCP-Bild per Lazy Loading. Das sind 17 % der Websites, die ihren LCP aktiv verschlechtern. Wenn Lighthouse Sie davor warnt, lesen Sie, wie Sie die Warnung über das per Lazy Loading geladene LCP-Bild beheben können.

Bilder eager laden zu lassen, ist einfach. Fügen Sie einfach loading="eager" zum Bild hinzu. Beachten Sie, dass eager eigentlich der Standard des Browsers ist. Das Weglassen des loading-Attributs hat denselben Effekt. Das eigentliche Ziel ist es sicherzustellen, dass das Hero-Bild NICHT loading="lazy" hat. Das explizite Hinzufügen von eager ist dennoch als Absichtserklärung nützlich, besonders auf Websites, wo ein CMS oder Plugin Lazy Loading automatisch anwenden könnte.

<img src="hero.webp" loading="eager" fetchpriority="high" width="800" height="400">

7. Vermeiden Sie durch das Hero-Bild verursachte Layout Shifts

Ein weiteres häufiges Problem, das ich bei Hero-Bannern und Hero-Bildern sehe, ist, dass sie einen massiven Layout Shift verursachen. Diese Layout Shifts können aus verschiedenen Gründen auftreten.

• Das Hero-Element wird mit JavaScript erstellt. Einige Hero-Plugins und Page Builder wie Elementor sind dafür bekannt, sich auf JavaScript zu verlassen, um den Hero-Content zu rendern. Obwohl nichts gegen JavaScript spricht, stellen Sie sicher, dass das Hero-Element ohne JavaScript genauso gerendert wird.
• Die Schriftarten im Hero-Element verursachen einen Layout Shift. Das Hero-Element enthält normalerweise etwas großen Text mit einem Call-to-Action und einer Tagline. Stellen Sie sicher, dass diese großen Schriftarten keinen Layout Shift verursachen.
• Fehlende Bildabmessungen. Wenn das Hero-Bild kein Cover-Bild ist (entweder als Hintergrundbild oder als absolut positioniertes Bild), werden fehlende Bildabmessungen (Breite und Höhe) mit Sicherheit einen großen Layout Shift verursachen.

Während die Behebung des Layout Shifts den Largest Contentful Paint nicht verbessert, wird sie die Core Web Vitals der Seite verbessern. Für weitere Informationen darüber, wie Sie den Layout Shift beheben können, lesen Sie bitte den ausführlichen Leitfaden zur Behebung des Cumulative Layout Shift!

8. Verwenden Sie 2-Stage-Loading, um die Hero Core Web Vitals zu verbessern

2-Stage-Loading ist eine schnelle Technik, die wir auf alle unsere Bilder anwenden. Wir stellen zuerst ein Bild mit extrem niedriger Qualität bereit, von dem erwartet wird, dass es viel früher heruntergeladen wird als das größere Bild mit hoher Qualität. Sobald das Bild mit niedriger Qualität auf dem Bildschirm gezeichnet wurde, wird der Browser dazu veranlasst, das Bild mit hoher Qualität im Hintergrund abzurufen. Sobald das Bild mit hoher Qualität heruntergeladen wurde, wird das Bild mit niedriger Qualität durch das Bild mit hoher Qualität ersetzt.

Es gibt 3 Methoden für das 2-Stage-Loading. Die ersten beiden sind Methoden, die Sie in Betracht ziehen sollten. Die letzte ist eine, die Sie nicht anwenden sollten.

1. Volles 2-Stage-Loading

Beim vollen 2-Stage-Loading hat das erste Bild mit niedriger Qualität genau dieselben Abmessungen (Breite und Höhe) wie das originale Bild mit hoher Qualität.

Das Ergebnis dieses 2-Stage-Loadings ist, dass das Largest Contentful Paint Element das viel schnellere Bild mit niedriger Qualität sein wird (welches dann lazily ausgetauscht wird). Das Austauschen des Bildes wird alles so schnell passieren, dass ein gewöhnlicher Besucher es wahrscheinlich nie bemerken wird. Das Ergebnis dieser Technik ist, dass der LCP viel früher gezeichnet wird, die Seite viel früher 'bereit' erscheint, was zu einer weitaus besseren User Experience und verbesserten Core Web Vitals beiträgt.

2. Kleinere Inline-Platzhalter

Der kleinere Platzhalter ist eine ziemlich coole Technik, die einen Nachteil hat: Er verbessert nicht die Core Web Vitals. Es ist dennoch eine großartige Technik, weil sie die User Experience verbessert.

Die Grundidee ist dieselbe wie bei der 2-Stage-Loading-Technik, aber anstelle eines Bildes mit niedriger Qualität und denselben Abmessungen wird ein viel kleineres Bild mit kleineren Abmessungen inline über eine Daten-URI platziert. Das endgültige Hero-Bild, welches das Largest Contentful Paint Bild sein wird, wird weiterhin im Hintergrund heruntergeladen. Dieser Trick wird den Largest Contentful Paint nicht verbessern, aber die Seite noch schneller bereit erscheinen lassen als die 2-Stage-Loading-Technik.

3. Transparente Platzhalter

Eine gängige 2-Stage-Loading-Technik und eine Methode, den Browser dazu zu bringen, eine frühe Largest Contentful Paint Metrik zu senden, ist die Verwendung von transparenten SVG-Elementen. Diese Elemente sind klein und können inline platziert werden, genau wie der kleinere Inline-Platzhalter.

Die Verwendung eines Inline-SVG-Elements und dessen Austausch ist eigentlich eine Lazy Loading Technik. Der Vorteil dieser Technik ist, dass sie browserübergreifend funktioniert. 

Lazy Loading sollte natürlich nur auf Elemente außerhalb des Viewports angewendet werden. In diesem Fall verzögert das transparente SVG-Element nur das echte Hero-Bild und bietet Ihrem Besucher keinen Mehrwert. Während die Paint-Metriken zwar großartig sein mögen, wird sich die UX der Seite tatsächlich verschlechtern.

Deshalb sollte das Hero-Bild immer eager geladen werden, ohne Tricks, die eine schlechte UX verursachen.

Alles zusammenfügen

So sieht ein optimiertes Hero-Bild aus, wenn Sie Preloading, fetchpriority, responsive images und Eager Loading kombinieren:

<!-- In the <head> -->
<link rel="preload" as="image" href="hero-800.webp" fetchpriority="high"
  imagesrcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  imagesizes="100vw">

<!-- In the <body> -->
<img src="hero-800.webp"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="100vw"
  width="1600" height="900"
  alt="Descriptive alt text">

Nachdem Sie Änderungen vorgenommen haben, überprüfen Sie die Verbesserung mit Real User Monitoring. Lighthouse gibt Ihnen einen Lab-Schnappschuss, aber Google rankt basierend auf echten Nutzer-Felddaten, die über die letzten 28 Tage gesammelt wurden.