Core Web Vitals sind eine Reihe von Google definierten Metriken zur Messung der Nutzererfahrung einer Webseite. Seit 2021 sind diese Metriken Teil der Ranking-Signale von Google — was bedeutet, dass ein schlechter Score Ihr SEO beeinträchtigen kann. Bilder sind einer der Hauptfaktoren, die diese Scores beeinflussen — sowohl positiv als auch negativ.
Die drei Core Web Vitals Metriken
Google misst drei Dimensionen der Nutzererfahrung über Core Web Vitals:
| Metrik | Was sie misst | Schwellenwert "Gut" | Schwellenwert "Verbesserungsbedarf" |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Ladezeit des größten sichtbaren Elements | ≤ 2,5 Sekunden | 2,5 bis 4 Sekunden |
| INP (Interaction to Next Paint) | Reaktionsfähigkeit auf Nutzerinteraktionen | ≤ 200 ms | 200 bis 500 ms |
| CLS (Cumulative Layout Shift) | Visuelle Stabilität des Layouts | ≤ 0,1 | 0,1 bis 0,25 |
LCP und Bilder: die direkte Verbindung
Der LCP (Largest Contentful Paint) misst die Zeit, die benötigt wird, um das größte sichtbare Element im Browser-Viewport anzuzeigen. Bei der großen Mehrheit der Webseiten ist dieses Element ein Bild — Hero-Bild, Hauptbanner, Produktfoto. Ein schweres oder schlecht geladenes Bild ist daher direkt für einen schlechten LCP-Score verantwortlich.
Um den bildbezogenen LCP zu verbessern:
- Moderne Formate verwenden: WebP und AVIF sind bei gleicher visueller Qualität deutlich leichter als JPEG und PNG
- Das LCP-Bild vorladen: fügen Sie einen <link rel="preload">-Tag im <head> ein, um den Browser zu zwingen, das Hero-Bild vorrangig zu laden
- Lazy Loading beim LCP-Bild vermeiden: wenden Sie niemals loading="lazy" auf das Bild an, das Ihr LCP sein wird — dies verzögert genau das, was Google misst
- Bilder von einem CDN ausliefern: die geografische Nähe des Servers reduziert die Time to First Byte (TTFB), die sich direkt auf den LCP auswirkt
- Bilder korrekt dimensionieren: servieren Sie niemals ein 3000px breites Bild für eine 800px-Anzeige
Gut zu wissen: Sie können über PageSpeed Insights oder Chrome DevTools (Tab Leistung → auf den LCP-Marker klicken) feststellen, welches Bild Ihr LCP darstellt. Diese Identifikation ist der unverzichtbare erste Schritt vor jeder Optimierung.
CLS und Bilder: Layout-Verschiebungen
Der CLS (Cumulative Layout Shift) misst unerwartete Layout-Verschiebungen während des Ladens. Bilder ohne definierte Abmessungen sind eine der häufigsten Ursachen für einen schlechten CLS-Score: Der Browser kennt die Bildgröße nicht, bevor es geladen wird, was beim Erscheinen des Bildes ein Seitenspringen verursacht.
Die Lösung ist einfach und universell: immer width- und height-Attribute auf img-Tags angeben. So kann der Browser den genauen benötigten Platz reservieren, bevor das Bild heruntergeladen wird.
INP und Bilder: ein indirekter Einfluss
Der INP (Interaction to Next Paint) misst die Reaktionsfähigkeit der Seite auf Nutzerinteraktionen (Klicks, Eingaben). Bilder beeinflussen INP nicht direkt, aber sehr schwere Bilder, die den Haupt-Thread des Browsers monopolisieren, können diese Metrik indirekt verschlechtern, indem sie die JavaScript-Ereignisverarbeitung blockieren.
Das Dekodieren umfangreicher Bilder (PNG mit mehreren Megabyte, hochauflösende TIFFs) kann Blockierungen des Haupt-Threads verursachen. Das Attribut decoding="async" ermöglicht es, diese Dekodierung zu verzögern, um Interaktionen nicht zu blockieren.
Best Practices für Bilder bei Core Web Vitals
- Format: verwenden Sie WebP oder AVIF für alle Inhaltsbilder
- Abmessungen: geben Sie immer width und height auf allen img-Tags an
- Lazy Loading: verwenden Sie loading="lazy" für alle Bilder außerhalb des Sichtbereichs, außer dem LCP-Bild
- Preload: laden Sie nur das LCP-Bild mit <link rel="preload" as="image"> vor
- Responsive Bilder: verwenden Sie das srcset-Attribut, um die passende Größe für jede Bildschirmauflösung zu liefern
- Komprimierung: komprimieren Sie alle Bilder mit einem Tool wie Squoosh, Sharp oder ImageMagick vor dem Hochladen
- CDN: hosten Sie Ihre Bilder auf einem CDN, um die geografische Ladelatenz zu reduzieren
Gut zu wissen: Google PageSpeed Insights und Lighthouse sind die Referenztools zur Messung Ihrer Core Web Vitals und zur Identifikation problematischer Bilder. Die Google Search Console bietet außerdem einen Core Web Vitals-Bericht basierend auf echten Besucherdaten (CrUX — Chrome User Experience Report), der für die Beurteilung der tatsächlichen Nutzererfahrung zuverlässiger ist als Labortests.