Was sind Core Web Vitals?
Core Web Vitals sind drei von Google definierte Metriken zur Messung der Nutzererfahrung auf Webseiten. Seit Mai 2021 fließen sie als Ranking-Faktor in die Google-Suche ein. Sie messen:
- LCP (Largest Contentful Paint) — Ladezeit des größten sichtbaren Elements
- INP (Interaction to Next Paint) — Reaktionszeit auf Nutzerinteraktionen (ab 2024, ersetzt FID)
- CLS (Cumulative Layout Shift) — Visuelle Stabilität beim Laden
Bilder beeinflussen LCP und CLS direkt — das macht Bildoptimierung zum größten einzelnen Hebel für Core Web Vitals.
LCP verbessern (Ziel: unter 2,5 Sekunden)
LCP misst die Zeit bis das größte sichtbare Element im Viewport geladen ist. Das ist auf den meisten Websites ein Hero-Bild oder ein großer Header-Text.
Maßnahme 1: LCP-Bild identifizieren
Chrome DevTools → Lighthouse → Performance → LCP-Element anzeigen. Oder direkt mit PageSpeed Insights prüfen.
Maßnahme 2: LCP-Bild massiv komprimieren
Das LCP-Bild sollte für Webdarstellung optimiert sein. Zielgröße: unter 100 KB für gute LCP-Werte. Ein 2 MB Hero-Bild ist ein LCP-Killer. Komprimierung auf WebP mit 80% Qualität ist oft die einfachste Maßnahme.
Maßnahme 3: LCP-Bild priorisieren
Browser laden Ressourcen standardmäßig in Dokumentreihenfolge. Das LCP-Bild sollte höchste Priorität bekommen:
<link rel="preload" as="image" href="hero.webp">im<head>- oder:
fetchpriority="high"Attribut am<img>-Tag - Niemals
loading="lazy"für das LCP-Bild!
Maßnahme 4: Richtige Bildformate
WebP statt JPG spart 25–35% — das reduziert die Übertragungszeit direkt. AVIF spart nochmals 20–30%.
Maßnahme 5: Richtige Auflösung
Ein 5000px breites Foto als Hero-Bild ist Ressourcenverschwendung. Skaliere auf die maximale Anzeigebreite × Device Pixel Ratio (z.B. 1920 × 2 = 3840px für Retina-Displays — aber auch das ist oft zu groß). Für die meisten Websites reicht 1920px Breite.
CLS verbessern (Ziel: unter 0,1)
CLS misst wie stark sich sichtbare Elemente beim Laden verschieben. Bilder ohne definierte Größe sind die häufigste CLS-Ursache: Der Browser reserviert keinen Platz, bis das Bild geladen ist, und verschiebt dann den gesamten nachfolgenden Content.
Maßnahme 1: width + height immer angeben
Das einfachste und wirkungsvollste CLS-Fix: Immer width und height Attribute an <img>-Elementen angeben. Browser berechnen dann das Seitenverhältnis und reservieren den Platz vor dem Laden.
Maßnahme 2: aspect-ratio in CSS
Für responsive Bilder wo feste px-Werte nicht passen: aspect-ratio: 16 / 9 in CSS definieren. Kombiniert mit width: 100% hält das den Platz korrekt frei.
Maßnahme 3: Blur Placeholder
Zeige einen Platzhalter (einfarbig, verschwommene Vorschau oder Skeleton-UI) während das Bild lädt. Verhindert CLS und verbessert die wahrgenommene Ladegeschwindigkeit. Next.js Image Component bietet placeholder="blur" out of the box.
Messung und Monitoring
| Tool | Verwendung |
|---|---|
| Google PageSpeed Insights | Schneller CWV-Check für beliebige URL |
| Chrome DevTools → Lighthouse | Lokale Messung mit Details |
| Google Search Console | Echte Nutzerdaten (Field Data) für deine Site |
| web.dev/measure | Detaillierte Analyse mit Verbesserungsvorschlägen |
| Chrome UX Report (CrUX) | Aggregierte echte Nutzerdaten |
Priorisierung: Was zuerst?
| Maßnahme | Impact LCP | Impact CLS | Aufwand |
|---|---|---|---|
| LCP-Bild komprimieren | ⭐⭐⭐⭐⭐ | — | Niedrig |
| width + height setzen | — | ⭐⭐⭐⭐⭐ | Sehr niedrig |
| WebP/AVIF format | ⭐⭐⭐⭐ | — | Niedrig |
| LCP-Bild preloaden | ⭐⭐⭐⭐ | — | Sehr niedrig |
| Lazy Loading aktivieren | ⭐⭐⭐ | — | Sehr niedrig |
| Responsive srcset | ⭐⭐⭐ | — | Mittel |
| Blur placeholder | — | ⭐⭐⭐ | Mittel |
📊 Schnelltest: Gib deine URL bei pagespeed.web.dev ein. PageSpeed Insights zeigt sofort welche Bilder komprimiert werden sollten und wie viel das bringen würde.
Fazit
Für die meisten Websites sind unkomprimierte Bilder ohne Größenangaben der Hauptgrund für schlechte Core Web Vitals. Die Kombination aus Bildkomprimierung (LCP), WebP-Format (LCP) und width/height-Attributen (CLS) liefert oft 80% der möglichen Verbesserung bei minimalem Aufwand. Starte mit dem größten Bild auf deiner Startseite — das ist fast immer das LCP-Element.