Wer Core Web Vitals verbessern will, stößt schnell auf drei Abkürzungen, einen Haufen Grenzwerte und Tools, die sich gegenseitig zu widersprechen scheinen. PageSpeed Insights zeigt 45 Punkte, die Search Console meldet „Gut“, und der Kunde fragt, warum seine Seite trotzdem „rot“ ist. Dieser Artikel sortiert das: was die drei Metriken messen, welche Daten zählen und welche Maßnahmen tatsächlich etwas bewegen.
Die Core Web Vitals sind Googles Versuch, Nutzererfahrung messbar zu machen. Sie sind ein Rankingsignal unter vielen und kein Wundermittel. Wichtiger ist oft der direkte Effekt: Schnelle, stabile Seiten verlieren weniger Besucher. Für Webdesign-Freelancer sind sie außerdem ein gutes Argument im Kundengespräch, weil sie Qualität objektiv sichtbar machen.
Was sind die Core Web Vitals?
Aktuell bestehen die Core Web Vitals aus drei Metriken:
| Metrik | Misst | Gut | Verbesserungswürdig | Schlecht |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ladegeschwindigkeit des größten sichtbaren Elements | bis 2,5 s | 2,5–4 s | über 4 s |
| INP (Interaction to Next Paint) | Reaktionszeit auf Klicks, Tipps und Tastatureingaben | bis 200 ms | 200–500 ms | über 500 ms |
| CLS (Cumulative Layout Shift) | Visuelle Stabilität, also unerwartetes Verrutschen von Inhalten | bis 0,1 | 0,1–0,25 | über 0,25 |
Bewertet wird jeweils das 75. Perzentil der echten Seitenaufrufe. Eine Seite besteht die Prüfung also, wenn mindestens 75 Prozent der Besuche die Grenzwerte einhalten, getrennt nach Mobil und Desktop.
INP hat im März 2024 FID ersetzt. First Input Delay hat nur die Verzögerung bis zur Verarbeitung der ersten Interaktion gemessen. INP betrachtet dagegen alle Interaktionen während eines Besuchs und die komplette Zeit bis zur nächsten sichtbaren Aktualisierung. Viele Seiten, die bei FID problemlos grün waren, haben bei INP plötzlich Probleme, vor allem solche mit viel JavaScript.
Die offiziellen Definitionen findest du in der Google-Dokumentation zu Core Web Vitals.
Felddaten vs. Labordaten: Welche Werte zählen?
Das ist der häufigste Grund für Verwirrung. Es gibt zwei Arten von Messwerten:
- Felddaten stammen von echten Chrome-Nutzern und werden im Chrome User Experience Report (CrUX) über einen gleitenden Zeitraum von 28 Tagen gesammelt. Nur diese Daten fließen in Googles Bewertung ein. Du siehst sie in der Search Console und oben in PageSpeed Insights, sofern die Seite genug Traffic hat.
- Labordaten entstehen in einer simulierten Umgebung, etwa mit Lighthouse. Sie sind reproduzierbar und ideal zum Debuggen, bilden aber nicht das echte Nutzerverhalten ab. Lighthouse kann INP gar nicht direkt messen, weil es keine Interaktionen gibt. Als Näherung dient Total Blocking Time (TBT).
Der Lighthouse-Score von 0 bis 100 ist also kein Core-Web-Vitals-Wert. Eine Seite mit 60 Punkten kann in den Felddaten alle drei Metriken bestehen und umgekehrt. Für kleine Websites ohne ausreichende CrUX-Daten bleibt dir nur die Labormessung plus eigenes Real User Monitoring, etwa mit der Open-Source-Bibliothek web-vitals.
Weil Felddaten über 28 Tage gemittelt werden, siehst du Verbesserungen erst mit Verzögerung. Plane das bei Kundenprojekten ein und kommuniziere es vorher.
LCP verbessern: Das Hauptelement schneller laden
Das LCP-Element ist meist ein Hero-Bild, ein Slider-Bild oder eine große Überschrift. Welches es ist, zeigt dir PageSpeed Insights unter „Largest Contentful Paint-Element“ oder das Performance-Panel der Chrome DevTools.
LCP lässt sich in vier Teilzeiten zerlegen: Serverantwort (TTFB), Verzögerung bis zum Start des Ladens, Ladezeit der Ressource und Verzögerung bis zum Rendern. Schau zuerst, welcher Anteil dominiert.
Typische Maßnahmen:
- Serverantwort beschleunigen: Page Caching, ein Hosting mit ausreichend Ressourcen, ein CDN für statische Inhalte. Eine TTFB deutlich über 800 ms macht einen guten LCP schwer.
- LCP-Bild früh entdecken lassen: Das Bild gehört als echtes
<img>ins HTML, nicht als CSS-Hintergrund oder per JavaScript nachgeladen. - Kein Lazy Loading für das LCP-Bild:
loading="lazy"auf dem Hero-Bild ist einer der häufigsten Fehler. Stattdessenfetchpriority="high"setzen. - Bildgröße anpassen: Moderne Formate wie WebP oder AVIF, passende Abmessungen über
srcsetundsizes. Ein 3.000 Pixel breites JPEG auf einem Smartphone kostet Sekunden. - Render-blockierende Ressourcen reduzieren: Kritisches CSS inline, restliches CSS schlank halten, JavaScript mit
deferladen. - Schriften im Griff behalten: Wenn eine Überschrift das LCP-Element ist, verzögern Webfonts den Wert. Wichtige Fonts lokal hosten, per
preloadladen undfont-display: swapnutzen. Wie du Schriften selbst hostest, steht in Google Fonts lokal laden.
Für WordPress-Seiten findest du viele dieser Punkte ausführlich in WordPress schneller machen.
Was verschlechtert den INP-Wert?
INP misst, wie lange es von einer Interaktion bis zur nächsten sichtbaren Reaktion dauert. Schlechte Werte entstehen fast immer, weil der Hauptthread des Browsers blockiert ist. Solange dort JavaScript läuft, kann der Browser nicht auf Eingaben reagieren.
Häufige Ursachen:
- Große JavaScript-Bundles von Page Buildern, Themes oder Frameworks
- Tracking-, Chat- und Marketing-Skripte von Drittanbietern
- Event-Handler, die bei jedem Klick aufwendige Berechnungen oder DOM-Änderungen auslösen
- Sehr große DOM-Bäume mit Tausenden Elementen, die bei jeder Änderung neu berechnet werden müssen
- Consent-Banner und Mega-Menüs, die beim Öffnen viel Layoutarbeit verursachen
INP verbessern: Den Hauptthread entlasten
Die Diagnose läuft über die Chrome DevTools. Im Performance-Panel kannst du eine Interaktion aufzeichnen und siehst genau, welche Skripte wie lange laufen. Tasks über 50 ms gelten als „Long Tasks“ und sind die üblichen Verdächtigen.
Konkrete Maßnahmen:
- Unnötiges JavaScript entfernen. Jedes Plugin, jedes Widget, jedes Tracking-Skript kritisch prüfen. Das ist die wirksamste Maßnahme überhaupt.
- Drittanbieter-Skripte später laden. Chat-Widgets oder Video-Einbettungen erst nach einer Nutzeraktion laden (Facade-Pattern).
- Lange Tasks aufteilen. Aufwendige Arbeit in kleinere Häppchen zerlegen und zwischendurch dem Browser Luft lassen, etwa mit
setTimeoutoder, wo unterstützt,scheduler.yield(). - Sofort visuelles Feedback geben. Erst den Button-Status ändern, dann die schwere Arbeit erledigen. Der Nutzer sieht eine Reaktion, und der INP-Wert sinkt.
- DOM verkleinern. Weniger verschachtelte Container, keine unsichtbar vorgerenderten Inhalte für alle Breakpoints.
- Layout Thrashing vermeiden. Nicht abwechselnd Layoutwerte lesen und Styles schreiben.
Gerade bei Page-Builder-Seiten ist das Einsparpotenzial groß. Manchmal ist ein schlankeres Theme die ehrlichere Lösung als die zehnte Optimierung.
CLS verbessern: Nichts darf verrutschen
Layout Shifts entstehen, wenn Elemente nachträglich Platz beanspruchen und bestehende Inhalte verschieben. Jeder kennt es: Man will auf einen Link tippen, und plötzlich schiebt sich ein Banner darüber.
Die wichtigsten Gegenmaßnahmen:
- Bilder und Videos mit Abmessungen: Immer
widthundheightangeben oderaspect-ratioim CSS setzen. Dann reserviert der Browser den Platz, bevor das Bild geladen ist. - Platz für dynamische Inhalte reservieren: Werbeflächen, Embeds und Cookie-Hinweise brauchen einen festen Container mit Mindesthöhe, oder sie überlagern den Inhalt, statt ihn zu verschieben.
- Keine Inhalte oberhalb bestehender Inhalte einfügen, außer als direkte Reaktion auf eine Nutzeraktion.
- Webfonts abstimmen: Unterschiedliche Laufweiten zwischen Fallback- und Webfont verschieben Text. Mit
size-adjustund passenden Fallback-Metriken lässt sich das minimieren. - Animationen über
transform: Animationen vontop,heightodermarginverursachen Layout Shifts,transformundopacitynicht.
CLS ist in der Regel die am einfachsten zu behebende Metrik. Wenn hier Werte über 0,1 auftauchen, liegt es meist an zwei oder drei konkreten Elementen.
Core Web Vitals verbessern: Ein Ablauf für Kundenprojekte
Ein strukturiertes Vorgehen spart Zeit und macht deine Arbeit für Kunden nachvollziehbar:
- Ausgangslage dokumentieren: Search-Console-Bericht und PageSpeed Insights für die wichtigsten Seitentypen (Startseite, Leistungsseite, Blogartikel) speichern.
- Nach Vorlagen gruppieren: Probleme betreffen fast immer ein Template, nicht einzelne URLs. Die Search Console gruppiert ähnliche Seiten bereits.
- Pro Metrik die Hauptursache finden: LCP-Element identifizieren, Long Tasks aufzeichnen, Layout-Shift-Quellen im Performance-Panel markieren.
- Maßnahmen nach Aufwand und Wirkung sortieren: Lazy Loading am Hero-Bild entfernen dauert Minuten, ein Theme-Wechsel Wochen.
- Umsetzen und im Labor prüfen: Vorher-nachher-Vergleich mit Lighthouse unter gleichen Bedingungen.
- Felddaten abwarten: Nach rund vier Wochen den Core-Web-Vitals-Bericht erneut prüfen und dort die Validierung der Korrektur starten.
Wenn du Websites grundsätzlich prüfst, gehören Core Web Vitals als fester Punkt in deinen Website SEO Check. Und wer gerade eine neue Seite plant, sollte Performance-Budgets gleich im Konzept festlegen, wie im Artikel zum Webdesign-Prozess beschrieben.
Häufige Missverständnisse
- „100 Punkte in Lighthouse sind Pflicht.“ Nein. Entscheidend sind die Felddaten. Ein Score von 85 mit guten Felddaten ist völlig in Ordnung.
- „Grüne Core Web Vitals bringen Platz 1.“ Nein. Relevanz und Inhalt bleiben wichtiger. Bei vergleichbaren Inhalten kann gute Nutzererfahrung aber den Unterschied machen.
- „Desktop ist gut, also passt es.“ Mobil ist meist das Problem, weil die Geräte langsamer sind. Prüfe immer beide Auswertungen.
- „Ein Caching-Plugin löst alles.“ Caching hilft bei LCP, aber kaum bei INP und gar nicht bei CLS.
Fazit: Core Web Vitals gezielt statt blind optimieren
Core Web Vitals verbessern heißt nicht, einem Score hinterherzujagen, sondern die tatsächliche Ursache jeder Metrik zu finden. Beim LCP ist es meist das Hero-Bild oder die Serverantwort, beim INP zu viel JavaScript, beim CLS fehlende Platzhalter. Wer diese drei Muster kennt, löst die meisten Probleme mit überschaubarem Aufwand und kann Kunden die Verbesserung mit echten Daten belegen.
Deine Website ist langsam und du willst das Problem von jemandem lösen lassen, der sich damit auskennt? Im Freelancer-Verzeichnis findest du Webdesigner mit Schwerpunkt Performance und SEO. Und wenn du selbst Freelancer mit diesem Know-how bist: kostenlos eintragen.