Was sind Core Web Vitals?
Core Web Vitals sind von Google definierte Kennzahlen zur Messung der User Experience einer Website. Sie bewerten vor allem, wie schnell eine Seite lädt, wie reaktionsschnell sie ist und wie stabil das Layout wirkt. Seit 2021 fließen die Core Web Vitals als Ranking-Faktor in die Google-Suche ein und sind damit ein wichtiger Bestandteil der technischen Suchmaschinenoptimierung (SEO).
Was sind die drei Kernmetriken der Core Web Vitals?
Die Core Web Vitals bestehen aktuell aus drei Hauptmetriken, die jeweils einen anderen Aspekt der Nutzererfahrung abbilden.
LCP (Largest Contentful Paint) misst die Ladezeit, also wann der größte sichtbare Inhaltselement im Viewport geladen und dargestellt ist. Werte von bis zu 2,5 Sekunden gelten als gut, bis 4,0 Sekunden als verbesserungsbedürftig, darüber als schlecht. Zur Optimierung tragen vor allem eine bessere Server-Reaktionszeit, das Eliminieren render-blockierender Ressourcen (z. B. große CSS- oder JS-Dateien im Head), optimierte Bilder (Lazy Loading, moderne Formate wie WebP/AVIF) und der Einsatz eines CDN bei.
INP (Interaction to Next Paint) bewertet die Interaktivität, also wie schnell eine Seite auf Nutzerinteraktionen reagiert – etwa Klicks, Taps oder Tastatureingaben. Ein Wert von bis zu 200 Millisekunden gilt als gut, bis 500 Millisekunden als verbesserungsbedürftig, darüber als schlecht. Verbesserungen erreicht man, indem lange JavaScript-Aufgaben (Long Tasks) aufgebrochen, der Main Thread entlastet, Skripte optimiert und Event-Handler effizient implementiert werden. Wichtig: INP ersetzt seit März 2024 die frühere Metrik FID (First Input Delay).
CLS (Cumulative Layout Shift) misst die visuelle Stabilität, also wie stark sich Inhalte während des Ladens verschieben. Ein Score bis 0,1 gilt als gut, bis 0,25 als verbesserungsbedürftig, darüber als schlecht. Häufige Ursachen sind nachladende Bilder ohne feste Dimensionen, dynamische Inhalte ohne reservierten Platz oder Fonts, die spät geladen werden. Entsprechend helfen explizite Breiten- und Höhenangaben für Bilder, Platzhalter für dynamische Elemente, der Einsatz von font-display: swap und reservierte Flächen für Ads, um unerwartete Layout-Verschiebungen zu vermeiden.
Messung der Core Web Vitals
Für die Bewertung und Optimierung der Core Web Vitals unterscheidet man zwischen Field Data (echte Nutzerdaten) und Lab Data (synthetische Messungen). Field Data stammen beispielsweise aus dem Chrome User Experience Report (CrUX) und werden in der Google Search Console sowie im Bereich „Field Data“ von PageSpeed Insights sichtbar. Sie zeigen, wie echte Nutzern die Seite in der Praxis erleben. Lab Data werden in kontrollierten Umgebungen mit Tools wie Lighthouse, WebPageTest oder den Chrome DevTools erhoben und eignen sich besonders gut für die Analyse und das Debugging einzelner Seiten oder Szenarien.
Optimierung in TYPO3-Projekten
Auch in TYPO3 lassen sich gezielt Maßnahmen zur Verbesserung der Core Web Vitals umsetzen. Für einen besseren LCP kann man etwa Bilder standardmäßig lazy laden (mit Ausnahme von Above-the-Fold-Inhalten) und kritische CSS-Anteile inline ins HTML einbetten, um das Rendern zu beschleunigen. Um CLS zu verhindern, ist es wichtig, Bilddimensionen im Template explizit anzugeben, etwa über <f:image> mit festen width- und height-Werten, damit der Browser von Beginn an den benötigten Platz reserviert. Für ein gutes INP sollten JavaScript-Dateien möglichst mit defer oder async geladen, render-blockierende Skripte vermieden und Event-Handler z. B. durch Debouncing entlastet werden.
Wichtige Tools für Core Web Vitals
Zur Analyse und kontinuierlichen Überwachung stehen verschiedene Tools zur Verfügung. PageSpeed Insights bietet einen schnellen Überblick inklusive konkreter Handlungsempfehlungen. Lighthouse liefert eine detaillierte technische Analyse mit Performance-, Accessibility- und Best-Practice-Checks. Die Web Vitals Extension für Chrome erlaubt eine direkte Messung im Browser während des Surfens. Über die Google Search Console können Website-Betreiber:innen die Entwicklung der Core Web Vitals über längere Zeiträume verfolgen und sehen, welche URLs besonders optimierungsbedürftig sind. So lassen sich Performance-Verbesserungen gezielt planen, um sowohl Nutzererlebnis als auch SEO-Ranking nachhaltig zu stärken.