Core Web Vitals: Messen und verbessern für bessere Web-Performance

Ihre Website lädt, aber Nutzer springen trotzdem ab. Langsame Interaktionen frustrieren Besucher, und Suchmaschinen bemerken das. Core Web Vitals sind Googles Metriken für die reale User Experience: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). In diesem Leitfaden zeigen wir Ihnen, wie Sie sie genau messen und mit praktischen Techniken auf Code-Ebene verbessern können.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von Metriken, die Schlüsselaspekte der User Experience quantifizieren:

• LCP misst die Ladeleistung. Sie markiert den Zeitpunkt, an dem das größte Inhaltselement (Bild, Textblock, Video) sichtbar wird. Ziel: ≤ 2,5 Sekunden.
• INP misst die Interaktivität. Sie verfolgt die Latenz aller Interaktionen (Klicks, Taps, Tastendrücke) und meldet die schlechteste. Ziel: ≤ 200 Millisekunden.
• CLS misst die visuelle Stabilität. Sie bewertet unerwartete Layout-Verschiebungen während des Ladens. Ziel: ≤ 0,1.

Diese Metriken sind Teil von Googles Page-Experience-Signal, aber wichtiger noch: Sie spiegeln die reale Frustration der Nutzer wider. Ihre Verbesserung kommt sowohl SEO als auch Conversion-Raten zugute.

Wie man Core Web Vitals misst

Sie benötigen sowohl Lab- als auch Felddaten. Lab-Tools simulieren Bedingungen; Felddaten stammen von echten Nutzern.

Lab-Tools

• Lighthouse (in Chrome DevTools oder CI) liefert eine Momentaufnahme mit Verbesserungsmöglichkeiten.
• PageSpeed Insights kombiniert Lab- und Felddaten aus dem Chrome User Experience Report (CrUX).
• WebPageTest bietet erweiterte Skripting- und Filmstreifen-Ansichten.

Feld-Tools

• Chrome UX Report (CrUX) zeigt aggregierte Echtnutzerdaten für Ihre Origin.
• web-vitals-Bibliothek ermöglicht es Ihnen, Metriken von tatsächlichen Nutzern zu sammeln und an Ihre Analytics zu senden.
• Search Console meldet den Core-Web-Vitals-Status für Ihre Website.

Beginnen Sie damit, PageSpeed Insights für Ihre wichtigsten Seiten zu prüfen. Richten Sie dann ein Real-User-Monitoring mit der web-vitals-Bibliothek ein, um die Performance im Laufe der Zeit zu verfolgen.

LCP verbessern

LCP ist oft die wirkungsvollste Metrik, die es zu beheben gilt. Das größte Element ist normalerweise ein Hero-Bild oder ein großer Textblock.

1. Den kritischen Pfad optimieren

• Reduzieren Sie die Serverantwortzeit (TTFB) durch Caching, CDNs und effizienten Backend-Code.
• Eliminieren Sie render-blockierende Ressourcen: Inline-kritisches CSS, nicht-kritisches CSS und JavaScript aufschieben.
• Preloaden Sie das LCP-Bild: <link rel="preload" as="image" href="#">.

2. Bilder optimieren

• Verwenden Sie moderne Formate wie WebP oder AVIF.
• Servieren Sie responsive Bilder mit srcset und sizes.
• Komprimieren Sie Bilder ohne sichtbaren Qualitätsverlust. Für eine schnelle Komprimierung probieren Sie unseren Image Compressor.

3. Serverantwort verbessern

• Verwenden Sie ein CDN, um statische Assets global zu cachen.
• Aktivieren Sie Brotli- oder gzip-Komprimierung.
• Optimieren Sie Datenbankabfragen und nutzen Sie serverseitiges Caching.

Beispiel: Preload und fetchpriority für LCP-Bild:

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

INP verbessern

INP misst, wie schnell Ihre Seite auf Nutzereingaben reagiert. Hoher INP bedeutet träge Interaktionen.

1. Lange Aufgaben aufteilen

• Verwenden Sie setTimeout, requestIdleCallback oder scheduler.yield, um den Main-Thread freizugeben.
• Vermeiden Sie lang laufende JavaScript-Funktionen; teilen Sie sie in kleinere Blöcke auf.

2. Event-Handler optimieren

• Debouncen oder Throttlen Sie häufige Events (Scroll, Resize, Input).
• Verwenden Sie passive Event-Listener für Touch- und Wheel-Events.
• Minimieren Sie DOM-Updates innerhalb von Handlern.

3. JavaScript-Ausführung reduzieren

• Code-Splitting und Lazy-Loading von nicht-kritischem JavaScript.
• Entfernen Sie ungenutzte Abhängigkeiten und Polyfills.
• Verwenden Sie Web Workers für schwere Berechnungen.

Beispiel: Main-Thread in einer langen Aufgabe freigeben:

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

CLS verbessern

CLS misst unerwartete Layout-Verschiebungen. Häufige Ursachen: Bilder ohne Dimensionen, Anzeigen, Embeds und dynamisch eingefügter Inhalt.

1. Immer Dimensionen festlegen

• Fügen Sie width- und height-Attribute zu Bildern und Videos hinzu.
• Verwenden Sie CSS aspect-ratio für responsive Container.

2. Platz für dynamische Inhalte reservieren

• Verwenden Sie Platzhalter oder Skeleton-Screens für Anzeigen und Embeds.
• Vermeiden Sie das Einfügen von Inhalten über bestehenden Inhalten, es sei denn als Reaktion auf eine Nutzerinteraktion.

3. Schriftarten-Laden optimieren

• Verwenden Sie font-display: swap, um unsichtbaren Text zu vermeiden, aber seien Sie sich möglicher Layout-Verschiebungen bewusst.
• Preloaden Sie wichtige Schriftarten, um Swap-Verzögerungen zu reduzieren.

Beispiel: Platz mit aspect-ratio reservieren:

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

Tools und Workflow

Integrieren Sie Performance-Checks in Ihren Entwicklungs-Workflow:

• Führen Sie Lighthouse in CI aus (z. B. GitHub Actions), um Regressionen zu erkennen.
• Verwenden Sie die web-vitals-Bibliothek, um Felddaten an Ihre Analytics zu senden.
• Überwachen Sie CrUX und Search Console auf Echtnutzer-Trends.
• Testen Sie auf echten Geräten, insbesondere auf Mittelklasse-Smartphones.

Denken Sie daran: Performance ist ein Feature. Behandeln Sie es wie jede andere Qualitätsmetrik.

FAQ

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

LCP: gut ≤ 2,5 s, verbesserungswürdig ≤ 4,0 s. INP: gut ≤ 200 ms, verbesserungswürdig ≤ 500 ms. CLS: gut ≤ 0,1, verbesserungswürdig ≤ 0,25. Diese Schwellenwerte basieren auf Echtnutzerdaten.

Wie oft sollte ich Core Web Vitals messen?

Überwachen Sie Felddaten kontinuierlich über Tools wie CrUX und Ihr eigenes RUM. Führen Sie Lab-Tests bei jeder signifikanten Codeänderung und mindestens monatlich für wichtige Seiten durch.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Korrekturen wie Bildkomprimierung und Caching können über Plugins oder CDN-Einstellungen vorgenommen werden. Tiefere Optimierungen (Code-Splitting, kritisches CSS) erfordern jedoch normalerweise die Einbeziehung eines Entwicklers.

Bereit, Ihre Bilder für besseres LCP zu optimieren? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen ohne Qualitätsverlust zu reduzieren.