TryQuickToolBox

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

Web2026-10-16TryQuickToolBox

Sie haben eine schnelle Website erstellt, aber Nutzer beschweren sich immer noch über Langsamkeit. Oder Ihre SEO-Rankings sind nach einem Google-Update gesunken. Der Übeltäter könnten die Core Web Vitals sein – eine Reihe von Metriken, die Google verwendet, um die tatsächliche Nutzererfahrung zu messen. Ignorieren Sie sie, kann dies sowohl die Nutzerzufriedenheit als auch die Sichtbarkeit in der Suche beeinträchtigen.

In diesem Leitfaden erfahren Sie, was Core Web Vitals sind, wie Sie sie genau messen und welche praktischen Schritte zur Verbesserung jeder Metrik es gibt. Wir konzentrieren uns auf die drei aktuellen Metriken: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS).

Was sind Core Web Vitals?

Core Web Vitals sind eine Teilmenge der Web Vitals, die Google als wesentlich für eine großartige Nutzererfahrung erachtet. Sie quantifizieren, wie schnell Inhalte geladen werden, wie reaktionsschnell die Seite auf Interaktionen reagiert und wie visuell stabil sie ist.

Google verwendet diese Metriken als Ranking-Signal, aber noch wichtiger: Sie spiegeln echte Nutzerprobleme wider. Ein langsames LCP frustriert Nutzer, die auf Inhalte warten; ein hoher INP lässt die Seite träge wirken; ein hoher CLS verursacht Fehlklicks und Ärger.

Die drei Core Web Vitals

Diese Schwellenwerte basieren auf Felddaten von echten Nutzern, nicht auf Labortests. Google bewertet sie am 75. Perzentil der Seitenaufrufe, was bedeutet, dass 75 % der Nutzererfahrungen den Schwellenwert „gut“ erreichen sollten.

Wie man Core Web Vitals misst

Sie benötigen sowohl Labordaten als auch Felddaten. Laborwerkzeuge simulieren einen einzelnen Seitenaufruf unter kontrollierten Bedingungen, während Felddaten (Real User Monitoring, RUM) tatsächliche Nutzererfahrungen über Geräte und Netzwerke hinweg erfassen.

Laborwerkzeuge

Feldwerkzeuge

So verwenden Sie die web-vitals-Bibliothek, um Metriken in der Konsole auszugeben:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Verwenden Sie navigator.sendBeacon() oder fetch(), um Daten zu senden
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

Für eine schnelle Überprüfung ohne Programmierung können Sie Online-Tools verwenden, die Leistungsdaten analysieren. Wenn Sie beispielsweise Server-Logs haben, kann der Nginx Log Analyzer Ihnen helfen, langsame Antworten zu identifizieren, die das LCP beeinträchtigen könnten.

Verbesserung des Largest Contentful Paint (LCP)

LCP ist oft die wirkungsvollste Metrik zur Optimierung. Sie wird von der Serverantwortzeit, der Ressourcenladezeit und dem clientseitigen Rendering beeinflusst.

Serverantwort optimieren

Ressourcen optimieren

Render-blockierende Ressourcen eliminieren

CSS und JavaScript im <head> blockieren das Rendering. Binden Sie kritisches CSS inline ein und laden Sie den Rest asynchron. Verwenden Sie für JavaScript defer oder async.

Verbesserung des Interaction to Next Paint (INP)

INP misst die Zeit von einer Nutzerinteraktion bis zum nächsten Paint. Es wird durch JavaScript-Ausführung, Event-Handling und Rendering-Arbeit beeinflusst.

JavaScript-Ausführungszeit reduzieren

Event-Handling optimieren

Rendering-Leistung verbessern

Verbesserung des Cumulative Layout Shift (CLS)

CLS misst unerwartete Layoutverschiebungen. Sie werden durch Elemente verursacht, die während des Ladens ihre Position ändern, oft aufgrund von Bildern ohne Dimensionen, Anzeigen oder dynamisch eingefügtem Inhalt.

Immer Größenattribute angeben

Legen Sie für Bilder und Videos width- und height-Attribute fest oder verwenden Sie CSS aspect-ratio. Dies reserviert Platz und verhindert Verschiebungen.

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

Platz für dynamische Inhalte reservieren

Font-Display Swap verwenden

Benutzerdefinierte Schriftarten können unsichtbaren Text (FOIT) oder Layoutverschiebungen verursachen, wenn sie geladen werden. Verwenden Sie font-display: swap, um sofort Ersatztext anzuzeigen, und laden Sie Schriftarten vor, um die Swap-Zeit zu reduzieren.

Alles zusammenführen: Ein praktischer Workflow

  1. Messen: Beginnen Sie mit PageSpeed Insights, um sowohl Labor- als auch Felddaten zu erhalten. Identifizieren Sie, welche Metrik verbessert werden muss.
  2. Diagnostizieren: Verwenden Sie Lighthouse und das Performance-Panel von Chrome DevTools, um Engpässe zu finden. Betrachten Sie das Wasserfalldiagramm, die Hauptthread-Aktivität und Layoutverschiebungen.
  3. Optimieren: Wenden Sie die oben genannten Techniken an und priorisieren Sie Änderungen, die die schlechteste Metrik betreffen.
  4. Testen: Führen Sie Labortests erneut durch, um Verbesserungen zu bestätigen. Stellen Sie in einer Staging-Umgebung bereit und verwenden Sie RUM zur Überwachung der Felddaten.
  5. Überwachen: Richten Sie kontinuierliches RUM mit der web-vitals-Bibliothek ein und warnen Sie bei Regressionen. Verwenden Sie die Search Console, um den Core Web Vitals-Status zu verfolgen.

Denken Sie daran, dass Optimierungen Kompromisse mit sich bringen können. Beispielsweise kann Lazy-Loading von Bildern den anfänglichen Ladevorgang verbessern, aber das LCP beeinträchtigen, wenn das LCP-Bild lazy geladen wird. Testen Sie immer mit echten Nutzern.

FAQ

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

Für LCP gilt: gut ≤2,5 s, verbesserungswürdig ≤4,0 s und schlecht >4,0 s. Für INP gilt: gut ≤200 ms, verbesserungswürdig ≤500 ms und schlecht >500 ms. Für CLS gilt: gut ≤0,1, verbesserungswürdig ≤0,25 und schlecht >0,25. Diese Schwellenwerte werden am 75. Perzentil der Seitenaufrufe bewertet.

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

Überwachen Sie Felddaten kontinuierlich mit RUM. Überprüfen Sie die Search Console monatlich auf allgemeine Trends. Führen Sie Labortests nach größeren Codeänderungen oder Bereitstellungen durch. Core Web Vitals können sich durch Updates Ihrer Website oder Drittanbieter-Skripte ändern.

Kann ich Core Web Vitals ohne Entwickler verbessern?

Einige Verbesserungen sind über Plugins oder Einstellungen möglich (z. B. Aktivieren von Caching, Optimieren von Bildern). Bedeutende Gewinne erfordern jedoch oft Codeänderungen wie das Inline-Einbinden von kritischem CSS, das Verzögern von JavaScript oder die Umstrukturierung des Ressourcenladens. Für INP und fortgeschrittene LCP-Optimierungen ist in der Regel die Hilfe eines Entwicklers erforderlich.

Bereit, Ihre Serverleistung zu analysieren? Probieren Sie unseren Nginx Log Analyzer, um langsame Anfragen zu identifizieren, die Ihre Core Web Vitals beeinträchtigen könnten.