Web Vitals Erklärer

Core Web Vitals (LCP/INP/CLS/FCP/TTFB) Schwellwerte und Verbesserungstipps

LCP

Largest Contentful Paint

Time until the largest visible content element (image, video, large text block) is rendered.

Thresholds

Good: ≤ 2.5 seconds

Needs improvement: ≤ 4 seconds

Poor: > 4 seconds

How to improve

Optimize hero images (modern formats, proper sizing, preload)
Reduce server response time (CDN, edge caching)
Eliminate render-blocking JS/CSS
Preload critical fonts; prefer system fonts for above-the-fold text

INP

Interaction to Next Paint

interactivity

Slowest-ish interaction latency observed during the page session (replaces FID since 2024).

Thresholds

Good: ≤ 200 ms

Needs improvement: ≤ 500 ms

Poor: > 500 ms

How to improve

Break up long tasks (>50ms) — yield to main thread
Defer non-critical JS (input handlers > rendering)
Avoid heavy work in event handlers
Use CSS transitions instead of JS animation where possible

CLS

Cumulative Layout Shift

stability

Sum of all unexpected layout shifts during the lifetime of the page (unitless score).

Thresholds

Good: ≤ 0.1 score

Needs improvement: ≤ 0.25 score

Poor: > 0.25 score

How to improve

Always set explicit width/height on images and ads
Reserve space for embeds before they load
Avoid inserting content above existing content (banners, cookie prompts)
Use transform: translate() instead of layout-affecting properties for animations

FCP

First Contentful Paint

Time until the first text or image is rendered (any DOM content).

Thresholds

Good: ≤ 1.8 seconds

Needs improvement: ≤ 3 seconds

Poor: > 3 seconds

How to improve

Reduce server response time
Eliminate render-blocking resources
Inline critical CSS

TTFB

Time to First Byte

Time between request and first byte of the response (server + network).

Thresholds

Good: ≤ 800 ms

Needs improvement: ≤ 1800 ms

Poor: > 1800 ms

How to improve

CDN + edge caching
Optimize backend (DB queries, N+1 etc.)
Use HTTP/2 or HTTP/3
Reduce redirect chains

Wie man es benutzt

Lesen Sie die Karten für jede Core Web Vital durch: LCP, INP, CLS, FCP und TTFB.
Beachten Sie die Gut / Verbesserung benötigt / Schlecht Schwellenwert-Werte, die als farbkodierte Abzeichen für jede Metrik angezeigt werden.
Überprüfen Sie die aufgelisteten Verbesserungs-Tipps unter jeder Metrik, um umsetzbare Fixes zu verstehen.

Beispiele

LCP zeigt Gut ≤ 2500 ms, Verbesserung benötigt ≤ 4000 ms, Schlecht > 4000 ms – Verbesserungs-Tipps umfassen Hero-Bilder optimieren und Render-blockierendes Ressourcen eliminieren.
CLS zeigt Gut ≤ 0,1, Schlecht > 0,25 – Tipps erwähnen Platz für Ads und Lazy-geladene Bilder reservieren, um Layout-Verschiebungen zu verhindern.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.