⚡ Onpage

Core Web Vitals

LCP, CLS, INP – die drei Google-Performance-Metriken, die seit 2021 ein Ranking-Faktor sind. Was sie messen, wie man sie verbessert, welche Werkzeuge helfen.

Was sind die Core Web Vitals?

Google hat 2021 drei Metriken zum offiziellen Ranking-Faktor gemacht:

  • LCP (Largest Contentful Paint): Wann ist das größte sichtbare Element fertig geladen? Ziel: ≤ 2,5 s.
  • INP (Interaction to Next Paint): Reaktionszeit auf Klicks/Eingaben. Ziel: ≤ 200 ms. (2024 nachträglich FID abgelöst.)
  • CLS (Cumulative Layout Shift): Layout-Verschiebung während des Ladens. Ziel: ≤ 0,1.

Daneben relevant: TTFB (Time to First Byte) – keine eigene Core-Vital-Metrik, aber LCP-Voraussetzung.

LCP optimieren

Das LCP-Element ist meist ein großes Hero-Bild, Headline-Text oder Video. Was hilft:

  • Bilder optimieren: AVIF/WebP statt JPEG/PNG, bei Hero-Bildern fetchpriority="high".
  • Schriften nicht blockieren: font-display: swap, kritische Schriften preloaden.
  • Server-TTFB unter 200 ms: gutes Hosting, Caching, CDN davor.
  • Render-blockierende Ressourcen reduzieren: kritisches CSS inline, JS am Ende oder async/defer.

INP optimieren

Hier wird's schwieriger. INP misst die längste Reaktionsdauer während einer Session. Hauptverursacher: schweres JavaScript.

  • JS-Bundle aufteilen (Code-Splitting).
  • Lange Tasks aufbrechen mit scheduler.yield(), requestIdleCallback oder setTimeout(0).
  • Third-Party-Scripts ausmisten – jeder unnötige Tag-Manager-Eintrag belastet INP.
  • Event-Handler effizient: teure DOM-Operationen vermeiden, debouncen.

CLS optimieren

  • Bilder mit Width/Height-Attributen: reserviert Platz vor dem Laden.
  • Schriften vorladen mit rel="preload" – verhindert FOUT-Sprünge.
  • Ads & Embeds mit Platzhaltern.
  • Banner nicht „herabschieben": Cookie-Banner sollten über den Content legen, nicht reinschieben.

Wie messe ich?

  • Field Data (real): Google Search Console Core Web Vitals-Report (basiert auf echten Chrome-Nutzungs-Daten, CrUX).
  • Lab Data (synthetisch): PageSpeed.de, PageSpeed Insights, Lighthouse in Chrome DevTools, WebPageTest.

Wichtig: Felddaten zählen für Rankings, nicht Lab-Daten.

Was bringt der ganze Aufwand?

Direkt-Ranking-Boost durch CWV ist gering (Google nennt es „Tiebreaker"). Aber: bessere UX = mehr Verweildauer, mehr Conversions = indirektes Ranking-Signal. In wettbewerbsintensiven Nischen wird CWV zum Differenzierer.

Realistische Ziele setzen

  1. Alle drei CWV im grünen Bereich – das ist die Pflichtlinie.
  2. Lighthouse Mobile-Score 70+ – guter Mittelfeldwert.
  3. Lighthouse Mobile-Score 90+ – Premium-Liga.

Konkrete Frage zu Core Web Vitals?

Wir machen das seit 14 Jahren in der Praxis. Erste Einschätzung kostenlos.

→ Kontakt aufnehmen