Core Web Vitals beschreiben drei Aspekte des Nutzererlebnisses: Laden, Interaktion und visuelle Stabilität. Sie ersetzen weder relevante Inhalte noch ein verständliches Angebot. Google verwendet sie in seinen Rankingsystemen, weist aber ausdrücklich darauf hin, dass gute Werte keine Spitzenposition garantieren. Die Einordnung von Google zur Page Experience ist dafür die maßgebliche Grundlage.
Welche Werte gelten als gut?
- LCP — Largest Contentful Paint: Das größte sichtbare Inhaltselement erscheint innerhalb von höchstens 2,5 Sekunden.
- INP — Interaction to Next Paint: Die Reaktion auf Interaktionen dauert höchstens 200 Millisekunden.
- CLS — Cumulative Layout Shift: Der Wert für unerwartete Layoutverschiebungen liegt bei höchstens 0,1.
Diese Grenzen gelten am 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgeräten und Desktop. Ein einzelner schneller Test bestätigt sie noch nicht. Die Definitionen und Messregeln erläutert Googles Web-Vitals-Dokumentation.
Erst klären: Felddaten oder Labortest?
Öffnen Sie eine konkrete URL in PageSpeed Insights. Falls ausreichend Daten vorliegen, sehen Sie Erfahrungen echter Chrome-Nutzer aus dem Chrome UX Report. Prüfen Sie, ob sich diese auf die einzelne URL oder die gesamte Origin beziehen. Fehlen Felddaten, ist das kein Beleg für gute oder schlechte Performance.
Der anschließende Lighthouse-Test ist eine Simulation unter festgelegten Bedingungen. Er hilft beim Finden von Ursachen. Sein Performance-Score ist kein Google-Rankingwert. Ein gewöhnlicher Seitenlade-Test misst außerdem keinen echten INP; Total Blocking Time kann Hinweise auf blockierendes JavaScript geben. Wiederholen Sie Labortests unter vergleichbaren Bedingungen und dokumentieren Sie Gerät, URL und Messzeitpunkt.
LCP verbessern: den tatsächlichen Hauptinhalt finden
Ermitteln Sie zuerst das LCP-Element. Bei einer bildbetonten Startseite kann es das Hero-Bild sein, bei einem Artikel eine große Textfläche. Davon hängt ab, ob Bildtransfer, Serverantwort, Schrift oder Rendering im Mittelpunkt stehen.
- Passende Bilder ausliefern: Größe und Format am sichtbaren Bildbereich ausrichten; mit
srcsetundsizesunnötig große Downloads vermeiden. - Das LCP-Bild früh laden: Ein sichtbares Hero-Bild nicht mit Lazy Loading verzögern. Hohe Ladepriorität gezielt einsetzen.
- Serverantwort prüfen: Langsame HTML-Auslieferung, Weiterleitungsketten und fehlendes Caching untersuchen.
- Blockierende Ressourcen prüfen: Nur tatsächlich benötigte Schriften vorladen. Kritisches CSS nicht durch ungetestetes asynchrones Laden beschädigen.
Ein Formatwechsel allein garantiert keine feste Verbesserung. Entscheidend ist, welcher Teil des Ladevorgangs auf dieser Seite Zeit kostet.
INP verbessern: echte Bedienung testen
Öffnen Sie das mobile Menü, wechseln Sie Filter und füllen Sie ein Formular aus. Achten Sie auf verzögerte Rückmeldungen. Lange JavaScript-Aufgaben können die Oberfläche blockieren; aufwendige Berechnungen, große DOM-Änderungen und Drittanbieter-Skripte sind mögliche Ursachen.
Teilen Sie lange Aufgaben auf, reduzieren Sie unnötige Event-Handler und prüfen Sie Widgets auf ihren tatsächlichen Nutzen. defer verändert den Lade- und Ausführungszeitpunkt eines Skripts, beseitigt aber keine teuren Berechnungen. Abhängigkeiten zwischen Skripten müssen erhalten bleiben.
CLS verbessern: Platz vor dem Laden reservieren
Bilder und Videos brauchen passende Abmessungen oder ein definiertes Seitenverhältnis. Reservieren Sie auch für nachladende Einbettungen den benötigten Raum. Prüfen Sie Schriftwechsel und dynamische Hinweise: Ein Banner darf beim Erscheinen nicht unerwartet den bereits gelesenen Inhalt verschieben.
Lazy Loading eignet sich für Bilder unterhalb des sichtbaren Bereichs. Es ersetzt die Reservierung von Platz nicht. Gerade auf kleinen Displays werden fehlende Abmessungen sichtbar.
Änderungen nachvollziehbar überprüfen
Halten Sie Engpass, Maßnahme und Ergebnis in einem kurzen Messprotokoll fest. Prüfen Sie neben der betroffenen Seite auch Navigation, Kontaktformular und weitere Seitentypen. Felddaten reagieren zeitversetzt; ein besserer Labortest und ein unveränderter Feldbericht können deshalb gleichzeitig korrekt sein.
Bei unserem responsiven Webdesign gehört diese Prüfung zur technischen Arbeit. Für eine größere Überarbeitung hilft die Relaunch-Checkliste; den Zusammenhang mit Inhalten und Seitenstruktur erklärt der Beitrag zu SEO und Webdesign.
Häufig gestellte Fragen
Sind gute Core Web Vitals eine Rankinggarantie?
Nein. Google berücksichtigt viele Signale. Gute Core Web Vitals unterstützen die Nutzererfahrung, garantieren aber weder Indexierung noch eine bestimmte Position.
Warum unterscheiden sich Lighthouse und Search Console?
Lighthouse untersucht einen simulierten Testlauf. Der Core-Web-Vitals-Bericht der Search Console basiert auf Erfahrungen echter Nutzer. Gerät, Netzwerk, Zeitraum und betrachtete URL-Gruppe können unterschiedlich sein.
Soll das Hero-Bild Lazy Loading verwenden?
Ein sofort sichtbares Bild, das zum größten Inhaltselement werden kann, sollte nicht durch Lazy Loading verzögert werden. Bilder weiter unten können dagegen verzögert geladen werden.
Inhaltlich überarbeitet am .