TryQuickToolBox

Core Web Vitals: Messen und Verbessern der Web-Performance

Web2026-11-09TryQuickToolBox

Sie haben eine moderne Web-App entwickelt, aber Benutzer beschweren sich, dass sie langsam ist. Auch die Suchmaschinen-Rankings könnten darunter leiden. Core Web Vitals (CWV) sind Googles Metriken für die User Experience: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Dieser Leitfaden zeigt Ihnen, wie Sie sie genau messen und effektiv verbessern.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken, die Schlüsselaspekte der User Experience quantifizieren:

Diese Metriken werden sowohl im Feld (von echten Nutzern) als auch im Labor (in kontrollierten Umgebungen) gemessen. Beides ist wichtig.

So messen Sie Core Web Vitals

Sie benötigen sowohl Feld- als auch Labordaten, um Probleme zu diagnostizieren.

Felddaten (Real User Monitoring)

Felddaten spiegeln tatsächliche Nutzererfahrungen über Geräte und Netzwerke hinweg wider. Nutzen Sie diese Quellen:

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

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

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

Labordaten (Synthetisches Testen)

Labortools simulieren das Laden in einer kontrollierten Umgebung, was sie ideal für Debugging und CI-Integration macht.

Best Practice: Verwenden Sie Labordaten, um Fixes zu identifizieren, und Felddaten, um die Auswirkung zu validieren.

Verbesserung von Largest Contentful Paint (LCP)

LCP wird meist durch das Hero-Bild oder einen großen Textblock dominiert. Optimieren Sie diese:

  1. Optimieren Sie die LCP-Ressource: Komprimieren Sie Bilder (verwenden Sie WebP/AVIF), liefern Sie responsive Größen mit srcset und laden Sie das LCP-Bild vor, wenn es kritisch ist.
  2. Beseitigen Sie render-blockierende Ressourcen: Binden Sie kritisches CSS inline ein, verzögern Sie nicht-kritisches CSS und JavaScript.
  3. Verbessern Sie die Serverantwortzeit (TTFB): Verwenden Sie ein CDN, aktivieren Sie Caching und optimieren Sie Backend-Abfragen.
  4. Reduzieren Sie clientseitiges Rendering: Für SPAs ziehen Sie Server-Side Rendering (SSR) oder statische Generierung für die erste Ansicht in Betracht.

Beispiel: LCP-Bild vorladen:

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

Verbesserung von Interaction to Next Paint (INP)

INP misst die Verzögerung zwischen einer Nutzerinteraktion und dem nächsten Paint. Lange Aufgaben und schweres JavaScript sind häufige Ursachen.

  1. Teilen Sie lange Aufgaben auf: Verwenden Sie setTimeout, requestIdleCallback oder die Scheduler-API, um den Hauptthread freizugeben.
  2. Optimieren Sie Event-Handler: Entprellen oder drosseln Sie teure Handler; vermeiden Sie Layout-Thrashing.
  3. Reduzieren Sie die JavaScript-Ausführungszeit: Code-Splitting, Tree-Shaking und verzögern Sie nicht-kritische Skripte.
  4. Verwenden Sie Web Worker für CPU-intensive Arbeit.

Beispiel: Den Hauptthread freigeben:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // ... do some work
  await yieldToMain();
  // ... continue
}

Verbesserung von Cumulative Layout Shift (CLS)

CLS tritt auf, wenn Elemente unerwartet verschieben. Verhindern Sie dies durch:

Beispiel: Platz für eine Anzeige reservieren:

<div>
  <!-- ad loads here -->
</div>

Tools und Workflow für kontinuierliche Verbesserung

Performance ist keine einmalige Sache. Integrieren Sie die Messung in Ihren Workflow:

Für eine schnelle Prüfung führen Sie Ihre Seite durch PageSpeed Insights; es kombiniert Labor- und Felddaten.

FAQ

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

LCP: gut ≤2,5s, verbesserungswürdig ≤4s, schlecht >4s. INP: gut ≤200ms, verbesserungswürdig ≤500ms, schlecht >500ms. CLS: gut ≤0,1, verbesserungswürdig ≤0,25, schlecht >0,25.

Wie oft werden CrUX-Daten aktualisiert?

CrUX-Daten werden täglich aktualisiert, aber der Datensatz spiegelt ein rollierendes 28-Tage-Fenster wider. Die Search Console wird regelmäßig aktualisiert.

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

Ja. Viele Verbesserungen sind technischer Natur: Optimierung von Bildern, Verzögern von Skripten, Reservieren von Platz für dynamische Inhalte und Reduzierung der Arbeit am Hauptthread.

Bereit, die Performance Ihrer Website zu analysieren? Verwenden Sie unseren Nginx-Log-Analysator, um langsame Serverantworten zu identifizieren, die TTFB und LCP beeinflussen.