Drei Sekunden. So lange wartet ein durchschnittlicher Nutzer, bevor er eine langsame Website verlässt. Google straft langsamen Seiten mit schlechteren Rankings ab. Und die Core Web Vitals sind seit 2021 ein offizieller Ranking-Faktor.
Kurz: Wer seine Performance ignoriert, verliert Sichtbarkeit, Traffic und Umsatz.
Dieser Leitfaden zeigt dir, wie du die Core Web Vitals deiner Website misst, gezielt verbesserst und dauerhaft überwachst – ohne Benchmark-Chaos und ohne teure Agentur.
Was sind die Core Web Vitals?
Die Core Web Vitals sind drei Kennzahlen, die die Nutzererfahrung einer Website aus Sicht des Besuchers messen:
| Metrik | Was sie misst | Guter Wert | Schlechter Wert |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Ladezeit des größten sichtbaren Elements | ≤ 2,5 s | > 4,0 s |
| INP (Interaction to Next Paint) | Reaktionszeit bei Nutzerinteraktionen | ≤ 200 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Visuelle Stabilität / Layout-Sprünge | ≤ 0,1 | > 0,25 |
Wichtig: Google nutzt die Felddaten (echte Nutzerdaten aus Chrome) – nicht die Labordaten aus Lighthouse. Beide Perspektiven sind wertvoll, aber für das Ranking zählt das Field Data.
Schritt 1: Status quo messen
Bevor du optimierst, musst du wissen, wo du stehst. Drei Quellen sind relevant:
Google Search Console
Unter Leistung → Core Web Vitals siehst du, wie viele URLs deiner Domain grün, orange oder rot sind – basierend auf Felddaten.
PageSpeed Insights
Gibt dir Labordaten (Lighthouse) und Felddaten (CrUX) für eine einzelne URL. Ideal für tiefere Analysen.
VitoScore – dein täglicher Performance-Check
Mit VitoScore analysierst du jede Website kostenlos und ohne Anmeldung – Desktop und Mobile gleichzeitig. Du erhältst:
- VitoScore (0–100): Einen einheitlichen Score aus SEO, Performance, Design und Content
- PageSpeed-Metriken: LCP, FCP, TBT, Speed Index – übersichtlich aufbereitet
- Technologie-Erkennung: Welche CMS, Frameworks und Server deine Seite nutzt
- Eco Score: Wie viel CO₂ deine Seite pro Besuch verursacht
Tipp: Lege deine wichtigsten URLs im VitoScore-Monitoring an. So bekommst du bei Performance-Einbrüchen automatisch eine E-Mail – bevor Google es merkt.
Schritt 2: LCP optimieren (Ladezeit)
LCP ist die sichtbarste Metrik – Nutzer bemerken sofort, wenn das Hauptelement nicht lädt. Typische Ursachen und Lösungen:
1. Bilder optimieren
Das häufigste LCP-Element ist ein Bild. Optimiere:
- Format: WebP oder AVIF statt JPEG/PNG – 25–50 % kleinere Dateien
- Dimensionen:
widthundheightsetzen, damit der Browser den Platz reserviert - Lazy Loading: Nutze
loading="lazy"– aber nicht für das LCP-Bild (above the fold) - Responsive:
srcsetundsizesfür passende Auflösungen
<img
src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 1200px"
width="1200"
height="675"
alt="Beschreibung"
fetchpriority="high"
/>2. Server-Antwortzeit reduzieren
TTFB (Time to First Byte) > 800 ms? Dann liegt das Problem serverseitig:
- Caching: Seiten-Cache (Redis, Varnish) oder statische Generierung
- CDN: Statische Assets über ein CDN ausliefern (Cloudflare, Bunny, KeyCDN)
- Hosting: Shared-Hosting mit 2 s TTFB → Wechsel zu performantem Anbieter
3. Render-blocking Ressourcen
CSS und JavaScript blockieren das Rendern, bis sie geladen sind:
- CSS: Kritisches CSS inline im
<head>, Rest asynchron laden - JavaScript:
deferoderasync– niemals render-blocking im<head> - Fonts:
font-display: swapoderfont-display: optional
Schritt 3: INP optimieren (Interaktivität)
INP misst, wie schnell deine Seite auf Klicks, Taps und Tastatureingaben reagiert. Seit März 2024 ersetzt INP die alte FID-Metrik.
Lange Tasks aufbrechen
Jede JavaScript-Aufgabe, die länger als 50 ms dauert, blockiert den Main Thread:
// Statt: alles auf einmal
function processAll(items) {
items.forEach(item => heavyComputation(item));
}
// Besser: in Blöcke aufteilen
async function processChunked(items, chunkSize = 50) {
for (let i = 0; i < items.length; i += chunkSize) {
const chunk = items.slice(i, i + chunkSize);
chunk.forEach(item => heavyComputation(item));
await new Promise(r => requestIdleCallback(r));
}
}Event-Handler schlank halten
- Debounce bei
scroll-,resize- undinput-Events - Passive Listener:
addEventListener('scroll', handler, { passive: true }) - Third-Party-Scripts: Analytics, Chat-Widgets, Tag-Manager – jeder zählt. Asynchron laden oder mit
workerisolieren
Schritt 4: CLS optimieren (Visuelle Stabilität)
Nichts nervt Nutzer mehr als springende Layouts – Text wandert, Buttons verschieben sich, Anzeigen drücken Content nach unten.
Die häufigsten CLS-Verursacher
| Ursache | Lösung |
|---|---|
| Bilder/Videos ohne Dimensionen | width + height setzen |
| Dynamisch nachgeladene Inhalte | Platz reservieren (min-height) |
| Web Fonts verursachen FOIT/FOUT | font-display: swap + Preload |
| Anzeigen (Ads) ohne feste Größe | Container mit fester Höhe |
| Dynamische DOM-Inserts | contain oder min-height |
Bilder mit Dimensionen
Das ist der einfachste CLS-Fix überhaupt:
<!-- Schlecht: Browser weiß nicht, wie groß -->
<img src="bild.webp" alt="..." />
<!-- Gut: Browser reserviert den Platz -->
<img src="bild.webp" width="800" height="450" alt="..." />Fonts vorladen
<link
rel="preload"
href="/fonts/mainschrift.woff2"
as="font"
type="font/woff2"
crossorigin
/>Schritt 5: Erfolge messen & überwachen
Einmal optimieren reicht nicht. Code-Änderungen, Plugin-Updates und neue Inhalte können die Performance jederzeit verschlechtern.
Monitoring statt Einmalmessung
| Ansatz | Nachteil |
|---|---|
| Manuell PageSpeed Insights aufrufen | Vergisst man, keine Historie |
| Lighthouse CI im Build-Prozess | Nur Labordaten, keine echten Nutzer |
| VitoScore Monitoring | Automatische Checks, E-Mail-Alerts, Historie |
Mit dem VitoScore Pro-Plan legst du beliebig viele URLs ins Monitoring. Bei signifikanten Veränderungen bekommst du eine E-Mail – positiv wie negativ.
Historie & Trends
Performance-Scores schwanken. Ein einzelner Wert sagt wenig, ein Trend sagt alles. VitoScore speichert jeden Check und zeigt dir die Entwicklung über Wochen und Monate.
Schnell-Checkliste
- [ ] LCP-Bild: WebP,
fetchpriority="high", keine Lazy-Loading-Attribute - [ ] CSS: Kritisches CSS inline, Rest
defer - [ ] JavaScript: Alles
deferoderasync, Third-Party isoliert - [ ] Bilder:
width+heightgesetzt, WebP/AVIF - [ ] Fonts:
font-display: swap+preload - [ ] Server: TTFB < 800 ms (CDN, Caching, schnelles Hosting)
- [ ] Monitoring: Automatische Performance-Checks eingerichtet
Fazit
Core Web Vitals sind kein "Nice-to-have" – sie sind ein Ranking-Faktor und ein Nutzererfahrungs-KPI. Wer sie misst, versteht, optimiert und überwacht, hat einen klaren Vorteil: bessere Rankings, niedrigere Bounce-Raten und höhere Conversion-Raten.
Der erste Schritt ist einfach: Analysiere deine Website kostenlos mit VitoScore – keine Anmeldung, kein Kreditkarte, sofort Ergebnisse.
