Core Web Vitals

Core Web Vitals im Überblick

Google hat drei Metriken definiert, die messen, wie gut sich eine Webseite für echte Nutzer anfühlt. Diese Core Web Vitals sind seit 2021 ein offizieller Ranking-Faktor – schlechte Werte können Rankings kosten, gute Werte sind ein Wettbewerbsvorteil.

Die drei Metriken:

Hinweis: INP hat im März 2024 FID (First Input Delay) als offiziellen Core Web Vital abgelöst. FID maß nur die erste Interaktion – INP misst alle Interaktionen während der gesamten Seitennutzung.

Weitere wichtige Metriken (nicht Core, aber relevant)

• TTFB (Time to First Byte): Wie schnell antwortet der Server? Ziel: < 800ms
• FCP (First Contentful Paint): Wann erscheint das erste Element? Ziel: < 1,8s
• TBT (Total Blocking Time): Wie lange blockiert JS den Main Thread? Ziel: < 200ms

Technisch betrachtet

LCP optimieren

Das LCP-Element ist meist ein Hero-Bild oder ein großer Textblock. Der häufigste Fehler: Das Bild wird zu spät entdeckt, weil es im CSS oder per JavaScript geladen wird.

<!-- Preload das LCP-Element (Hero-Bild) – Browser entdeckt es sofort -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Bild mit korrekten Dimensionen – verhindert Layout Shift -->
<img
  src="/hero.webp"
  width="1200"
  height="600"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
  decoding="async"
>

LCP-Checkliste:

• Server-Response-Zeit (TTFB) unter 600ms
• Kein Render-Blocking CSS/JS vor dem LCP-Element
• Bild in WebP oder AVIF, richtig dimensioniert
• CDN nutzen für statische Assets
• fetchpriority="high" für das LCP-Bild

CLS vermeiden

/* Immer Dimensionen für Bilder und Videos setzen */
img, video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Platzhalter für Ads/Embeds reservieren */
.ad-slot {
  min-height: 250px;
  contain: layout;
}

/* Webfonts: font-display: optional verhindert FOUT */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: optional;
}

Häufige CLS-Ursachen:

• Bilder ohne width/height-Attribute
• Webfonts die beim Laden springen (FOUT)
• Dynamisch eingefügte Banner oder Cookie-Hinweise über bestehendem Content
• Lazy-geladene Inhalte ohne Platzhalter

INP optimieren

INP misst die Latenz von Klicks, Tastatureingaben und Taps. Hauptursache für schlechten INP: langer JavaScript-Task blockiert den Main Thread.

// Schlechter INP: Alles synchron im Click-Handler
button.addEventListener('click', () => {
  const result = heavyComputation(); // Blockiert 500ms
  updateUI(result);
});

// Besser: Aufteilen mit scheduler.yield()
button.addEventListener('click', async () => {
  updateUI('Wird berechnet...');
  await scheduler.yield(); // Main Thread freigeben
  const result = heavyComputation();
  updateUI(result);
});

Alle Metriken messen und reporten

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

function sendToAnalytics({ name, value, rating, id }) {
  // An eigenes Analytics oder Google Analytics senden
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_rating: rating,  // 'good' | 'needs-improvement' | 'poor'
  });
}

onLCP(sendToAnalytics);
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

CI-Integration mit Lighthouse

# .github/workflows/lighthouse.yml
- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: |
      https://www.example.com/
      https://www.example.com/blog/
    budgetPath: ./lighthouse-budget.json
    uploadArtifacts: true

# lighthouse-budget.json
[{
  "path": "/*",
  "timings": [
    { "metric": "largest-contentful-paint", "budget": 2500 },
    { "metric": "cumulative-layout-shift",  "budget": 100 },
    { "metric": "total-blocking-time",      "budget": 200 }
  ]
}]

Häufige Ursachen und Lösungen