Wenn Ihre Website ewig zum Laden braucht, sich träge anfühlt, sobald jemand etwas anklicken möchte, oder Elemente herumspringen, als hätten sie zu viel Kaffee getrunken, dann haben Sie ein Core-Web-Vitals-Problem. Und ja, Google schaut genau hin.
Core Web Vitals sind Googles Art zu messen, wie sich Ihre Website für echte Menschen tatsächlich anfühlt. Nicht, wie sie in einem Design-Mockup aussieht, nicht, wie clever der Code unter der Haube ist, sondern wie sie sich in der Praxis verhält, wenn jemand sie in der Mittagspause auf dem Smartphone aufruft. Und seit 2021 sind diese Metriken ein bestätigter Google-Ranking-Faktor. Sie einfach zu ignorieren? Das ist eigentlich keine Option mehr.
Egal, ob Sie als Unternehmer:in rätseln, warum Ihre Website nicht rankt, als Entwickler:in jede letzte Millisekunde herauskitzeln wollen oder einfach neugierig sind, was diese seltsamen Werte in PageSpeed Insights eigentlich bedeuten: Dieser Leitfaden erklärt Core Web Vitals in verständlicher Sprache. Wir gehen darauf ein, was jede Metrik misst, warum sie wichtig ist und, am wichtigsten, wie Sie die Dinge, die Ihre Werte nach unten ziehen, tatsächlich beheben.
Legen wir los.
Was sind Core Web Vitals
Core Web Vitals sind ein Satz von drei konkreten Metriken, mit denen Google die Nutzererfahrung einer Webseite bewertet. Sie konzentrieren sich auf die drei Dinge, die am meisten zählen: Ladeleistung, Interaktivität und visuelle Stabilität.
Hier die Übersicht:
- LCP (Largest Contentful Paint) misst, wie schnell der Hauptinhalt Ihrer Seite lädt
- INP (Interaction to Next Paint) misst, wie schnell Ihre Seite reagiert, wenn jemand mit ihr interagiert
- CLS (Cumulative Layout Shift) misst, wie viel auf dem Bildschirm unerwartet herumrutscht
Google hat diese Metriken als Teil seiner umfassenderen Page-Experience-Signale eingeführt und seither kontinuierlich weiterentwickelt. Die größte jüngste Änderung? Im März 2024 hat INP offiziell FID (First Input Delay) als Metrik für die Reaktionsfähigkeit abgelöst. Wenn Sie immer noch für FID optimieren, sind Sie ein bisschen hinterher, nur so nebenbei.
Diese Metriken werden über echte Nutzer:innen mithilfe des Chrome User Experience Report (CrUX) erhoben. Das bedeutet: Google führt nicht einfach nur Labortests auf Ihrer Website durch, sondern misst, wie sie sich tatsächlich für die Menschen verhält, die sie in der realen Welt besuchen. Das ist spannend und ein kleines bisschen beängstigend zugleich.
Die Schwellenwerte, die Google als “gut” betrachtet:
- LCP: 2,5 Sekunden oder weniger
- INP: 200 Millisekunden oder weniger
- CLS: 0,1 oder weniger
Wenn Sie diese Werte für mindestens 75 % Ihrer Seitenaufrufe erreichen, betrachtet Google Ihre Core Web Vitals als bestanden. Alles darunter heißt, dass Sie sowohl Rankings als auch Nutzerzufriedenheit verschenken.
LCP: Largest Contentful Paint
LCP misst, wie lange es dauert, bis das größte sichtbare Inhaltselement auf dem Bildschirm erscheint. Das ist in der Regel ein Hero-Bild, eine große Überschrift, ein umfangreicher Textblock oder ein Video-Thumbnail, also im Grunde das, was oberhalb der Falz am meisten Platz einnimmt.
Warum ist gerade diese Metrik so wichtig? Weil LCP dem am nächsten kommt, was eine echte Person als “die Seite ist geladen” wahrnimmt. Niemanden interessiert isoliert Ihr DOMContentLoaded-Event oder Ihre Time to First Byte. Die Menschen wollen tatsächlichen Inhalt sehen. LCP erfasst genau diesen Moment.
Googles eigene LCP-Dokumentation geht tief in die technischen Details, aber hier die praktische Aufschlüsselung.
Was meist einen schlechten LCP verursacht:
- Langsame Server-Antwortzeiten (Ihre TTFB zieht alles nach unten)
- Renderblockierende JavaScript- und CSS-Dateien
- Nicht optimierte Bilder, riesige Dateigrößen, keine modernen Formate
- Client-seitiges Rendering, das das Erscheinen des eigentlichen Inhalts verzögert
- Lazy Loading Ihres Hero-Bilds (ernsthaft, tun Sie das nicht)
So verbessern Sie ihn:
- Optimieren Sie Ihre Server-Antwortzeit. Wenn Ihre TTFB über 600 ms liegt, fangen Sie dort an. Nutzen Sie ein CDN, aktivieren Sie Caching und ziehen Sie ein Upgrade Ihres Hostings in Betracht.
- Laden Sie kritische Assets vor. Verwenden Sie
<link rel="preload">für Ihr Hero-Bild und kritische Schriften, damit der Browser sie sofort holt. - Setzen Sie auf moderne Bildformate. AVIF und WebP sind bei gleicher visueller Qualität deutlich kleiner als JPEG und PNG. Ihr LCP-Bild sollte unbedingt in einem dieser Formate vorliegen.
- Laden Sie Bilder oberhalb der Falz nicht per Lazy Loading. Ihr Hero-Bild sollte sofort laden und nicht auf ein Scroll-Event warten, das noch gar nicht stattgefunden hat. Das ist einer der häufigsten Fehler überhaupt.
- Minimieren Sie renderblockierende Ressourcen. Binden Sie kritisches CSS inline ein, verzögern Sie nicht zwingend nötiges JavaScript und halten Sie den kritischen Rendering-Pfad so schlank wie möglich.
Ein guter LCP liegt bei 2,5 Sekunden oder darunter. Zwischen 2,5 und 4 Sekunden besteht Verbesserungsbedarf. Über 4 Sekunden? Das ist ein Warnsignal, und Google behandelt es auch so.
INP: Interaction to Next Paint
INP ist die neueste Metrik im Core-Web-Vitals-Aufgebot, und sie ist ziemlich bedeutsam. Sie hat im März 2024 First Input Delay (FID) abgelöst, weil FID nur die Verzögerung der ersten Interaktion gemessen hat, was ehrlich gesagt nicht die ganze Geschichte erzählt hat. INP misst die Reaktionsfähigkeit aller Interaktionen während des gesamten Seitenbesuchs und meldet dann (grob gesagt) die schlechteste.
In verständlicher Sprache: Wenn jemand auf eine Schaltfläche tippt, einen Link anklickt oder etwas in ein Feld eingibt, wie lange dauert es, bis die Seite sichtbar reagiert? Das ist INP.
Was einen schlechten INP verursacht:
- Aufwändige JavaScript-Ausführung, die den Haupt-Thread blockiert
- Lange Aufgaben (alles über 50 ms gilt für Chrome als lange Aufgabe)
- Aufwändige Event-Handler, die bei einer Nutzerinteraktion viel zu viel erledigen
- Drittanbieter-Skripte, denken Sie an Analytics, Werbung, Chat-Widgets, die alle um Rechenzeit konkurrieren
- Komplexe DOM-Strukturen, deren Aktualisierung nach einer Interaktion ewig dauert
So verbessern Sie ihn:
- Teilen Sie lange Aufgaben auf. Nutzen Sie
setTimeout,requestAnimationFrameoder diescheduler.yield()-API, um aufwändige Arbeit in kleinere Häppchen zu zerlegen, damit der Browser zwischendurch auf Nutzereingaben reagieren kann. - Reduzieren Sie die Größe Ihres JavaScript-Bundles. Weniger JavaScript bedeutet weniger zu parsen und auszuführen. Code-Splitting und Tree-Shaking sind hier Ihre besten Freunde.
- Entprellen Sie Event-Handler. Wenn bei Ihnen Scroll- oder Eingabe-Handler ständig feuern, entprellen Sie sie, damit sie nicht bei jedem einzelnen Event laufen.
- Prüfen Sie Drittanbieter-Skripte gnadenlos. Dieses Chat-Widget oder Social-Embed fügt Ihrer Interaktionsverzögerung womöglich 200 ms hinzu. Ist es den Kompromiss wert?
- Nutzen Sie Web Worker für aufwändige Berechnungen. Lagern Sie Nicht-UI-Arbeit in einen Web Worker aus, damit sie den Haupt-Thread nicht blockiert.
INP ist der Bereich, in dem viele Websites derzeit am meisten kämpfen, weil er Performance-Probleme aufdeckt, die schon immer da waren, die FID aber nie erfasst hat. Wenn sich Ihre Website träge anfühlt, sobald jemand mit ihr interagiert, sagt Ihnen INP wahrscheinlich genau, warum.
CLS: Cumulative Layout Shift
CLS misst die visuelle Stabilität, also konkret, wie viel Inhalt unerwartet herumrutscht, während die Seite lädt. Sie kennen diese ärgerliche Situation, in der Sie gerade auf einen Link tippen wollen und die Seite plötzlich springt, weil darüber eine Werbung oder ein Bild geladen wurde? Das ist ein Layout-Shift, und CLS beziffert genau, wie schlimm er ist.
Die häufigsten Übeltäter hinter einem schlechten CLS:
- Bilder und Videos ohne explizite Breiten- und Höhenangaben
- Werbung, Embeds oder iframes, die ohne reservierten Platz laden
- Dynamisch eingefügte Inhalte, die bestehende Inhalte nach unten schieben
- Webschriften, die einen Flash of Invisible Text (FOIT) oder Flash of Unstyled Text (FOUT) verursachen
- Spät ladende Banner oder Cookie-Hinweise, die alles nach unten drücken
So verbessern Sie ihn:
- Legen Sie bei Bildern und Videos immer Breite und Höhe fest. Oder nutzen Sie die CSS-Eigenschaft
aspect-ratio. Damit kann der Browser den richtigen Platz reservieren, bevor das Asset tatsächlich lädt. - Reservieren Sie Platz für Werbung und Embeds. Verwenden Sie einen Container mit fester Mindesthöhe, damit der Inhalt darunter nicht springt, wenn die Werbung endlich erscheint.
- Nutzen Sie
font-display: swapzusammen mit Font-Preloading. Das verhindert unsichtbaren Text und reduziert den Layout-Shift, wenn benutzerdefinierte Schriften greifen. - Vermeiden Sie das Einfügen von Inhalten oberhalb bestehender Inhalte. Wenn Sie ein Banner oder eine Benachrichtigung hinzufügen müssen, verwenden Sie eine Sticky- oder Fixed-Position oder fügen Sie sie unterhalb der Falz ein.
- Nutzen Sie die CSS-Eigenschaft
contain, wo es sinnvoll ist. Sie teilt dem Browser mit, dass bestimmte Elemente das Layout ihrer Geschwisterelemente nicht beeinflussen, was unerwartete Verschiebungen verhindert.
CLS ist tückisch, weil er während der Entwicklung oft völlig in Ordnung ist, in der realen Welt mit langsameren Verbindungen und unvorhersehbar ladenden Ressourcen aber furchtbar wird. Testen Sie immer auf echten Geräten mit gedrosselten Verbindungen, nicht nur auf Ihrem MacBook am Glasfaseranschluss.
Wie Core Web Vitals Ihr SEO beeinflussen
Gut, kommen wir zu dem Teil, der alle wirklich interessiert: Wie viel zählen Core Web Vitals tatsächlich fürs SEO?
Google war hierzu recht offen. Core Web Vitals sind ein bestätigtes Ranking-Signal im Rahmen des Page-Experience-Updates. Aber hier die Nuance, die viele übersehen: Sie sind nicht der wichtigste Ranking-Faktor. Relevante, hochwertige Inhalte gewinnen nach wie vor. Wenn Ihr Artikel die beste Antwort auf die Suchanfrage von jemandem ist, kann er auch mit mittelmäßigen Core Web Vitals gut ranken.
Aber Folgendes gilt: Wenn ansonsten alles gleich ist, hat die Website mit den besseren Core Web Vitals die Nase vorn. Stellen Sie es sich wie ein Tiebreaker vor. Wenn zwei Seiten gleich hervorragende Inhalte haben, bevorzugt Google die, die schneller lädt, zügiger reagiert und bei der nichts herumspringt.
Und über das direkte Ranking hinaus haben Core Web Vitals über das Nutzerverhalten einen enormen indirekten Einfluss:
- Schnellere Seiten haben niedrigere Absprungraten
- Bessere Interaktivität hält Menschen länger bei der Stange
- Stabile Layouts reduzieren Frust und steigern Conversions
Die Google Search Console verfügt über einen eigenen Core-Web-Vitals-Bericht, der Ihnen genau zeigt, welche Seiten bestehen und welche Nacharbeit brauchen. Wenn Sie es mit SEO ernst meinen, sollten Sie diesen regelmäßig prüfen.
Eine Sache noch, die zu wissen lohnt: Google bewertet Core Web Vitals auf Seitenebene und fasst ähnliche Seiten zusammen. Wenn Ihre Blogbeiträge also alle dieselbe Vorlage nutzen und einer davon schlechte CWV hat, ist es bei den anderen wahrscheinlich genauso. Beheben Sie die Vorlage, beheben Sie alle. Das ist auch der Grund, warum moderne Webdesign-Trends zunehmend von Grund auf rund um Performance gebaut werden.
So messen Sie Ihre Core Web Vitals
Sie können nicht verbessern, was Sie nicht messen. Zum Glück stellt Ihnen Google eine ganze Reihe kostenloser Tools bereit, um Ihre Core Web Vitals zu prüfen. Hier die, die Sie wirklich kennen sollten:
PageSpeed Insights
PageSpeed Insights ist für die meisten das Tool der Wahl. Geben Sie eine beliebige URL ein und erhalten Sie sowohl Labordaten (simulierte Tests) als auch Felddaten (echte Nutzer:innen) für alle drei Core Web Vitals. Es liefert Ihnen außerdem konkrete, nach Wirkung priorisierte Empfehlungen, was Sie beheben sollten. Fangen Sie hier an.
Google Search Console
Der Core-Web-Vitals-Bericht in der Search Console zeigt Ihnen, welche Seiten Ihrer gesamten Website gut sind, Verbesserungsbedarf haben oder schlecht abschneiden. Das ist die Vogelperspektive, die Sie brauchen, um Trends über die Zeit zu beobachten und Verschlechterungen abzufangen, bevor sie Ihre Rankings einbrechen lassen.
Chrome DevTools (Lighthouse)
Direkt in Chrome integriert, führt Lighthouse ein Labor-Audit Ihrer Seite durch und liefert Performance-Werte samt umsetzbarer Vorschläge. Super hilfreich, um während der Entwicklung konkrete Probleme zu debuggen, wenn Sie Änderungen in Echtzeit testen müssen.
Chrome User Experience Report (CrUX)
CrUX ist der Datensatz mit Metriken echter Nutzer:innen, den Google tatsächlich für Ranking-Zwecke verwendet. Sie können über PageSpeed Insights, das CrUX-Dashboard oder die CrUX-API darauf zugreifen. Das ist die Grundwahrheit, das, worauf Google buchstäblich schaut, wenn es Ihre Website bewertet.
Web-Vitals-JavaScript-Bibliothek
Wenn Sie Core Web Vitals in Ihren eigenen Analytics verfolgen möchten, macht Ihnen Googles quelloffene web-vitals-Bibliothek das super einfach. Ein paar Zeilen Code und Sie messen alle drei Metriken bei Ihren echten Besucher:innen.
Profi-Tipp: Testen Sie nicht nur auf Ihrem schicken MacBook mit Glasfaseranschluss. Der echte Test läuft auf einem Android-Smartphone der Mittelklasse mit 4G-Verbindung. Dort surft der Großteil der Welt tatsächlich, und genau darauf legt Google Wert.
Schnelle Erfolge zur Verbesserung Ihrer Werte
Wenn Ihre Core-Web-Vitals-Werte mau aussehen und Sie schnell vorankommen müssen, hier einige schnelle Erfolge, die meist das größte Verhältnis von Aufwand zu Wirkung bieten:
- Komprimieren und konvertieren Sie Ihre Bilder. Wechseln Sie zu WebP oder AVIF, skalieren Sie auf die tatsächliche Anzeigegröße und komprimieren Sie konsequent. Allein das kann Ihrem LCP Sekunden ersparen.
- Fügen Sie allen Bildern und Videos explizite Abmessungen hinzu. Breiten- und Höhenattribute oder CSS
aspect-ratio. Das ist mit Abstand die schnellste Einzelmaßnahme gegen CLS-Probleme. - Verzögern Sie nicht kritisches JavaScript. Fügen Sie
deferoderasynczu Skript-Tags hinzu, die nicht sofort ausgeführt werden müssen. Verschieben Sie Drittanbieter-Skripte unter die Falz. - Laden Sie Ihr LCP-Bild vor. Eine Zeile in Ihrem
<head>:<link rel="preload" as="image" href="your-hero.webp">. Das war’s. - Nutzen Sie ein CDN. Statische Assets von Edge-Servern in der Nähe Ihrer Nutzer:innen auszuliefern, senkt die TTFB drastisch und verbessert den LCP auf ganzer Linie.
- Prüfen Sie Ihre Drittanbieter-Skripte. Entfernen Sie alles, was Sie nicht aktiv nutzen. Dieses alte Analytics-Tag, dieses Social-Widget, das niemand anklickt, dieses A/B-Test-Skript von vor zwei Jahren, weg damit.
- Aktivieren Sie Browser-Caching. Setzen Sie passende
Cache-Control-Header, damit wiederkehrende Besucher:innen nicht alles von Grund auf neu herunterladen müssen. - Minimieren Sie die Auswirkung des Schriftenladens. Laden Sie kritische Schriften vor, nutzen Sie
font-display: swapund überlegen Sie, die Zahl der geladenen Schriftschnitte zu reduzieren.
Das Schöne an Core Web Vitals ist, dass sich kleine Änderungen schnell summieren. Sie brauchen nicht immer eine große Überarbeitung. Manchmal sind es nur eine Handvoll gezielter Korrekturen, die Ihre Werte von Rot auf Grün bringen.
Wenn sich Performance-Optimierung überwältigend anfühlt oder Sie einfach möchten, dass sich jemand sauber darum kümmert, genau das machen wir. Wir bauen Websites mit von Tag eins eingebauten Core Web Vitals, damit Sie nach dem Launch nicht hektisch nachbessern müssen.
Häufig gestellte Fragen
Was sind Core Web Vitals?
Core Web Vitals sind drei konkrete Metriken, mit denen Google die Nutzererfahrung misst: LCP (Ladegeschwindigkeit), INP (Interaktivität) und CLS (visuelle Stabilität). Sie sind Teil von Googles Page-Experience-Ranking-Signalen und beeinflussen direkt, wie Ihre Website in den Suchergebnissen abschneidet.
Beeinflussen Core Web Vitals das SEO-Ranking?
Ja. Core Web Vitals sind ein bestätigter Google-Ranking-Faktor. Inhaltsqualität ist zwar nach wie vor das wichtigste Signal, doch bessere Core Web Vitals können Ihnen gegenüber Mitbewerbern mit vergleichbaren Inhalten einen Vorsprung verschaffen. Betrachten Sie es als den Tiebreaker.
Was hat First Input Delay (FID) abgelöst?
Interaction to Next Paint (INP) hat FID im März 2024 abgelöst. Anders als FID, das nur die Verzögerung der ersten Interaktion gemessen hat, misst INP die Reaktionsfähigkeit über alle Interaktionen während eines Seitenbesuchs hinweg und liefert so ein deutlich vollständigeres Bild davon, wie sich Ihre Website tatsächlich anfühlt.
Was ist ein guter LCP-Wert?
Google betrachtet einen LCP von 2,5 Sekunden oder weniger als “gut”. Zwischen 2,5 und 4 Sekunden besteht Verbesserungsbedarf, und über 4 Sekunden gilt als schlecht. Für die meisten Websites sind die Optimierung von Bildern und der Server-Antwortzeit die schnellsten Wege, den LCP zu verbessern.
Wie oft sollte ich meine Core Web Vitals prüfen?
Mindestens einmal im Monat. Wenn Sie aktiv Performance-Änderungen vornehmen, prüfen Sie wöchentlich. Der Core-Web-Vitals-Bericht der Google Search Console ist das beste Tool für die laufende Überwachung, da er Daten echter Nutzer:innen über die Zeit verfolgt und Verschlechterungen automatisch kennzeichnet.
