Core Web Vitals: LCP, INP, CLS erklärt & wie man sie behebt

31. März 2026 · 12 Min. Lesezeit

Core Web Vitals sind Googles offizielle Metriken zur Messung der Benutzererfahrung im Web. Seit sie im Juni 2021 zu einem Ranking-Faktor wurden, haben sie grundlegend verändert, wie Entwickler, SEOs und Website-Betreiber an die Seitenleistung herangehen. Dieser umfassende Leitfaden erklärt jede Metrik, erläutert, was schlechte Werte verursacht, und bietet konkrete, umsetzbare Lösungen, die Sie sofort implementieren können.

Ob Sie eine E-Commerce-Website, eine Content-Plattform oder eine SaaS-Anwendung optimieren – das Verstehen und Verbessern der Core Web Vitals ist nicht mehr optional, sondern essentiell für sowohl Suchsichtbarkeit als auch Benutzerzufriedenheit.

Was sind Core Web Vitals?

Core Web Vitals (CWV) sind eine Reihe von drei spezifischen Metriken, die Google als wesentlich für die Bereitstellung einer guten Benutzererfahrung betrachtet. Sie messen drei kritische Dimensionen der Seitenleistung, die direkt beeinflussen, wie Benutzer Ihre Website wahrnehmen und mit ihr interagieren.

Die drei Core Web Vitals sind:

• Largest Contentful Paint (LCP) — Misst die Ladeleistung, indem verfolgt wird, wann das größte sichtbare Inhaltselement gerendert wird
• Interaction to Next Paint (INP) — Misst die Interaktivität, indem bewertet wird, wie schnell die Seite auf alle Benutzerinteraktionen reagiert
• Cumulative Layout Shift (CLS) — Misst die visuelle Stabilität, indem unerwartete Layout-Verschiebungen während des Seitenladens quantifiziert werden

Im Gegensatz zu synthetischen Labortests, die in kontrollierten Umgebungen laufen, bewertet Google Core Web Vitals anhand von realen Daten tatsächlicher Chrome-Nutzer durch den Chrome User Experience Report (CrUX). Das bedeutet, Ihre Website muss für echte Benutzer auf echten Geräten mit unterschiedlichen Netzwerkbedingungen gut funktionieren – nicht nur in Ihrer Entwicklungsumgebung.

Die Entwicklung der Core Web Vitals

Core Web Vitals sind nicht statisch. Google hat ursprünglich First Input Delay (FID) als Interaktivitätsmetrik einbezogen, ersetzte sie aber im März 2024 durch Interaction to Next Paint (INP). Diese Änderung spiegelt Googles Engagement wider, das zu messen, was für Benutzer tatsächlich wichtig ist, nicht nur das, was einfach zu messen ist.

Der Wechsel von FID zu INP war bedeutsam, weil FID nur die erste Interaktion maß, während INP alle Interaktionen während des gesamten Seitenlebenszyklus bewertet. Dies bietet eine umfassendere Sicht auf die Reaktionsfähigkeit und korreliert besser mit Benutzerfrust.

Warum Core Web Vitals für SEO und Business wichtig sind

Core Web Vitals sind Teil von Googles Page-Experience-Signalen, die auch Mobilfreundlichkeit, HTTPS-Sicherheit und das Fehlen aufdringlicher Interstitials umfassen. Während Inhaltsrelevanz und Autorität immer noch die Rankings dominieren, fungieren CWV als Tiebreaker – wenn zwei Seiten gleich relevant sind, gewinnt die mit besserer Leistung.

Aber die Auswirkungen gehen weit über Suchrankings hinaus. Leistung beeinflusst direkt Ihr Geschäftsergebnis:

Reale Fallstudien demonstrieren diese Auswirkungen. Als Vodafone ihren LCP um 31% verbesserte, verzeichneten sie eine 8%ige Umsatzsteigerung. Als Yahoo Japan CLS um 0,2 reduzierte, stieg ihre Sitzungsdauer um 15%. Das sind keine marginalen Gewinne – das sind geschäftstransformierende Verbesserungen.

Die Mobile-First-Realität

Mit Googles Mobile-First-Indexierung sind Ihre mobilen Core Web Vitals-Werte am wichtigsten. Mobile Geräte haben typischerweise langsamere Prozessoren, weniger Speicher und variablere Netzwerkbedingungen als Desktop-Computer, was die Optimierung herausfordernder, aber auch kritischer macht.

Mobile Nutzer sind auch weniger nachsichtig. Eine Studie von Google ergab, dass 53% der mobilen Nutzer Websites verlassen, die länger als 3 Sekunden zum Laden brauchen. Schlechte Core Web Vitals tragen direkt zu diesen Abbruchraten bei.

Largest Contentful Paint (LCP)

Largest Contentful Paint misst, wie lange es dauert, bis das größte sichtbare Inhaltselement im Viewport gerendert wird. Dies ist typischerweise ein Hero-Bild, Video-Thumbnail, großer Textblock oder Hintergrundbild. LCP ist der intuitivste Core Web Vital, weil er direkt mit der Wahrnehmung des Benutzers korreliert: „Wann wurde diese Seite geladen?"

LCP-Schwellenwerte

Welche Elemente zählen als LCP?

Nicht jedes Element auf Ihrer Seite kommt als LCP-Element in Frage. Nur diese Elementtypen werden berücksichtigt:

• <img>-Elemente
• <image>-Elemente innerhalb von <svg>
• <video>-Elemente mit Poster-Bildern
• Elemente mit Hintergrundbildern, die über CSS url() geladen werden
• Block-Level-Elemente, die Textknoten enthalten

Das LCP-Element kann sich während des Seitenladens ändern. Anfangs könnte es eine Textüberschrift sein, aber sobald Ihr Hero-Bild lädt, wird dieses zum neuen LCP-Element. Der endgültige LCP wird aufgezeichnet, wenn der Benutzer beginnt, mit der Seite zu interagieren oder wegnavigiert.

Häufige LCP-Probleme und Lösungen

Problem 1: Langsame Server-Antwortzeiten

Wenn Ihre Time to First Byte (TTFB) langsam ist, leidet alles andere. Der Browser kann nicht mit dem Rendern beginnen, bis er das HTML-Dokument erhält.

Lösungen:

• Verwenden Sie ein Content Delivery Network (CDN), um Inhalte von Standorten näher bei den Benutzern bereitzustellen
• Implementieren Sie serverseitiges Caching mit Redis oder Memcached
• Optimieren Sie Datenbankabfragen und fügen Sie geeignete Indizes hinzu
• Verwenden Sie HTTP/2 oder HTTP/3 für Multiplexing und Header-Kompression
• Erwägen Sie Edge-Computing-Lösungen wie Cloudflare Workers oder Vercel Edge Functions

Problem 2: Render-blockierende Ressourcen

CSS- und JavaScript-Dateien im <head> blockieren das Rendering, bis sie heruntergeladen und verarbeitet sind.

Lösungen:

• Binden Sie kritisches CSS direkt im HTML für Above-the-Fold-Inhalte ein
• Verschieben Sie nicht-kritisches CSS mit media="print" onload="this.media='all'"
• Fügen Sie async- oder defer-Attribute zu Script-Tags hinzu
• Entfernen Sie ungenutztes CSS und JavaScript mit Tools wie PurgeCSS
• Teilen Sie große Bundles mit Code-Splitting in kleinere Chunks auf

Problem 3: Große Bilddateien

Nicht optimierte Bilder sind der häufigste LCP-Übeltäter. Ein 5MB Hero-Bild wird Ihren LCP-Wert zerstören.

Lösungen:

• Komprimieren Sie Bilder mit modernen Formaten wie WebP oder AVIF (70-90% kleiner als JPEG)
• Implementieren Sie responsive Bilder mit srcset- und sizes-Attributen
• Verwenden Sie Bild-CDNs, die Bilder automatisch optimieren und in der Größe anpassen
• Fügen Sie fetchpriority="high" zu Ihrem LCP-Bild hinzu, um dessen Download zu priorisieren
• Laden Sie LCP-Bilder mit <link rel="preload" as="image"> vor

Problem 4: Client-seitiges Rendering

Wenn Ihr LCP-Element von JavaScript gerendert wird, müssen Benutzer warten, bis das JS heruntergeladen, geparst und ausgeführt wurde, bevor sie Inhalte sehen.

Lösungen:

• Verwenden Sie Server-Side Rendering (SSR) oder Static Site Generation (SSG)
• Implementieren Sie Streaming-SSR mit React Server Components oder ähnlichen Technologien
• Verwenden Sie Progressive Enhancement – rendern Sie eine Basisversion serverseitig, verbessern Sie mit JavaScript
• Erwägen Sie partielle Hydration, um die JavaScript-Ausführungszeit zu reduzieren

Fortgeschrittene LCP-Optimierung

Für Websites, die bereits den 2,5-Sekunden-Schwellenwert erfüllen, können diese fortgeschrittenen Techniken Sie in die Top-Performance-Stufe bringen:

Resource Hints: Verwenden Sie <link rel="preconnect"> für kritische Drittanbieter-Origins, um Verbindungen früh herzustellen. Verwenden Sie <link rel="dns-prefetch"> für weniger kritische Origins.

Priority Hints: Das fetchpriority-Attribut teilt dem Browser mit, welche Ressourcen am wichtigsten sind. Setzen Sie fetchpriority="high" auf Ihr LCP-Bild und fetchpriority="low" auf Below-the-Fold-Bilder.

103 Early Hints: Dieser HTTP-Statuscode ermöglicht es Servern, Preload-Hinweise zu senden, bevor die Hauptantwort bereit ist, und gibt dem Browser einen Vorsprung beim Herunterladen kritischer Ressourcen.

Interaction to Next Paint (INP)

Interaction to Next Paint misst die Reaktionsfähigkeit Ihrer Seite auf Benutzerinteraktionen während des gesamten Seitenlebenszyklus. Im Gegensatz zu seinem Vorgänger FID, der nur die erste Interaktion maß, bewertet INP jeden Klick, Tap und Tastendruck, um eine umfassende Sicht auf die Interaktivität zu bieten.

INP misst die Zeit von dem Moment, in dem ein Benutzer eine Interaktion initiiert, bis der Browser den nächsten Frame malt, der das visuelle Ergebnis dieser Interaktion zeigt. Dies umfasst Eingabeverzögerung, Verarbeitungszeit und Präsentationsverzögerung.

INP-Schwellenwerte

INP-Komponenten verstehen

INP besteht aus drei Phasen:

1. Eingabeverzögerung: Zeit von der Benutzeraktion bis zum Start der Event-Handler (Main-Thread muss verfügbar sein)
2. Verarbeitungszeit: Zeit für die Ausführung von Event-Handlern und zugehörigem JavaScript
3. Präsentationsverzögerung: Zeit vom Abschluss des Handlers bis zum Malen des nächsten Frames durch den Browser

Die langsamste Interaktion während einer