Core Web Vitals verständlich: LCP, INP und CLS verbessern

Ob Besucher bleiben oder abspringen, entscheidet sich oft in den ersten Sekunden. Google misst diesen Eindruck mit drei Kennzahlen, den Core Web Vitals. Sie fließen in die Bewertung der Nutzererfahrung ein und zeigen vor allem eines: an welcher Stelle Ihre Website Besucher ausbremst. In diesem Beitrag erklären wir, was hinter LCP, INP und CLS steckt, welche Werte als gut gelten und welche Maßnahmen wirklich etwas bringen.

Die drei Kennzahlen im Überblick

• LCP (Largest Contentful Paint) misst, wann das größte sichtbare Element geladen ist, meist ein Titelbild oder eine große Überschrift. Gut sind bis zu 2,5 Sekunden.
• INP (Interaction to Next Paint) misst, wie schnell die Seite auf Klicks, Tippen und Tastatureingaben sichtbar reagiert. Gut sind bis zu 200 Millisekunden. INP hat im März 2024 den früheren Wert FID abgelöst.
• CLS (Cumulative Layout Shift) misst, wie stark sich Inhalte beim Laden unerwartet verschieben. Gut ist ein Wert bis 0,1.

Bewertet wird nicht ein einzelner Aufruf, sondern das 75. Perzentil echter Besuche: Mindestens drei von vier Aufrufen sollten im grünen Bereich liegen, getrennt nach Mobilgeräten und Desktop.

So messen Sie Ihre Werte

• PageSpeed Insights zeigt für eine Adresse Felddaten echter Chrome-Nutzer, sofern genügend Besuche vorliegen, und zusätzlich eine Labormessung mit konkreten Hinweisen.
• Google Search Console fasst im Bericht zu den Core Web Vitals Gruppen ähnlicher Seiten zusammen. So erkennen Sie, ob ein Problem eine ganze Vorlage betrifft oder nur eine einzelne Seite.
• Lighthouse in den Entwicklertools von Chrome eignet sich für schnelle Tests während der Entwicklung. Laborwerte sind ein Hinweis, entscheidend sind die Felddaten.

INP lässt sich im Labor nur eingeschränkt messen, weil dort niemand klickt. Lighthouse zeigt stattdessen die Total Blocking Time, die eng mit INP zusammenhängt.

LCP verbessern: schneller zum Hauptinhalt

LCP setzt sich aus mehreren Teilen zusammen: der Antwortzeit des Servers, dem Laden des Elements selbst und der Zeit, bis der Browser es darstellt. Ansatzpunkte gibt es deshalb auf allen Ebenen.

Die Serverantwort beschleunigen

• Seiten-Caching nutzen, damit nicht jeder Aufruf PHP und Datenbank durchläuft.
• Eine aktuelle PHP-Version mit OPcache einsetzen und für datenbanklastige Systeme einen Objekt-Cache wie Redis.
• Auf schnellen NVMe-Speicher und Server setzen, die nicht überbucht sind.
• Statische Dateien über ein CDN ausliefern, damit Bilder und Skripte aus der Nähe der Besucher kommen.

Das LCP-Element gezielt laden

• Bilder in modernen Formaten wie WebP oder AVIF ausliefern und über srcset in passender Größe bereitstellen.
• Das Titelbild nicht per Lazy Loading verzögern, sondern mit fetchpriority="high" priorisieren.
• Render-blockierendes CSS und JavaScript reduzieren, wichtiges CSS früh laden und Skripte mit defer einbinden.
• Webfonts selbst hosten und mit font-display: swap einbinden, damit Text nicht unsichtbar bleibt.

INP verbessern: flüssige Reaktion

Ein schlechter INP-Wert entsteht fast immer im Browser: Der Hauptthread ist mit JavaScript beschäftigt und kann auf Eingaben nicht sofort reagieren.

• Skripte von Drittanbietern prüfen: Chat-Widgets, Tracking, Werbung und Einbindungen sozialer Netzwerke sind häufige Bremsen. Entfernen Sie, was niemand nutzt, und laden Sie den Rest erst bei Bedarf.
• Lange Aufgaben aufteilen: JavaScript-Aufgaben über 50 Millisekunden blockieren die Seite. Aufwendige Berechnungen lassen sich in kleinere Schritte zerlegen oder in einen Web Worker auslagern.
• Weniger Plugins: Gerade bei WordPress laden viele Erweiterungen eigene Skripte auf jeder Seite. Jedes Plugin, das wegfällt, entlastet den Browser.
• Schlankes Seitengerüst: Sehr verschachtelte Seiten mit Tausenden Elementen machen jede Aktualisierung teurer. Page Builder erzeugen hier oft unnötigen Ballast.

CLS verbessern: ein ruhiges Layout

• Bildern, Videos und iframes immer Breite und Höhe oder ein aspect-ratio mitgeben, damit der Browser den Platz vorab reserviert.
• Platz für Werbeflächen, Einbettungen und Hinweisleisten fest einplanen, statt sie nachträglich oberhalb des Inhalts einzufügen.
• Cookie- und Hinweisbanner als Überlagerung darstellen, nicht als Element, das den Inhalt nach unten schiebt.
• Den Wechsel von der Ersatzschrift zur Webfont abmildern, etwa mit passenden Ersatzschriften und size-adjust.

Was Ihr Hosting beitragen kann

Viele Maßnahmen liegen in der Website selbst. Die Grundlage für einen guten LCP-Wert legt aber der Server. In unserem Managed Hosting laufen Ihre Projekte auf NVMe-Speicher mit aktuellen PHP-Versionen. Ab dem Tarif Premium stellen wir Redis als Objekt-Cache bereit. Mit unserem CDN kommen statische Inhalte aus Rechenzentren in der Nähe Ihrer Besucher, und ShieldCache verbindet Caching mit Schutz vor Angriffen. Weitere Ansatzpunkte finden Sie in unserem Artikel zur Optimierung der Website-Performance.

Fazit

Messen Sie zuerst, statt zu raten: PageSpeed Insights und die Search Console zeigen, welche der drei Kennzahlen bei Ihnen schwächelt. Danach lohnt sich meist ein Blick auf drei Dinge: das Caching auf dem Server, das Titelbild und die Skripte von Drittanbietern. Damit erreichen viele Websites bereits den grünen Bereich.