Core Web Vitals: Die wichtigsten Performance-Metriken

Was sind Core Web Vitals?

Core Web Vitals sind drei von Google definierte Metriken, die die Nutzererfahrung einer Website messbar machen. Sie sind seit 2021 offizielle Rankingfaktoren und beeinflussen direkt, wie gut deine Website in den Google-Suchergebnissen abschneidet.

Die drei Core Web Vitals messen jeweils einen anderen Aspekt der Nutzererfahrung:

• LCP (Largest Contentful Paint): Wie schnell wird der Hauptinhalt sichtbar?
• INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Nutzerinteraktionen?
• CLS (Cumulative Layout Shift): Wie stabil bleibt das Layout beim Laden?

Zusammen bilden diese drei Metriken ein umfassendes Bild der User Experience aus technischer Sicht. Google verwendet sie als Teil des Page Experience Signals, das neben anderen Faktoren wie HTTPS, Mobile-Friendliness und dem Fehlen von Intrusive Interstitials in das Ranking einfließt.

LCP – Largest Contentful Paint: Die Ladegeschwindigkeit

Was misst LCP?

LCP misst die Zeit, die vergeht, bis das größte sichtbare Inhaltselement auf der Seite vollständig gerendert ist. Das kann ein Bild, ein Video-Poster, ein Hintergrundbild oder ein großer Textblock sein. LCP gibt Aufschluss darüber, wann der Nutzer den Eindruck hat, dass die Seite „geladen“ ist.

Was sind gute LCP-Werte?

• Gut: Unter 2,5 Sekunden
• Verbesserungsbedürftig: 2,5 bis 4,0 Sekunden
• Schlecht: Über 4,0 Sekunden

Die häufigsten LCP-Probleme

Langsame Server-Antwortzeit (TTFB)

Wenn dein Server lange braucht, um überhaupt zu antworten, kann dein LCP nicht gut sein. Die Time to First Byte (TTFB) sollte unter 800 Millisekunden liegen.

Lösung: Schnelleres Hosting, Server-seitiges Caching, CDN (Content Delivery Network) nutzen, Datenbankabfragen optimieren.

Nicht-optimierte Bilder

Das LCP-Element ist oft ein Hero-Image. Wenn dieses Bild nicht komprimiert ist oder im falschen Format vorliegt, dauert das Laden unnötig lang.

Lösung: Verwende moderne Formate (WebP, AVIF), komprimiere Bilder, nutze responsive Bilder mit srcset, setze Preload-Hints für das LCP-Bild.

Render-blockierende Ressourcen

CSS- und JavaScript-Dateien, die im Head der Seite geladen werden, blockieren das Rendering. Bis sie vollständig geladen und verarbeitet sind, wird kein Inhalt angezeigt.

Lösung: Critical CSS inline einbinden, nicht-kritisches CSS asynchron laden, JavaScript defer oder async laden, ungenutzte CSS/JS entfernen.

Client-Side Rendering

Single-Page-Applications (SPAs), die Inhalte erst im Browser per JavaScript rendern, haben oft schlechte LCP-Werte, weil der Browser erst das JavaScript laden, parsen und ausführen muss, bevor Inhalte sichtbar werden.

Lösung: Server-Side Rendering (SSR) oder Static Site Generation (SSG) verwenden, zumindest für den above-the-fold Bereich.

INP – Interaction to Next Paint: Die Reaktionsfähigkeit

Was misst INP?

INP hat im März 2024 den bisherigen First Input Delay (FID) als Core Web Vital ersetzt. Während FID nur die Verzögerung der ersten Interaktion maß, bewertet INP die Reaktionsfähigkeit über die gesamte Lebensdauer einer Seite. Es misst die Zeit vom Moment einer Nutzerinteraktion (Klick, Tipp, Tastendruck) bis zum nächsten visuellen Update (Paint).

Was sind gute INP-Werte?

• Gut: Unter 200 Millisekunden
• Verbesserungsbedürftig: 200 bis 500 Millisekunden
• Schlecht: Über 500 Millisekunden

Die häufigsten INP-Probleme

Schwere JavaScript-Ausführung

JavaScript-Code, der den Main Thread des Browsers blockiert, verhindert, dass die Seite auf Nutzerinteraktionen reagiert. Long Tasks (Aufgaben, die länger als 50ms dauern) sind der häufigste Grund für schlechte INP-Werte.

Lösung: JavaScript aufteilen (Code Splitting), nicht-kritisches JavaScript lazy laden, Web Workers für aufwändige Berechnungen nutzen, Third-Party-Scripts minimieren.

Zu viele DOM-Elemente

Seiten mit Tausenden von DOM-Elementen sind langsam in der Verarbeitung. Jede Änderung am DOM löst Layout-Berechnungen aus, die bei großen DOMs sehr teuer sein können.

Lösung: DOM-Größe unter 1.500 Elementen halten, virtuelle Listen für lange Listen verwenden, unnötige Wrapper-Elemente entfernen.

Layout Thrashing

Wenn JavaScript wiederholt den DOM liest und dann ändert, erzwingt es synchrone Layout-Neuberechnungen. Das ist extrem performanceschädlich.

Lösung: Batch DOM-Lesevorgänge und Schreibvorgänge getrennt durchführen, requestAnimationFrame verwenden, CSS-Animationen statt JavaScript-Animationen nutzen.

CLS – Cumulative Layout Shift: Die visuelle Stabilität

Was misst CLS?

CLS misst, wie stark sich Elemente auf der Seite während des Ladevorgangs und der Nutzung verschieben. Jeder unerwartete Layout Shift – wenn ein Bild lädt und den Text nach unten schiebt, wenn eine Werbung erscheint und einen Button verschiebt – wird erfasst und als Score zusammengefasst.

Was sind gute CLS-Werte?

• Gut: Unter 0,1
• Verbesserungsbedürftig: 0,1 bis 0,25
• Schlecht: Über 0,25

Die häufigsten CLS-Probleme

Bilder und Videos ohne Dimensionen

Wenn Bilder keine width/height-Attribute haben, reserviert der Browser keinen Platz für sie. Sobald das Bild lädt, verschiebt sich der gesamte darunterliegende Inhalt.

Lösung: Immer width und height bei Bildern und Videos angeben. CSS aspect-ratio verwenden. Platzhalter für dynamische Inhalte reservieren.

Dynamisch injizierte Inhalte

Werbebanner, Cookie-Hinweise oder dynamisch geladene Elemente, die oberhalb bestehender Inhalte eingefügt werden, verursachen massive Layout Shifts.

Lösung: Feste Größen für Werbeblöcke reservieren, dynamische Inhalte unterhalb des aktuellen Viewports einfügen, Sticky-Elemente statt eingefügter Elemente verwenden.

Web-Fonts und FOUT/FOIT

Wenn Web-Fonts asynchron geladen werden, kann es zu einem „Flash of Unstyled Text“ (FOUT) kommen, bei dem zuerst eine Ersatzschrift angezeigt wird und dann zur Web-Font gewechselt wird. Dieser Schriftwechsel verursacht Layout Shifts.

Lösung: font-display: swap mit size-adjust nutzen, Fonts preloaden, Fallback-Fonts mit ähnlichen Metriken verwenden, Font Subsetting anwenden.

So misst du deine Core Web Vitals

Felddaten (Real User Monitoring)

• Google Search Console: Zeigt Core Web Vitals für alle indexierten Seiten
• Chrome User Experience Report (CrUX): Echte Nutzerdaten aus Chrome
• PageSpeed Insights: Zeigt sowohl Feld- als auch Labordaten

Labordaten (Synthetische Tests)

• Lighthouse: In Chrome DevTools integriert
• WebPageTest: Detaillierte Performance-Analyse
• GTmetrix: Visuelle Wasserfall-Diagramme

Wichtig: Felddaten sind für das Google-Ranking entscheidend. Labordaten sind nützlich für die Diagnose und Optimierung, aber sie spiegeln nicht unbedingt die tatsächliche Nutzererfahrung wider.

Priorisierter Optimierungsplan

Nicht alle Optimierungen haben den gleichen Einfluss. Hier eine priorisierte Reihenfolge:

Höchste Priorität (Quick Wins)

• Bilder komprimieren und moderne Formate nutzen
• Width/Height-Attribute für alle Bilder setzen
• Render-blockierende Ressourcen eliminieren
• Preload für LCP-Element hinzufügen

Hohe Priorität

• Server-Side Caching implementieren
• CDN einrichten
• Third-Party-Scripts auditieren und reduzieren
• Feste Dimensionen für Ads und dynamische Inhalte

Mittlere Priorität

• JavaScript-Code-Splitting
• Font-Loading-Strategie optimieren
• Lazy Loading für Below-the-fold Inhalte
• CSS-Optimierung (Critical CSS, Purging)

Core Web Vitals und KI-Suche

Die Performance deiner Website beeinflusst auch, wie KI-Suchsysteme deine Inhalte bewerten. Schnell ladende, gut strukturierte Seiten werden von Crawlern effizienter erfasst und als Quellen bevorzugt. Eine langsame, schlecht performende Seite hat auch in der KI-Suche einen Nachteil.

Fazit: Core Web Vitals als Wettbewerbsvorteil

Core Web Vitals sind mehr als nur Rankingfaktoren – sie sind ein Maß dafür, wie gut deine Website ihre Besucher behandelt. Gute Core Web Vitals bedeuten: schnelle Ladezeiten, responsive Interaktionen und ein stabiles Layout. Das sind genau die Dinge, die Nutzer von einer professionellen Website erwarten.

Investiere in die Optimierung deiner Core Web Vitals. Die Verbesserungen kommen nicht nur deinem Google-Ranking zugute, sondern auch der Zufriedenheit deiner Besucher, deiner Conversion-Rate und letztlich deinem Umsatz. Es ist eine der Investitionen im SEO, die sich am schnellsten und messbarsten auszahlt.