Core Web Vitals: Messen und Verbessern der Web-Performance

Web2026-11-07TryQuickToolBox

Warum Core Web Vitals für Ihre Website wichtig sind

Sie haben wahrscheinlich schon von Core Web Vitals (CWV) gehört – Googles Metriken für die Nutzererfahrung. Aber wenn sich Ihre Website langsam oder ruckelig anfühlt, sind Sie nicht allein. Viele Entwickler haben Schwierigkeiten, CWV-Werte in konkrete Verbesserungen umzusetzen. Dieser Leitfaden führt Sie durch die Messung und Verbesserung jeder Vitalmetrik mit praktischen Schritten und Code-Snippets.

Core Web Vitals sind drei spezifische Metriken: Largest Contentful Paint (LCP) für die Ladeleistung, First Input Delay (FID) für die Interaktivität und Cumulative Layout Shift (CLS) für die visuelle Stabilität. Google verwendet diese als Ranking-Signale, daher profitieren sowohl Nutzer als auch SEO von ihrer Optimierung.

Die drei Core Web Vitals verstehen

Bevor wir uns mit den Lösungen befassen, klären wir, was jede Metrik misst und welche Schwellenwerte für eine gute Bewertung gelten.

Metrik	Misst	Gut	Verbesserungswürdig	Schlecht
LCP	Ladeleistung	≤ 2,5s	2,5s – 4,0s	> 4,0s
FID	Interaktivität	≤ 100ms	100ms – 300ms	> 300ms
CLS	Visuelle Stabilität	≤ 0,1	0,1 – 0,25	> 0,25

Hinweis: FID wird im März 2024 durch Interaction to Next Paint (INP) ersetzt, aber die Optimierungsprinzipien sind ähnlich. Wir konzentrieren uns hier auf FID, da es noch weit verbreitet ist.

So messen Sie Core Web Vitals

Sie benötigen sowohl Lab- als auch Felddaten, um ein vollständiges Bild zu erhalten. Labdaten (synthetische Tests) helfen beim Debuggen, während Felddaten (Real User Monitoring) die tatsächliche Nutzererfahrung zeigen.

Lab-Tools

Lighthouse in den Chrome DevTools: Führen Sie ein Audit im Lighthouse-Tab durch.
PageSpeed Insights: Liefert sowohl Lab- als auch Felddaten für eine URL.
WebPageTest: Erweiterte Tests mit benutzerdefinierten Netzwerkbedingungen.

Feld-Tools

Chrome User Experience Report (CrUX): Öffentlicher Datensatz mit Metriken von echten Nutzern.
Google Search Console: Der Core Web Vitals-Bericht zeigt die Gruppenleistung.
web-vitals JavaScript-Bibliothek: Sammeln Sie Metriken von echten Nutzern in Ihrer Analytik.

Um Felddaten zu sammeln, binden Sie die web-vitals-Bibliothek ein und senden Sie die Metriken an Ihren Analytics-Endpunkt:

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

Dies liefert Ihnen Echtzeitdaten zur Ergänzung der Labortests.

Verbesserung von Largest Contentful Paint (LCP)

LCP misst, wann das größte Inhaltselement (Bild, Textblock oder Video) sichtbar wird. Um es zu verbessern, konzentrieren Sie sich auf die Serverantwortzeit, das Laden von Ressourcen und render-blockierende Ressourcen.

1. Optimieren Sie die Serverantwortzeit

Verwenden Sie ein CDN, um Inhalte näher an den Nutzern bereitzustellen.
Aktivieren Sie Caching (HTTP-Cache-Header, serverseitiger Cache).
Upgraden Sie das Hosting, wenn die TTFB (Time to First Byte) konstant hoch ist.

2. Optimieren Sie Bilder

Komprimieren Sie Bilder und verwenden Sie moderne Formate wie WebP oder AVIF.
Verwenden Sie responsive Bilder mit srcset und sizes.
Laden Sie Bilder unterhalb des sichtbaren Bereichs per Lazy-Loading, aber vermeiden Sie Lazy-Loading für das LCP-Bild.

Für eine schnelle Bildkomprimierung probieren Sie unseren Image Compressor aus.

3. Beseitigen Sie render-blockierende Ressourcen

Binden Sie kritisches CSS inline ein und verschieben Sie nicht-kritisches CSS.
Verwenden Sie async oder defer für JavaScript.
Minifizieren Sie CSS und JavaScript.

4. Preloaden Sie wichtige Ressourcen

Verwenden Sie <link rel="preload"> für wichtige Assets wie Schriftarten oder Hero-Bilder:

<link rel="preload" href="/hero.webp" as="image">

Verbesserung von First Input Delay (FID)

FID misst die Zeit von der ersten Interaktion eines Nutzers mit Ihrer Seite bis zur Reaktion des Browsers. Lange JavaScript-Aufgaben blockieren den Hauptthread und verursachen Verzögerungen.

1. Teilen Sie lange Aufgaben auf

Teilen Sie lang laufendes JavaScript mit setTimeout oder requestIdleCallback in kleinere Teile auf. Zum Beispiel:

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Process item
  setTimeout(() => processItems(items), 0);
}

2. Optimieren Sie Event-Handler

Entprellen (Debounce) oder drosseln (Throttle) Sie Eingabe-Handler.
Vermeiden Sie komplexe Berechnungen in Event-Listenern; lagern Sie sie in Web Worker aus.

3. Reduzieren Sie die JavaScript-Ausführungszeit

Führen Sie Code-Splitting mit dynamischen Importen durch.
Entfernen Sie ungenutztes JavaScript (Tree Shaking).
Verwenden Sie loading="lazy" für nicht-kritische Iframes.

4. Verwenden Sie Web Worker für schwere Aufgaben

Verlagern Sie CPU-intensive Arbeit aus dem Hauptthread:

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* handle result */ };

Verbesserung von Cumulative Layout Shift (CLS)

CLS misst unerwartete Layoutverschiebungen. Häufige Ursachen sind Bilder ohne Abmessungen, Anzeigen, Embeds und Webfonts.

1. Setzen Sie immer Breite und Höhe bei Medien

Fügen Sie width- und height-Attribute zu Bildern und Videos hinzu oder verwenden Sie CSS aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2. Reservieren Sie Platz für dynamische Inhalte

Reservieren Sie für Anzeigen oder Embeds Platz mit einem Platzhalterelement oder legen Sie eine feste Größe fest.

3. Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten

Wenn Sie ein Banner einfügen müssen, verwenden Sie eine Transform-Animation oder ein Overlay, das das Layout nicht verschiebt.

4. Verwenden Sie font-display: swap

Verhindern Sie unsichtbaren Text und Layoutverschiebungen durch Webfonts:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Überwachung und kontinuierliche Verbesserung

Die Optimierung der Core Web Vitals ist keine einmalige Aufgabe. Richten Sie eine kontinuierliche Überwachung mit Tools wie diesen ein:

Google Search Console: Benachrichtigungen bei CWV-Verschlechterungen.
Lighthouse CI: Führen Sie Audits bei jedem Pull Request durch.
Real User Monitoring (RUM): Tools wie New Relic, Datadog oder benutzerdefinierte Analytik.

Überprüfen Sie regelmäßig die Felddaten und iterieren Sie bei den Korrekturen. Priorisieren Sie die Metrik mit der schlechtesten Bewertung.

FAQ

Was sind Core Web Vitals?

Core Web Vitals sind eine Reihe von Metriken, die Google zur Messung der Nutzererfahrung verwendet: LCP (Laden), FID (Interaktivität) und CLS (visuelle Stabilität).

Wie oft sollte ich die Core Web Vitals überprüfen?

Überwachen Sie Felddaten kontinuierlich über die Search Console oder RUM. Führen Sie Labortests nach größeren Änderungen und mindestens monatlich durch.

Beeinflusst die Verbesserung der Core Web Vitals das SEO?

Ja, Core Web Vitals sind ein Ranking-Signal. Bessere Werte können die Sichtbarkeit in der Suche und die Nutzerzufriedenheit verbessern.

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