Core Web Vitals: Messen und Verbessern

Web2026-10-25TryQuickToolBox

Warum Core Web Vitals für Ihre Website wichtig sind

Sie haben wahrscheinlich Berichte gesehen, dass Ihre Website langsam ist, aber Sie wissen nicht, wo Sie anfangen sollen. Core Web Vitals sind Googles Metriken für die reale Nutzererfahrung: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Sie beeinflussen die Suchrankings und – noch wichtiger – wie Nutzer Ihre Website wahrnehmen. Ein langsamer LCP frustriert Besucher, ein hoher INP lässt die Seite unresponsiv wirken und ein schlechter CLS führt zu versehentlichen Klicks. Dieser Leitfaden zeigt Ihnen, wie Sie diese Metriken messen und mit praktischen Schritten verbessern.

Die drei Core Web Vitals verstehen

Bevor Sie optimieren, sollten Sie wissen, was jede Metrik misst und welche Schwellenwerte gelten.

Metrik	Was sie misst	Gut	Verbesserungswürdig	Schlecht
LCP	Zeit bis das größte Inhaltselement (Bild, Textblock) gerendert wird	≤ 2,5 s	2,5–4,0 s	> 4,0 s
INP	Zeit von der Nutzerinteraktion bis zum nächsten Paint	≤ 200 ms	200–500 ms	> 500 ms
CLS	Summe der Layout-Shift-Scores für unerwartete visuelle Verschiebungen	≤ 0,1	0,1–0,25	> 0,25

Diese Schwellenwerte basieren auf Felddaten (echte Nutzer), nicht auf Labortests. Streben Sie den „Gut“-Bereich für mindestens 75 % der Seitenaufrufe an.

So messen Sie Core Web Vitals

Sie benötigen sowohl Lab- als auch Felddaten. Labdaten helfen beim Debuggen; Felddaten spiegeln die echte Nutzererfahrung wider.

Labortools

Lighthouse in den Chrome DevTools: Führen Sie ein Audit für Performance-Scores und spezifische Optimierungsmöglichkeiten durch.
WebPageTest: Erweiterte Tests mit Filmstreifen und Waterfall-Diagrammen.
Chrome UX Report (CrUX): Felddaten von echten Nutzern, zugänglich über PageSpeed Insights oder die CrUX API.

Feldtools

PageSpeed Insights: Zeigt sowohl Labor- als auch Felddaten für eine URL an.
Google Search Console: Der Core Web Vitals-Bericht gruppiert URLs nach Status.
web-vitals JavaScript-Bibliothek: Sammeln Sie echte Nutzermetriken in Ihrer eigenen Analytik.

Um Ihre Website zu instrumentieren, binden Sie die web-vitals-Bibliothek ein und senden Sie Metriken an Ihren Analytik-Endpunkt:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Dies liefert Ihnen einen kontinuierlichen Strom von Felddaten zur Verfolgung von Verbesserungen.

Verbesserung von Largest Contentful Paint (LCP)

LCP ist oft die größte Herausforderung. Das größte Element ist normalerweise ein Hero-Bild oder ein großer Textblock. Optimieren Sie dessen Ladepfad.

Identifizieren Sie das LCP-Element mit Lighthouse oder dem Performance-Panel der DevTools.
Priorisieren Sie dessen Laden: Verwenden Sie fetchpriority="high" beim Bild oder laden Sie es mit <link rel="preload"> vor.
Optimieren Sie Bilder: Komprimieren Sie, verwenden Sie moderne Formate (WebP/AVIF) und liefern Sie responsive Größen mit srcset.
Reduzieren Sie die Serverantwortzeit: Nutzen Sie Caching, ein CDN und optimieren Sie Backend-Abfragen.
Eliminieren Sie render-blockierende Ressourcen: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches JS.

Beispiel: Laden Sie das Hero-Bild vor und setzen Sie die Fetch-Priorität:

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">

Setzen Sie immer Breite und Höhe, um Layout-Verschiebungen zu vermeiden.

Verbesserung von Interaction to Next Paint (INP)

INP misst die Reaktionsfähigkeit. Lange Aufgaben blockieren den Hauptthread und verzögern visuelles Feedback. So verbessern Sie INP:

Teilen Sie lange Aufgaben auf: Verwenden Sie setTimeout oder scheduler.yield, um dem Browser die Kontrolle zu geben.
Optimieren Sie Event-Handler: Entprellen Sie Eingaben, vermeiden Sie schwere synchrone Arbeit.
Reduzieren Sie JavaScript: Code-Splitting, Tree-Shaking und verzögern Sie nicht-kritische Skripte.
Nutzen Sie Web Worker für CPU-intensive Aufgaben.
Vermeiden Sie große DOM-Updates: Bündeln Sie DOM-Änderungen und verwenden Sie requestAnimationFrame.

Beispiel: Geben Sie während einer langen Schleife den Hauptthread frei:

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Dies hält die Seite während intensiver Verarbeitung reaktionsfähig.

Verbesserung von Cumulative Layout Shift (CLS)

CLS tritt auf, wenn sich Elemente unerwartet verschieben. Häufige Ursachen: Bilder ohne Abmessungen, Anzeigen, Embeds und Webfonts.

Geben Sie immer Breite und Höhe an bei Bildern und Videos.
Reservieren Sie Platz für dynamische Inhalte (Anzeigen, Embeds) mit CSS min-height oder Aspect-Ratio-Boxen.
Verwenden Sie font-display: swap und laden Sie Fonts vor, um unsichtbaren Text und Layout-Verschiebungen zu vermeiden.
Fügen Sie keine Inhalte über bestehenden Inhalten ein, es sei denn, dies geschieht als Reaktion auf eine Nutzerinteraktion.

Beispiel: Verwenden Sie aspect-ratio, um Platz zu reservieren:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Dies verhindert Verschiebungen beim Laden des Videos.

Überwachen und iterieren

Performance ist keine einmalige Lösung. Richten Sie eine kontinuierliche Überwachung mit echten Nutzermetriken ein. Verwenden Sie Dashboards, um LCP, INP und CLS im Zeitverlauf zu verfolgen. Überprüfen Sie nach jeder Änderung mit Labortools und prüfen Sie die Felddaten nach einigen Tagen. Priorisieren Sie Korrekturen, die die meisten Nutzer betreffen.

FAQ

Was sind die aktuellen Schwellenwerte für Core Web Vitals?

LCP: gut ≤2,5s, verbesserungswürdig 2,5–4,0s, schlecht >4,0s. INP: gut ≤200ms, verbesserungswürdig 200–500ms, schlecht >500ms. CLS: gut ≤0,1, verbesserungswürdig 0,1–0,25, schlecht >0,25.

Wie oft sollte ich Core Web Vitals messen?

Überwachen Sie Felddaten kontinuierlich und führen Sie Labortests nach jeder signifikanten Änderung durch. Prüfen Sie die Search Console wöchentlich auf Trends.

Kann ich Core Web Vitals verbessern, ohne meine Website neu zu erstellen?

Ja. Viele Verbesserungen wie Bildoptimierung, Preloading und CSS-Anpassungen können schrittweise ohne vollständigen Neuaufbau angewendet werden.

Müssen Sie Bilder schnell komprimieren, um den LCP zu verbessern? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.