Im März 2024 hat Google die Core Web Vitals erneut aktualisiert und den Messwert FID durch INP ersetzt. Damit hat Google unmissverständlich klargemacht: Die technische Nutzererfahrung ist kein Nice-to-have mehr — sie ist ein handfester Ranking-Faktor. Webseiten, die langsam laden, während der Nutzung springen oder träge auf Interaktionen reagieren, werden von Google abgestraft.
Aber was genau sind die Core Web Vitals? Welche Werte sind gut, welche schlecht? Und vor allem: Wie optimiert man sie? In diesem umfassenden Guide erklären wir alles, was Sie wissen müssen — verständlich, praxisnah und mit konkreten Optimierungstipps.
Was sind Core Web Vitals?
Core Web Vitals sind drei spezifische Messwerte, die Google verwendet, um die Nutzererfahrung einer Webseite zu bewerten. Sie messen drei Aspekte der User Experience:
- LCP (Largest Contentful Paint): Wie schnell wird der Hauptinhalt der Seite sichtbar?
- INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Nutzerinteraktionen?
- CLS (Cumulative Layout Shift): Wie stabil ist das Layout während des Ladens?
Diese drei Metriken bilden zusammen ein umfassendes Bild der Nutzererfahrung und fließen direkt in das Google-Ranking ein.
LCP — Largest Contentful Paint
Was LCP misst
LCP misst die Zeit, die vergeht, bis das größte sichtbare Inhaltselement im Viewport gerendert ist. Das kann ein Bild, ein Video-Poster, ein großer Textblock oder ein Hintergrundbild sein. LCP ist der wichtigste Indikator dafür, wie schnell die Seite für den Nutzer „fertig" aussieht.
Die Zielwerte
- Gut: LCP unter 2,5 Sekunden
- Verbesserungsbedürftig: LCP zwischen 2,5 und 4,0 Sekunden
- Schlecht: LCP über 4,0 Sekunden
So optimieren Sie den LCP
Die häufigsten Ursachen für einen schlechten LCP und deren Lösungen:
- Langsame Serverantwortzeit (TTFB): Wechseln Sie zu einem leistungsfähigeren Hosting-Anbieter. Nutzen Sie serverseitiges Caching und ein CDN (Content Delivery Network), um Inhalte von Servern nahe am Nutzer auszuliefern.
- Render-blockierende Ressourcen: CSS und JavaScript, die das Rendering blockieren, verzögern den LCP erheblich. Nutzen Sie Critical CSS (Inline-CSS für den Above-the-fold-Bereich) und laden Sie unkritische Skripte asynchron.
- Nicht optimierte Bilder: Verwenden Sie moderne Bildformate wie WebP oder AVIF, nutzen Sie responsive Bilder mit dem srcset-Attribut und laden Sie Bilder unterhalb des sichtbaren Bereichs per Lazy Loading.
- Client-Side Rendering: Single-Page-Applications (SPAs), die den gesamten Inhalt per JavaScript rendern, haben oft schlechte LCP-Werte. Server-Side Rendering (SSR) oder Static Site Generation (SSG) lösen dieses Problem.
INP — Interaction to Next Paint
Was INP misst
INP wurde 2024 als Nachfolger von FID (First Input Delay) eingeführt und misst die Reaktionsfähigkeit der Seite während der gesamten Nutzungsdauer. Während FID nur die erste Interaktion gemessen hat, berücksichtigt INP alle Interaktionen — Klicks, Taps und Tastatureingaben — und bewertet die langsamste davon (mit Ausreißer-Bereinigung).
Die Zielwerte
- Gut: INP unter 200 Millisekunden
- Verbesserungsbedürftig: INP zwischen 200 und 500 Millisekunden
- Schlecht: INP über 500 Millisekunden
So optimieren Sie den INP
- JavaScript-Ausführung minimieren: Lange JavaScript-Tasks blockieren den Main Thread und machen die Seite unresponsiv. Brechen Sie lange Tasks in kleinere Chunks auf, nutzen Sie Web Workers für rechenintensive Operationen und entfernen Sie ungenutzten Code.
- Event-Handler optimieren: Stellen Sie sicher, dass Event-Handler schnell ausgeführt werden. Verschieben Sie aufwendige Berechnungen auf den nächsten Frame oder in einen Web Worker.
- Third-Party-Skripte reduzieren: Analytics, Chat-Widgets, Social-Media-Embeds und Tracking-Skripte sind häufige INP-Killer. Laden Sie sie asynchron oder per Interaction-Trigger (erst laden, wenn der Nutzer interagiert).
- DOM-Größe reduzieren: Eine exzessive DOM-Größe (über 1.500 Elemente) verlangsamt jede Interaktion. Vereinfachen Sie Ihre HTML-Struktur.
CLS — Cumulative Layout Shift
Was CLS misst
CLS quantifiziert, wie stark sich das Layout der Seite während des Ladevorgangs verschiebt. Kennen Sie das? Sie möchten auf einen Button klicken, aber plötzlich verschiebt sich das Layout, weil ein Bild geladen wird oder eine Werbung eingeblendet wird — und Sie klicken auf den falschen Bereich. Genau das misst CLS.
Die Zielwerte
- Gut: CLS unter 0,1
- Verbesserungsbedürftig: CLS zwischen 0,1 und 0,25
- Schlecht: CLS über 0,25
So optimieren Sie den CLS
- Abmessungen für Bilder und Videos definieren: Geben Sie immer width- und height-Attribute an, damit der Browser den Platz reservieren kann, bevor das Medium geladen ist. Oder nutzen Sie das CSS-Property aspect-ratio.
- Webfonts richtig laden: Custom Fonts können Layout-Shifts verursachen, wenn sie nach dem initialen Render geladen werden. Nutzen Sie font-display: swap oder optional, und laden Sie Fonts per preload vorab.
- Dynamische Inhalte mit Platzhaltern: Wenn Inhalte nachgeladen werden (z. B. Werbebanner, Cookie-Banner oder dynamische Komponenten), reservieren Sie den Platz vorab mit festen Abmessungen.
- Kein Content über bestehendem Content einfügen: Vermeiden Sie es, neue Elemente über bereits sichtbaren Inhalten einzufügen — das verschiebt alles nach unten und verursacht hohen CLS.
Core Web Vitals und ihr Einfluss aufs Ranking
Google hat bestätigt, dass die Core Web Vitals ein Ranking-Faktor sind — als Teil des übergeordneten „Page Experience"-Signals. Aber wie stark ist der Einfluss?
Die Wahrheit ist: Core Web Vitals allein katapultieren Sie nicht auf Platz 1. Relevanz und Qualität des Contents bleiben die stärksten Ranking-Faktoren. Aber bei vergleichbarer Inhaltsqualität geben die Core Web Vitals den Ausschlag. In umkämpften Nischen können sie den Unterschied zwischen Seite 1 und Seite 2 ausmachen.
Zudem beeinflussen gute Core Web Vitals indirekt weitere Ranking-Faktoren: Schnellere Seiten haben niedrigere Absprungraten, höhere Verweildauern und bessere Conversion Rates — alles Signale, die Google positiv bewertet.
Wie Sie Ihre Core Web Vitals messen
Google bietet mehrere Tools zur Messung der Core Web Vitals:
- Google PageSpeed Insights: Zeigt sowohl Labordaten als auch Felddaten (echte Nutzerdaten aus dem Chrome User Experience Report).
- Google Search Console: Der Bericht „Core Web Vitals" zeigt den Status aller URLs Ihrer Webseite — aufgeteilt nach Mobil und Desktop.
- Lighthouse: In den Chrome DevTools integriert, liefert detaillierte Performance-Berichte mit Optimierungsvorschlägen.
- Web Vitals Chrome Extension: Zeigt die Core Web Vitals Werte in Echtzeit während des Browsens.
- Chrome DevTools Performance Tab: Für detaillierte Analysen der Rendering-Performance und JavaScript-Ausführung.
Wichtig: Unterscheiden Sie zwischen Labordaten (simulierte Messungen unter kontrollierten Bedingungen) und Felddaten (echte Nutzerdaten). Felddaten sind aussagekräftiger, da sie die tatsächliche Erfahrung Ihrer Besucher widerspiegeln.
Core Web Vitals nach Technologie: Wo steht Ihr CMS?
Nicht alle Technologien sind gleich gut für Core Web Vitals. Laut dem HTTP Archive (2025) erreichen folgende Prozentsätze der Webseiten „gute" Core Web Vitals auf allen drei Metriken:
- Next.js: ca. 52 % aller Seiten bestehen alle drei Metriken
- WordPress (ohne Page Builder): ca. 38 %
- WordPress (mit Elementor/Divi): ca. 22 %
- Wix: ca. 41 %
- Squarespace: ca. 35 %
Frameworks wie Next.js haben einen strukturellen Vorteil durch automatische Bildoptimierung, Code-Splitting und Server-Side Rendering. Bei WordPress kommt es stark auf die Konfiguration, die Themes und die Plugins an. Unsere SEO-Agentur hilft Ihnen, die optimale technische Basis für Ihre Webseite zu finden.
Quick Wins: Die 5 schnellsten Optimierungen
Wenn Sie sofort starten möchten, hier sind die fünf Maßnahmen mit dem größten Impact bei geringstem Aufwand:
- Bilder komprimieren und in WebP konvertieren — reduziert LCP oft um 30–50 %
- width- und height-Attribute für alle Bilder setzen — eliminiert CLS durch Bilder
- Render-blockierendes CSS/JS identifizieren und verschieben — verbessert LCP
- Nicht genutzte Plugins/Skripte entfernen — verbessert INP und LCP
- Hosting auf einen Server in Deutschland/Europa umstellen — reduziert TTFB und damit LCP
Fazit: Core Web Vitals sind kein Trend, sondern Standard
Die Core Web Vitals sind gekommen, um zu bleiben. Google investiert massiv in die Messung und Gewichtung der Nutzererfahrung, und dieser Trend wird sich nur verstärken. Webseiten, die heute in gute Core Web Vitals investieren, sichern sich einen nachhaltigen Wettbewerbsvorteil.
Die gute Nachricht: Die meisten Optimierungen sind technisch machbar und die Ergebnisse messbar. Beginnen Sie mit den Quick Wins und arbeiten Sie sich systematisch vor. Wenn Sie Unterstützung brauchen, sind unsere Webdesign- und Performance-Experten für Sie da — wir optimieren Ihre Webseite für perfekte Core Web Vitals und bessere Rankings.