Das Wichtigste in Kürze
- LCP misst, wie schnell das größte sichtbare Element erscheint, meist ein Bild oder eine Überschrift.
- INP misst, wie schnell die Seite auf Klicks und Eingaben reagiert.
- CLS misst, ob Inhalte beim Laden springen und Nutzer danebenklicken.
- Echte Nutzerdaten zählen mehr als Laborwerte aus einzelnen Tests.
- Die größten Hebel sind Bilder, Schriften, Skripte von Drittanbietern und Platzhalter für nachgeladene Elemente.
Was sind die Core Web Vitals und warum sind sie wichtig?
Die Core Web Vitals sind drei von Google definierte Messwerte für Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität einer Seite, die auf dem Verhalten echter Besucher beruhen. Sie fließen in die Bewertung der Seitenqualität ein und sind damit ein Rankingfaktor unter vielen.
Wichtiger als der Rankingaspekt ist der direkte Einfluss auf Ihre Besucher. Eine Seite, die lange leer bleibt, auf Tippen nicht reagiert oder deren Buttons beim Laden wegrutschen, wird verlassen, bevor sie ihre Aufgabe erfüllen kann. Die Core Web Vitals machen diese Erfahrung messbar und vergleichbar.
Google unterscheidet dabei zwischen Felddaten und Labordaten. Felddaten stammen von echten Nutzern mit echten Geräten und Verbindungen und sind für die Bewertung maßgeblich. Labordaten entstehen in Testwerkzeugen unter festgelegten Bedingungen und eignen sich für die Fehlersuche, bilden aber nicht die Realität ab.
Was bedeutet LCP und was verbessert den Wert?
LCP, der Largest Contentful Paint, bedeutet die Zeit, bis das größte sichtbare Inhaltselement im ersten Bildschirmbereich vollständig dargestellt ist. Auf den meisten Seiten ist das ein Hero-Bild, ein Video-Poster oder eine große Überschrift.
Ein schlechter LCP hat meist eine von wenigen Ursachen: Das Hero-Bild ist zu groß oder im falschen Format, es wird erst spät entdeckt, weil es per CSS oder Skript eingebunden ist, der Server antwortet langsam, oder blockierende Skripte und Stylesheets verzögern die Darstellung.
Die wirksamsten Maßnahmen setzen genau dort an. Das Hero-Bild wird in einem modernen Format in passender Größe ausgeliefert, direkt im HTML eingebunden und mit hoher Ladepriorität versehen. Render-blockierende Ressourcen werden reduziert oder nachgeladen. Die Serverantwort wird über Caching und ein Content Delivery Network beschleunigt. Oft reicht die Optimierung dieses einen Elements, um den Wert spürbar zu verbessern.
- Hero-Bild komprimieren, in modernem Format und passender Größe ausliefern
- Das LCP-Element direkt im HTML einbinden, nicht per Skript nachladen
- Ladepriorität für das wichtigste Bild setzen, Lazy Loading dort vermeiden
- Kritisches CSS inline, restliche Stylesheets nachladen
- Serverantwortzeit über Caching und CDN verkürzen
- Webschriften vorladen und mit Fallback anzeigen
Was bedeutet INP und wie wird die Seite reaktionsschneller?
INP, die Interaction to Next Paint, bedeutet die Zeit zwischen einer Nutzereingabe wie Klick, Tipp oder Tastendruck und der nächsten sichtbaren Reaktion der Seite. Der Wert betrachtet alle Interaktionen während eines Besuchs und bewertet die langsamen besonders streng.
Ein schlechter INP entsteht, wenn der Hauptthread des Browsers beschäftigt ist, während der Nutzer etwas tun will. Typische Verursacher sind umfangreiche JavaScript-Bundles, Tracking- und Marketing-Skripte von Drittanbietern, aufwendige Animationen und Event-Handler, die bei jedem Klick viel Arbeit auslösen.
Die Lösung liegt darin, dem Browser Luft zu lassen. Lange Aufgaben werden in kleinere Schritte zerlegt, nicht benötigte Skripte entfernt oder verzögert geladen, Drittanbieter-Tags kritisch geprüft und Eingaben sofort visuell bestätigt, auch wenn die eigentliche Verarbeitung noch läuft. Gerade bei Websites mit vielen Marketing-Tags lohnt eine Inventur: Jedes Skript, das keinen klaren Nutzen hat, kostet Reaktionszeit.
Was bedeutet CLS und wie verhindern Sie springende Layouts?
CLS, der Cumulative Layout Shift, bedeutet das Ausmaß, in dem sichtbare Inhalte während des Ladens unerwartet ihre Position ändern. Jeder kennt den Effekt: Man will auf einen Link tippen, ein Banner lädt nach, und der Klick landet woanders.
Layoutsprünge entstehen durch Bilder und Videos ohne feste Größenangaben, durch nachträglich eingefügte Banner, Cookie-Hinweise oder Werbeflächen, durch Webschriften, die beim Laden die Textbreite verändern, und durch Inhalte, die per Skript oberhalb bestehender Elemente eingefügt werden.
Die Maßnahmen sind vergleichsweise einfach: Jedes Bild und jedes Video bekommt Breite und Höhe oder ein festes Seitenverhältnis, damit der Browser den Platz reserviert. Für nachgeladene Elemente wie Einwilligungsbanner oder Bewertungs-Widgets wird Platz vorgehalten oder sie werden so eingeblendet, dass sie nichts verschieben. Webschriften werden mit passenden Fallback-Schriften konfiguriert, damit der Text beim Wechsel nicht umbricht.
- Breite und Höhe oder Seitenverhältnis für alle Bilder und Videos angeben
- Platzhalter für Banner, Widgets und Anzeigen reservieren
- Dynamische Inhalte unterhalb des sichtbaren Bereichs oder als Overlay einfügen
- Fallback-Schriften an die Webschrift anpassen
- Animationen über Transform statt über Layout-Eigenschaften lösen
Wo lesen Sie die Werte Ihrer Website ab?
Die Werte Ihrer Website lesen Sie in der Google Search Console im Bericht zu den Core Web Vitals sowie in PageSpeed Insights ab, das Feld- und Labordaten für einzelne Seiten nebeneinander zeigt. Beide Werkzeuge sind kostenlos und reichen für den Einstieg aus.
Die Search Console gruppiert Seiten mit ähnlichen Problemen und zeigt, ob der Wert gut, verbesserungswürdig oder schlecht ist. So erkennen Sie, ob ein Problem eine einzelne Seite oder einen ganzen Seitentyp betrifft, etwa alle Produktseiten oder alle Blogartikel. PageSpeed Insights liefert für eine konkrete Adresse die Diagnose: welches Element das LCP-Element ist, welche Skripte lange laufen und welche Elemente Layoutsprünge verursachen.
Für die laufende Beobachtung lohnt ein einfaches Monitoring, das die Werte regelmäßig erfasst. So fällt auf, wenn ein neues Plugin, ein zusätzlicher Marketing-Tag oder ein unkomprimiertes Bild die Werte verschlechtert, bevor es sich in Besucherzahlen und Rankings niederschlägt. Wie wir Technik, Inhalt und Sichtbarkeit zusammen betrachten, zeigt unsere Leistung SEO.
In welcher Reihenfolge sollten Sie vorgehen?
Sie sollten mit den Seitentypen beginnen, die am meisten Besucher und Anfragen bringen, dort zuerst das LCP-Element und die Layoutstabilität verbessern und anschließend die Skriptlast reduzieren. Diese Reihenfolge bringt den größten Effekt mit dem geringsten Risiko.
Viele Verbesserungen sind keine Entwicklungsprojekte, sondern Hygiene: Bilder vor dem Upload verkleinern, nicht genutzte Plugins entfernen, Marketing-Tags prüfen, Caching aktivieren. Erst danach lohnt sich tiefere Arbeit an Code und Infrastruktur, etwa am Rendering oder am Hosting.
Bei einem Relaunch oder einer neuen Website sollten die Core Web Vitals von Anfang an Teil der Anforderungen sein. Ein schlankes Frontend, klare Regeln für Bilder und ein bewusster Umgang mit externen Skripten sind in der Planung günstig und im Nachhinein teuer. Wenn Sie wissen möchten, wo Ihre Website heute steht, zeigt der kostenlose Website-Check die wichtigsten Werte und Ursachen.
Häufige Fragen
Sind gute Core Web Vitals eine Garantie für bessere Rankings?
Nein. Sie sind ein Qualitätsfaktor unter vielen; Inhalte, Relevanz und Verlinkung wiegen schwerer. Gute Werte verhindern vor allem, dass eine inhaltlich starke Seite durch Technik ausgebremst wird, und sie verbessern unmittelbar die Erfahrung Ihrer Besucher.
Warum zeigt ein Test gute Werte, die Search Console aber schlechte?
Weil ein Test unter Laborbedingungen läuft, während die Search Console Daten echter Nutzer mit älteren Geräten und langsameren Verbindungen auswertet. Maßgeblich sind die Felddaten. Labortests helfen dabei, die Ursachen zu finden, ersetzen aber nicht die Sicht der Nutzer.
Reicht ein Caching-Plugin, um die Werte zu verbessern?
Caching hilft vor allem bei der Serverantwortzeit und damit beim LCP. Layoutsprünge, schwere Bilder und Skriptlast löst es nicht. Meist ist eine Kombination aus Bildoptimierung, Platzhaltern, Skript-Reduktion und Caching nötig.