TryQuickToolBox

Core Web Vitals: Messen und Verbessern der Web-Performance

Web2026-11-05TryQuickToolBox

Sie haben eine schnelle Website erstellt, aber Benutzer beschweren sich immer noch über Langsamkeit. Oder Ihre SEO-Rankings sind nach einem Google-Update gesunken. Core Web Vitals (CWV) sind wahrscheinlich die Ursache. Diese Metriken messen die tatsächliche Benutzererfahrung und wirken sich direkt auf Suchrankings und Conversion-Raten aus. In diesem Leitfaden erfahren Sie, was CWV sind, wie Sie sie genau messen und welche praktischen Schritte Sie zur Verbesserung jeder einzelnen Metrik unternehmen können.

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von drei Metriken, die Google zur Quantifizierung der Benutzererfahrung verwendet:

Diese Schwellenwerte basieren auf dem 75. Perzentil der Seitenaufrufe, unterteilt nach Mobil und Desktop. Sie müssen also sicherstellen, dass 75 % Ihrer Benutzer gute Werte erleben.

So messen Sie Core Web Vitals

Sie können CWV auf zwei Arten messen: im Labor (synthetische Tests) und im Feld (Real User Monitoring). Beide sind wertvoll, aber Felddaten sind das, was Google für das Ranking verwendet.

Felddaten: Real User Monitoring (RUM)

Felddaten stammen von tatsächlichen Benutzern. Die beste Quelle ist der Chrome User Experience Report (CrUX), der den Core Web Vitals-Bericht in der Google Search Console speist. Sie können auch die web-vitals-Bibliothek verwenden, um Ihre eigenen RUM-Daten zu sammeln und an einen Analyse-Endpunkt zu senden.

Um CrUX-Daten für Ihre Website anzuzeigen, verwenden Sie PageSpeed Insights oder die CrUX-API. Diese zeigen die Verteilung von LCP, INP und CLS für Ihre Origin.

Labordaten: Synthetische Tests

Labor-Tools simulieren einen Seitenaufruf in einer kontrollierten Umgebung. Sie eignen sich hervorragend zum Debuggen und für die CI/CD-Integration. Beliebte Optionen:

Denken Sie daran: Labordaten enthalten nicht die Variabilität der realen Welt, verwenden Sie sie also zur Diagnose, nicht als Ranking-Prädiktor.

Verbesserung von Largest Contentful Paint (LCP)

LCP ist normalerweise die Metrik mit dem größten Verbesserungspotenzial. Das größte Element ist oft ein Hero-Bild, eine Überschrift oder ein Video-Poster. So verbessern Sie LCP:

  1. Bilder optimieren: Komprimieren Sie Bilder, verwenden Sie moderne Formate wie WebP oder AVIF und liefern Sie responsive Größen mit srcset. Tools wie der Image Compressor können helfen, die Dateigröße ohne Qualitätsverlust zu reduzieren.
  2. LCP-Ressource vorladen: Fügen Sie <link rel="preload"> für das Hero-Bild oder die Schriftart hinzu, um früher mit dem Laden zu beginnen.
  3. Render-blockierende Ressourcen eliminieren: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches CSS und laden Sie JavaScript asynchron.
  4. Ein CDN verwenden: Liefern Sie Assets von einem Content Delivery Network, um die Latenz zu reduzieren.
  5. Aggressiv cachen: Setzen Sie lange Cache-Lebensdauern für statische Assets mit Cache-Control-Headern.

Beispiel für das Vorladen eines LCP-Bildes:

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

Verbesserung von Interaction to Next Paint (INP)

INP misst, wie schnell die Seite auf Benutzereingaben reagiert. Ein hoher INP resultiert oft aus langen JavaScript-Aufgaben, die den Hauptthread blockieren. So verbessern Sie INP:

Sie können INP im Feld mit der web-vitals-Bibliothek messen:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // An Ihren Analyse-Endpunkt senden
});

Verbesserung von Content Layout Shift (CLS)

CLS tritt auf, wenn sich Elemente während des Ladens unerwartet verschieben. Häufige Ursachen: Bilder ohne Abmessungen, Anzeigen, Embeds und Webfonts, die FOIT/FOUT verursachen. So verbessern Sie CLS:

Beispiel für die Reservierung von Platz mit CSS aspect-ratio:

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

Tools und Workflow für kontinuierliche Überwachung

Die Verbesserung von CWV ist keine einmalige Aufgabe. Richten Sie eine kontinuierliche Überwachung ein:

Für eine schnelle Überprüfung verwenden Sie das HTML to Image-Tool, um visuelle Snapshots Ihrer Seite in verschiedenen Stadien zu erfassen, damit Sie Layoutverschiebungen manuell erkennen können.

FAQ

Was sind die aktuellen Core Web Vitals-Schwellenwerte?

Gut: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. Verbesserungswürdig: LCP ≤ 4s, INP ≤ 500ms, CLS ≤ 0,25. Schlecht: über diesen Werten.

Wie oft werden CrUX-Daten aktualisiert?

CrUX-Daten werden täglich aktualisiert, aber das 28-Tage-Fenster bedeutet, dass Änderungen Zeit brauchen, um sich widerzuspiegeln. Für schnelleres Feedback verwenden Sie Ihr eigenes RUM.

Kann ich Core Web Vitals verbessern, ohne mein Design zu ändern?

Ja. Viele Verbesserungen sind technischer Natur: Bildkomprimierung, Vorladen, Verzögern von Skripten und Reservieren von Platz. Diese haben oft keine visuellen Auswirkungen.

Bereit, Ihre Bilder für einen besseren LCP zu optimieren? Probieren Sie unseren kostenlosen Image Compressor, um Dateigrößen bei gleichbleibender Qualität zu reduzieren.