Core Web Vitals: die drei Zahlen, die Google misst

Core Web Vitals sind ein bestätigtes Rankingsignal und, wichtiger noch, ein Conversion-Faktor. Das aktuelle Trio:

• LCP (Largest Contentful Paint) – der Hauptinhalt ist in < 2,5 s sichtbar. Abhilfe: Statik/ISR, priority auf dem Hero-Bild, möglichst wenig blockierendes CSS, schnelle TTFB (siehe Rendering-Strategie).
• INP (Interaction to Next Paint) – hat im März 2024 FID abgelöst; jede Interaktion sollte in < 200 ms antworten. Abhilfe: weniger und später geladene externe Skripte, kleinere Client-Bundles ("use client" nur dort, wo nötig), lange Tasks aufteilen.
• CLS (Cumulative Layout Shift) – < 0,1. Abhilfe: Abmessungen für alle Bilder/Embeds, reservierter Platz für Banner, next/font (keine Sprünge beim Schriftwechsel).

Gemessen wird auf zwei Arten:

• Im Labor: Lighthouse in der CI (z. B. @lhci/cli bei jedem PR) fängt Rückschritte vor dem Deploy ab.
• Im Feld: Daten echter Nutzer sind das, worauf Google tatsächlich rankt. Sie binden sie mit einem Hook ein:

// app/web-vitals.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    // an die eigene Analytics senden
    navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
  });
  return null;
}

Felddaten finden Sie in der Search Console → Core Web Vitals oder in PageSpeed Insights (zeigt CrUX, wenn genug Daten vorliegen).

Checkliste:

• LCP < 2,5 s, INP < 200 ms, CLS < 0,1 in den Felddaten, nicht nur in Lighthouse
• Lighthouse CI oder Entsprechendes schützt vor Rückschritten
• useReportWebVitals speist die Analytics mit Metriken echter Nutzer
• Mobile separat geprüft – dort scheitern die meisten Websites