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

Sie haben eine schnelle Website gebaut, aber Nutzer beschweren sich trotzdem über Langsamkeit. Oder Ihre SEO-Rankings sind nach einem Google-Update gefallen. Der Übeltäter könnten die Core Web Vitals sein – Googles Metriken für die Nutzererfahrung. In diesem Leitfaden erfahren Sie, was sie sind, wie Sie sie mit Echtnutzerdaten messen und mit welchen praktischen Schritten Sie sie verbessern.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die zentrale Aspekte der Nutzererfahrung quantifizieren:

• Largest Contentful Paint (LCP): Wie lange es dauert, bis das größte sichtbare Element (z. B. Hero-Bild oder Überschrift) gerendert wird. Gut: ≤2,5 s.
• First Input Delay (FID): Die Zeit von der ersten Interaktion eines Nutzers (z. B. Klick auf einen Link) bis zur Reaktion des Browsers. Gut: ≤100 ms.
• Cumulative Layout Shift (CLS): Misst die visuelle Stabilität – wie stark Elemente unerwartet verspringen. Gut: ≤0,1.

Diese Metriken sind Teil von Googles Page-Experience-Signalen und wirken sich direkt auf SEO aus. Wichtiger noch: Sie spiegeln die tatsächliche Frustration der Nutzer wider.

So messen Sie Core Web Vitals

Sie benötigen sowohl Lab- als auch Felddaten. Labdaten (z. B. Lighthouse) helfen beim Debuggen, während Felddaten (Real User Monitoring) die tatsächliche Performance zeigen.

1. Chrome UX Report (CrUX) nutzen

CrUX liefert aggregierte Echtnutzerdaten für Millionen von Websites. Sie können sie in PageSpeed Insights oder im CrUX Dashboard einsehen. Es zeigt die Verteilung von LCP, FID und CLS für Ihre Origin.

2. Real User Monitoring (RUM) einrichten

Tools wie Google Analytics 4, Vercel Analytics oder Open-Source-Bibliotheken (web-vitals) ermöglichen es Ihnen, Core Web Vitals von tatsächlichen Besuchern zu erfassen. So senden Sie Metriken an Ihren Analytics-Endpunkt:

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

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Dieses Snippet verwendet die Bibliothek web-vitals, um Metriken zu erfassen und sie über sendBeacon zu senden, ohne das Laden der Seite zu beeinträchtigen.

3. Lighthouse für Labortests verwenden

Lighthouse (in den Chrome DevTools oder PageSpeed Insights) simuliert einen Seitenaufruf und meldet Core Web Vitals sowie Verbesserungspotenziale. Führen Sie es auf wichtigen Seiten aus und verfolgen Sie Änderungen im Zeitverlauf.

LCP verbessern

LCP ist oft die Metrik mit der größten Wirkung. So verbessern Sie sie:

• Bilder optimieren: Bilder komprimieren, moderne Formate (WebP, AVIF) verwenden und responsive Größen mit srcset ausliefern.
• Kritische Ressourcen vorladen: Verwenden Sie <link rel="preload"> für das LCP-Bild oder die Schriftart.
• Serverantwortzeit reduzieren: CDN, Caching und optimierte Backend-Abfragen nutzen.
• Render-blockierende Ressourcen beseitigen: Nicht kritisches CSS/JS verzögern, kritisches CSS inline einbinden.

Laden Sie zum Beispiel Ihr Hero-Bild vor:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

FID verbessern

FID misst die Reaktionsfähigkeit auf Eingaben. So verbessern Sie sie:

• Lange Tasks aufteilen: Nutzen Sie setTimeout oder requestIdleCallback, um den Main Thread freizugeben.
• Main-Thread-Arbeit minimieren: JavaScript-Ausführungszeit reduzieren, große Bundles vermeiden.
• Web Worker nutzen für rechenintensive Aufgaben.
• Event-Handler optimieren: Schnelle Events mit Debounce oder Throttle behandeln.

Denken Sie auch an den Übergang zu Interaction to Next Paint (INP), das FID 2024 ablösen wird. INP misst alle Interaktionen, daher gelten dieselben Optimierungen.

CLS verbessern

Bei CLS geht es um visuelle Stabilität. Häufige Ursachen und Fixes:

• Bilder ohne Abmessungen: Setzen Sie immer die Attribute width und height oder verwenden Sie CSS aspect-ratio.
• Anzeigen, Embeds und iframes: Platz mit einem Platzhalter reservieren oder feste Abmessungen setzen.
• Dynamisches Einfügen von Inhalten: Vermeiden Sie das Einfügen von Inhalten oberhalb bestehender Inhalte, außer als Reaktion auf eine Nutzerinteraktion.
• Webfonts: Verwenden Sie font-display: swap und laden Sie Schriften vor, um unsichtbaren Text und Layout-Verschiebungen zu vermeiden.

Beispiel: Platz für ein Bild reservieren:

<img src="#" width="800" height="600" alt="...">

Vergleich der Core Web Vitals

Tools für kontinuierliches Monitoring

Die Verbesserung der Core Web Vitals ist keine einmalige Aufgabe. Richten Sie Dashboards ein, um Felddaten zu verfolgen. Nutzen Sie:

• Google Search Console: Der Core-Web-Vitals-Bericht zeigt URL-Gruppen, die Aufmerksamkeit benötigen.
• PageSpeed Insights: Kombiniert Lab- und Felddaten.
• Web Vitals Extension: Echtzeit-Metriken beim Surfen.
• RUM-Tools: Wie SpeedCurve, Calibre oder Open-Source-Alternativen.

Prüfen Sie Ihre Website regelmäßig, insbesondere nach größeren Änderungen.

FAQ

Was sind Core Web Vitals und warum sind sie wichtig?

Core Web Vitals sind drei Metriken (LCP, FID, CLS), die Google zur Messung der Nutzererfahrung verwendet. Sie sind wichtig, weil sie die SEO-Rankings beeinflussen und die tatsächliche Nutzerzufriedenheit widerspiegeln.

Wie oft sollte ich die Core Web Vitals messen?

Kontinuierlich über Real User Monitoring und nach allen wesentlichen Code- oder Inhaltsänderungen. Labortests sollten während der Entwicklung und vor Releases durchgeführt werden.

Kann ich die Core Web Vitals ohne Entwickler verbessern?

Einige Fixes wie das Komprimieren von Bildern oder das Festlegen von Bildabmessungen können Content-Editoren übernehmen. Tiefergehende Optimierungen erfordern jedoch oft die Einbindung von Entwicklern.

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