Core Web Vitals

Core Web Vitals sind drei messbare Kennzahlen, die Google entwickelt hat, um die Nutzererfahrung auf Websites zu bewerten. Sie erfassen, wie schnell Ihre Seite lädt, wie reaktionsschnell sie ist und wie stabil der Inhalt beim Laden bleibt.

Diese Metriken sind nicht nur theoretische Zahlen – sie haben direkte Auswirkungen auf Ihr Google-Ranking und Ihre Conversion-Rate. Studien zeigen: Eine Verzögerung von nur 100 Millisekunden kann die Conversion-Rate um 7% senken.

Was misst LCP? Die Zeit, bis das größte sichtbare Element im Viewport vollständig geladen ist. Das ist meist ein großes Bild, ein Video oder ein Textblock – also genau das, worauf Besucher zuerst schauen.

Zielwert: Unter 2,5 Sekunden (gut), 2,5-4 Sekunden (Verbesserungsbedarf), über 4 Sekunden (schlecht)

• Bilder optimieren: Das größte Element ist oft ein Hero-Image. Komprimieren Sie es, nutzen Sie WebP und laden Sie es per Preload-Tag mit höchster Priorität.
• Server-Response-Time senken: Ihr Server sollte in unter 200ms antworten. Nutzen Sie ein gutes Hosting, aktivieren Sie Caching und verwenden Sie ein CDN.
• CSS & JavaScript optimieren: Render-blockierende Ressourcen verzögern das Laden. Laden Sie kritisches CSS inline und verschieben Sie nicht-kritisches JavaScript ans Seitenende.
• Schriften schneller laden: Nutzen Sie font-display: swap in Ihren @font-face-Regeln, damit Text sofort angezeigt wird.

Was misst FID? First Input Delay misst die Zeit zwischen der ersten Nutzerinteraktion (Klick, Tap) und dem Moment, an dem der Browser darauf reagieren kann. Google ersetzt FID seit 2024 schrittweise durch INP (Interaction to Next Paint), das alle Interaktionen einer Session erfasst.

Zielwert: FID unter 100ms (gut), INP unter 200ms (gut)

• JavaScript-Ausführung reduzieren: Lange JavaScript-Tasks blockieren den Main Thread. Teilen Sie große Tasks in kleinere Chunks auf.
• Code-Splitting nutzen: Laden Sie nur den Code, der wirklich benötigt wird. Bei React/Vue nutzen Sie Dynamic Imports.
• Third-Party-Scripts prüfen: Tracking-Pixel, Chat-Widgets und Werbe-Scripts können die Seite massiv verlangsamen. Laden Sie sie verzögert oder asynchron.
• Web Worker einsetzen: Lagern Sie rechenintensive Tasks in einen Web Worker aus, um den Main Thread freizuhalten.

Was misst CLS? CLS erfasst unerwartete Layout-Verschiebungen. Kennen Sie das: Sie wollen auf einen Button klicken, doch im letzten Moment lädt ein Bild nach und der Button springt nach unten – Sie klicken versehentlich auf etwas anderes. Genau das misst CLS.

Zielwert: Unter 0,1 (gut), 0,1-0,25 (Verbesserungsbedarf), über 0,25 (schlecht)

• Feste Größen für Bilder: Geben Sie immer width und height im HTML an, damit der Browser Platz reserviert.
• Webfonts richtig laden: Nutzen Sie font-display: optional oder stellen Sie System-Schriften als Fallback bereit, die ähnliche Maße haben.
• Platzhalter für dynamische Inhalte: Wenn Sie Werbung oder Embeds laden, reservieren Sie vorab Platz mit festen Höhen.
• Keine nachträglich eingefügten Elemente: Banner oder Cookie-Hinweise sollten per Overlay erscheinen, nicht den Inhalt nach unten schieben.

Es gibt zwei Arten von Daten: Lab Data (synthetische Tests in kontrollierten Umgebungen) und Field Data (echte Nutzerdaten). Für Google zählt vor allem Field Data – aber Lab Data hilft beim Debugging.

So gehen Sie systematisch vor, um alle drei Core Web Vitals zu verbessern: