Seitenbefund
  • Beispielbericht
  • So läuft der Check ab
  • Blog
  • FAQ
  • Für Agenturen
  • Preise
DE/ENKostenlosen Kurzcheck starten
DE/EN
← Zurück zur Übersicht
Performance·18. April 2026·3 Min. Lesezeit

Core Web Vitals praktisch erklärt: LCP, INP, CLS

Was die drei Kennzahlen wirklich messen, warum sie sich gegenseitig beeinflussen, und welche drei Eingriffe in den meisten Audits den größten Hebel haben.

von Lukas Freitag

Core Web Vitals sind drei Feldmetriken, die Google im Chrome User Experience Report aggregiert. Sie sind kein Laborwert aus einem Lighthouse-Lauf, sondern das, was echte Nutzer mit echten Geräten in echten Netzen erleben. Wer das verwechselt, optimiert auf das falsche Signal.

LCP: das größte Element im sichtbaren Bereich

Largest Contentful Paint misst, wann das größte Bild- oder Text-Element im initialen Viewport gerendert wird. Der Schwellwert für "gut" liegt bei 2,5 Sekunden im 75. Perzentil. Was wir in Audits am häufigsten sehen:

  • Hero-Bilder ohne fetchpriority="high" — der Browser priorisiert CSS und Fonts, das Hero-JPEG kommt zu spät.
  • LCP-Element wird nach einem Render-Roundtrip via JavaScript eingefügt. Bei Single-Page-Apps mit React 19 ohne Server-Rendering liegt der LCP regelmäßig bei 4 s+.
  • srcset fehlt. Mobile lädt das gleiche 2400-px-Bild wie Desktop, Decoding allein dauert 800 ms auf Mid-Range-Android.

Der wirksamste Eingriff: das LCP-Element identifizieren (Chrome DevTools → Performance → "LCP"-Marker), als <img loading="eager" fetchpriority="high"> markieren, und ein passendes srcset mit mindestens drei Auflösungen liefern.

INP: die Reaktionszeit auf jede Interaktion

Interaction to Next Paint hat First Input Delay 2024 abgelöst. Der Unterschied: FID maß nur die erste Interaktion, INP misst jede. Schwellwert "gut" ist 200 ms im 75. Perzentil.

Die häufigste Ursache hoher INP-Werte: lange Tasks im Main-Thread. Wenn ein Click-Handler 250 ms blockiert, weil er synchron eine Liste von 5000 Zeilen durchgeht oder ein großes JSON-Objekt parst, sieht INP das.

  • #core-web-vitals
  • #lcp
  • #inp
  • #cls
  • #performance

Englische Fassung: core-web-vitals-explained

Wollen Sie wissen, wo Ihre Seite steht?

Der kostenlose Kurzcheck prüft Sichtbarkeit, Struktur, Performance und die technische Basis Ihrer Domain – passiv und in Minuten.

Kurzcheck starten

Verwandte Beiträge

  • SEO·29. April 2026·3 Min. Lesezeit

    Schema.org für KMU: Typen mit Wirkung

    Drei Schema-Typen, die kleine und mittelständische Websites spürbar in Rich Results bringen — und sechs, die zwar gut klingen, aber im Audit nichts bewegen.

    Weiterlesen →
  • Recht·25. April 2026·3 Min. Lesezeit

    Cookie-Banner ohne Dark Patterns

    Welche Anforderungen DSGVO Art. 7 und TTDSG §25 stellen, warum viele Banner scheitern, und welches minimale Muster beide Pflichten abdeckt.

    Weiterlesen →
← Zurück zur Übersicht
Seitenbefund

Passive Website-Prüfung für Sichtbarkeit, Struktur, Performance, Barrierefreiheit und technische Basis-Sicherheit.

Leistungen

  • Penetrationstest
  • SEO-Umsetzung
  • Barrierefreiheits-Umsetzung
  • Technische Basis-Härtung

Rechtliches

  • Impressum
  • Datenschutz
  • AGB

© 2026 Seitenbefund kontakt@seitenbefund.de

Wir prüfen nur öffentlich erreichbare Seiten. Keine Logins, keine Portscans, keine aktiven Sicherheitstests.

// Schlecht: blockiert den Main-Thread function onClick() { const result = items.filter((i) => heavyCheck(i)).map(transform) setState(result) } // Besser: in einen Microtask zerlegen, oder Worker function onClick() { scheduler.postTask( () => { const result = items.filter((i) => heavyCheck(i)).map(transform) setState(result) }, { priority: 'user-blocking' }, ) }

Die scheduler.postTask-API ist ab Chrome 94 stabil und der saubere Weg, eine Operation an Yieldpoints zu binden, ohne setTimeout(0)- Hacks.

CLS: Layoutverschiebungen

Cumulative Layout Shift ist die Summe aller unerwarteten Layout-Sprünge nach dem ersten Render. Schwellwert 0,1.

In Audits dominieren drei Quellen:

  1. Bilder ohne explizite Maße. <img> ohne width/height oder ohne aspect-ratio im CSS. Der Reflow nach Bildladung springt.
  2. Web Fonts ohne font-display: optional. Der Swap von Fallback auf Web Font verschiebt jeden Textblock.
  3. Cookie-Banner und Werbeplätze mit Lazy-Insertion. Wer das Cookie-Banner erst nach DOMContentLoaded einfügt und nicht reserviert, holt sich CLS-Werte > 0,3.

Der Fix für Punkt 1 ist trivial und hat in den letzten zehn Audits in jedem Fall den CLS unter 0,1 gedrückt: width und height schreiben, das CSS sorgt mit height: auto für die Skalierung.

Was diese Metriken nicht messen

Core Web Vitals sagen nichts über Time to Interactive auf langsamen Verbindungen, nichts über Memory-Pressure, nichts über JavaScript-Bundle-Größe. Eine Seite mit perfekten Vitals kann auf einem 3G-Verbindung trotzdem unbrauchbar sein, wenn sie 2 MB JavaScript zieht. Die Vitals sind eine Untergrenze, kein Beweis für Qualität.

Praktischer Hebel

Wenn Sie den LCP-Hebel ziehen, fallen INP und CLS oft mit. Ein hero-image mit fetchpriority="high" und expliziten Maßen verschiebt das Render-Profil so weit nach vorn, dass das parallel geladene JavaScript bis zur ersten Interaktion bereits geparst ist.

Was Ihre Domain heute liefert, sehen Sie im Seitenbefund-Kurzcheck — passive Messung, keine Installation, in Minuten.