dpi Design Projekt anfragen

WordPress, Webflow & Technik · Blog

Core Web Vitals: Was LCP, INP und CLS bedeuten und wie Sie sie verbessern

LCP, INP und CLS zeigen, wie schnell und stabil sich Ihre Website für echte Besucher anfühlt. Hier lesen Sie, was die Werte bedeuten und wie Sie sie verbessern.

PageSpeed-Insights-Auswertung mit Leistungswert 99 auf einem Monitor

Eine Website kann gut aussehen und trotzdem Besucher verlieren: weil das Titelbild ewig lädt, ein Button erst nach einer Gedenksekunde reagiert oder der Text beim Lesen plötzlich nach unten springt. Genau diese drei Probleme messen die Core Web Vitals von Google. Wir erklären, welche Werte als gut gelten, wie Sie richtig messen und was bei WordPress tatsächlich hilft.

Was sind die Core Web Vitals?

Die Core Web Vitals sind drei Kennzahlen, mit denen Google die Nutzererfahrung auf Webseiten messbar macht. Sie sind der Kern der Google-Initiative Web Vitals. Statt dutzender technischer Werte konzentrieren sich die Core Web Vitals auf das, was Nutzer direkt spüren:

  • Laden: Wie schnell ist der wichtigste Inhalt einer Seite sichtbar?
  • Interaktivität: Wie schnell reagiert die Seite, wenn jemand klickt, tippt oder eine Taste drückt?
  • Visuelle Stabilität: Bleibt das Layout ruhig, oder verschieben sich Inhalte während des Ladens?

Google nutzt die Core Web Vitals als Teil der sogenannten Page Experience, also der Seitenerfahrung. Dazu zählen außerdem eine sichere Verbindung per HTTPS, eine gute Darstellung auf mobilen Geräten und der Verzicht auf aufdringliche Einblendungen, die den Inhalt verdecken. Ausgewertet wird getrennt für mobile Geräte und Desktop.

Die drei Metriken im Überblick

Für jede Metrik hat Google feste Schwellenwerte definiert. Eine Seite besteht die Core Web Vitals, wenn alle drei Werte im grünen Bereich liegen.

MetrikMisstGutVerbesserungswürdigSchlecht
LCP (Largest Contentful Paint)Ladezeit des größten sichtbaren Elementsbis 2,5 Sekundenüber 2,5 bis 4 Sekundenüber 4 Sekunden
INP (Interaction to Next Paint)Reaktionszeit auf Eingabenbis 200 msüber 200 bis 500 msüber 500 ms
CLS (Cumulative Layout Shift)Verschiebungen im Layoutbis 0,1über 0,1 bis 0,25über 0,25

LCP: Largest Contentful Paint

Der LCP misst, wann das größte Bild oder der größte Textblock im sichtbaren Bereich fertig dargestellt ist. Auf den meisten Seiten ist das ein Titelbild, ein Slider oder eine große Überschrift. Ein guter Wert liegt bei höchstens 2,5 Sekunden.

INP: Interaction to Next Paint

Der INP bewertet, wie schnell eine Seite auf Eingaben reagiert. Gemessen wird die Zeit von einem Klick, Tipp oder Tastendruck bis zur nächsten sichtbaren Veränderung auf dem Bildschirm. Dabei berücksichtigt er alle Interaktionen während eines Besuchs und nicht nur die erste. Seit März 2024 ersetzt er offiziell den First Input Delay (FID), der nur die Verzögerung der allerersten Eingabe erfasst hat. Gut sind Werte bis 200 Millisekunden.

CLS: Cumulative Layout Shift

Der CLS misst, wie stark sich sichtbare Inhalte unerwartet verschieben. Typisches Beispiel: Über einem Link lädt im letzten Moment ein Banner nach und Sie tippen daneben. Statt einer Zeit ergibt sich dabei ein Punktwert aus Größe und Distanz der Verschiebungen. Gut ist ein Wert von höchstens 0,1.

Messung mit Felddaten und Labordaten

Wer misst, stößt schnell auf scheinbar widersprüchliche Zahlen. Der Grund: Es gibt zwei grundverschiedene Arten von Messwerten.

Felddaten stammen von echten Nutzern. Google sammelt sie im Chrome User Experience Report (CrUX) aus Chrome-Browsern, deren Nutzer der Übermittlung zugestimmt haben. Die Daten beziehen sich auf die vergangenen 28 Tage. Für die Bewertung zählt das 75. Perzentil: Eine Seite gilt nur dann als gut, wenn mindestens 75 Prozent der Seitenaufrufe den Schwellenwert einhalten. Langsame Smartphones und schwache Mobilfunkverbindungen fließen also voll in die Bewertung ein.

Labordaten entstehen in einer simulierten Umgebung, zum Beispiel mit Lighthouse. Der Test lädt die Seite mit gedrosselter Verbindung und langsamerem Prozessor. Labordaten sind ideal, um Ursachen zu finden und Änderungen sofort zu prüfen. Sie bilden aber nicht ab, wie Ihre tatsächlichen Besucher die Seite erleben.

Wichtig für kleinere Websites

Felddaten gibt es nur, wenn eine Seite genug Besuche aus Chrome erhält. Bei vielen Websites von kleinen und mittleren Unternehmen fehlen sie deshalb für einzelne Unterseiten oder ganz. Dann zeigen die Tools höchstens Werte für die gesamte Domain oder nur Labordaten. Für das Ranking zählen die Felddaten, für die Fehlersuche sind Labordaten trotzdem wertvoll.

Ein häufiges Missverständnis betrifft den Leistungswert von 0 bis 100, den Lighthouse und PageSpeed Insights anzeigen. Dieser Wert ist ein reiner Laborwert aus mehreren Einzelmetriken. Er ist nicht dasselbe wie die Core Web Vitals und fließt so auch nicht in das Ranking ein. Eine 99 ist schön, eine 70 mit guten Felddaten ist aus Sicht von Google aber kein Problem.

Die wichtigsten Tools zum Messen

Für die Analyse brauchen Sie keine kostenpflichtige Software. Google stellt alle wichtigen Tools kostenlos bereit.

  • PageSpeed Insights: Der schnellste Einstieg. Oben sehen Sie die Felddaten aus CrUX für die einzelne URL und die gesamte Website, darunter einen Lighthouse-Labortest mit konkreten Verbesserungsvorschlägen.
  • Google Search Console: Der Bericht „Core Web Vitals“ fasst ähnliche Seiten zu Gruppen zusammen und zeigt, welche URLs gut sind und wo Handlungsbedarf besteht, getrennt nach Mobilgeräten und Desktop. Nach einer Korrektur können Sie dort die Überprüfung starten.
  • Lighthouse: Ist direkt in Chrome eingebaut und prüft neben der Leistung auch Barrierefreiheit, Best Practices und SEO-Grundlagen.
  • Chrome DevTools: Das Performance-Panel zeigt LCP, INP und CLS live, während Sie selbst auf der Seite klicken. So finden Sie heraus, welches Element der LCP ist, welches Skript eine Interaktion blockiert oder welcher Bereich das Layout verschiebt.
  • CrUX direkt: Über die CrUX API oder den öffentlichen Datensatz in BigQuery lassen sich Felddaten im Verlauf und im Vergleich mit Wettbewerbern auswerten.

Wie stark beeinflussen Core Web Vitals das Ranking?

Google bestätigt, dass die Core Web Vitals von den Ranking-Systemen berücksichtigt werden. Gleichzeitig betont Google, dass relevante und hilfreiche Inhalte deutlich schwerer wiegen. Eine Seite mit perfekten Werten, die die Suchanfrage schlecht beantwortet, wird eine inhaltlich starke, aber etwas langsamere Seite nicht überholen.

Realistisch betrachtet sind gute Core Web Vitals also kein Wundermittel für bessere Rankings. Sie wirken eher wie ein Zünglein an der Waage, wenn mehrere Seiten inhaltlich ähnlich gut sind. Der größere Effekt liegt oft woanders: Auf schnellen, stabilen Seiten springen weniger Besucher ab, es werden mehr Seiten aufgerufen und häufiger Formulare abgeschickt. Das nützt Ihnen unabhängig von Google.

Sehr schlechte Werte deuten allerdings meist auf tieferliegende Probleme hin, etwa überladene Themes, zu viele Plugins oder einen schwachen Server. Mehr zur technischen Seite der Suchmaschinenoptimierung finden Sie auf unserer Seite zu SEO.

LCP verbessern und schneller zum Hauptinhalt

Der LCP setzt sich aus mehreren Teilen zusammen: der Antwortzeit des Servers, der Zeit, bis das LCP-Element überhaupt angefordert wird, der eigentlichen Ladezeit und der Zeit bis zur Darstellung. Entsprechend gibt es mehrere Stellschrauben.

Server und Caching

Wenn der Server lange braucht, um die erste Antwort zu liefern, ist ein guter LCP kaum möglich. Bei WordPress hilft vor allem ein Seitencache, der fertige HTML-Seiten ausliefert, statt jede Seite bei jedem Aufruf neu aus PHP und Datenbank zu erzeugen. Dazu kommen eine aktuelle PHP-Version, ein Objektcache wie Redis bei dynamischen Seiten und ein Hosting mit ausreichend Leistung.

Bilder richtig ausliefern

Das LCP-Element ist oft ein Bild. Nutzen Sie moderne Bildformate wie WebP oder AVIF, die WordPress inzwischen nativ unterstützt, und laden Sie Bilder in passender Größe hoch statt 6.000 Pixel breiter Kamerafotos. Wichtig ist außerdem, dass das Titelbild nicht per Lazy Loading verzögert wird. Lazy Loading ist für Bilder weiter unten sinnvoll, für das erste sichtbare Bild aber schädlich. Mit dem Attribut fetchpriority="high" signalisieren Sie dem Browser, dass dieses Bild Vorrang hat. Aktuelle WordPress-Versionen setzen das in vielen Fällen automatisch, manche Themes und Page Builder hebeln es aber aus.

Render-blockierende Ressourcen reduzieren

CSS- und JavaScript-Dateien im Kopf der Seite halten die Darstellung auf. Entfernen Sie ungenutztes CSS, laden Sie Skripte mit defer und verzichten Sie auf Slider im sichtbaren Bereich. Sie gehören zu den häufigsten Ursachen für einen schlechten LCP.

INP verbessern: Schnelle Reaktion auf jeden Klick

Ein schlechter INP entsteht fast immer durch zu viel JavaScript. Solange der Browser mit einer langen Aufgabe beschäftigt ist, kann er nicht auf Eingaben reagieren. Der Nutzer tippt auf das Menü, und nichts passiert.

  • Third-Party-Skripte prüfen: Chat-Widgets, Tracking, Werbenetzwerke, eingebettete Karten und Social-Media-Feeds bringen oft große Mengen JavaScript mit. Fragen Sie bei jedem Skript, ob es gebraucht wird. Was bleibt, sollte möglichst spät oder erst nach einer Interaktion geladen werden.
  • Page-Builder-Ballast reduzieren: Viele Page Builder laden auf jeder Seite ihre komplette Bibliothek an Skripten und Stilen, auch wenn nur ein Bruchteil genutzt wird. Dazu kommen tief verschachtelte HTML-Strukturen.
  • Plugins ausmisten: Jedes Plugin, das eigenes JavaScript im Frontend einbindet, kostet Rechenzeit. Deaktivieren und löschen Sie Plugins, die Sie nicht mehr nutzen, und prüfen Sie, ob sich Funktionen bündeln lassen.
  • Lange Aufgaben aufteilen: Bei eigenem Code hilft es, aufwendige Berechnungen in kleinere Schritte zu zerlegen, damit der Browser zwischendurch reagieren kann.

Beachten Sie: Lighthouse kann den INP nicht direkt messen, weil im Labortest niemand klickt. Als Näherung zeigt es die Total Blocking Time. Aussagekräftiger sind die Felddaten und ein eigener Test in den Chrome DevTools, bei dem Sie Menü, Formulare und Filter selbst bedienen.

CLS verbessern für ein ruhiges Layout

Layoutverschiebungen entstehen, wenn der Browser beim Aufbau der Seite noch nicht weiß, wie viel Platz ein Element braucht. Die Lösung ist fast immer, diesen Platz von Anfang an zu reservieren.

  • Feste Bildgrößen: Geben Sie bei Bildern und Videos immer width und height an oder definieren Sie ein Seitenverhältnis per CSS. Dann hält der Browser den Platz frei, bevor das Bild geladen ist.
  • Schriften lokal einbinden: Wenn Webfonts spät nachladen, wechselt der Text seine Breite und alles darunter rutscht. Hosten Sie Schriften lokal auf Ihrem Server, laden Sie nur die Schnitte, die Sie wirklich verwenden, und stimmen Sie die Ersatzschrift in der Größe ab. Die lokale Einbindung ist bei Google Fonts auch aus Datenschutzsicht empfehlenswert.
  • Platz für Banner und Einbettungen: Cookie-Hinweise, Werbeflächen, Karten und Videos sollten einen festen Rahmen haben oder als Overlay erscheinen, statt den Inhalt nach unten zu drücken.
  • Keine Inhalte oberhalb einfügen: Hinweisleisten, die nach dem Laden oben in die Seite geschoben werden, verursachen große Verschiebungen. Animationen sollten mit CSS-Transformationen arbeiten statt mit Änderungen von Höhe oder Position.

Checkliste für WordPress-Websites

Viele Probleme mit den Core Web Vitals lassen sich bei WordPress systematisch abarbeiten. Diese Punkte sollten Sie der Reihe nach prüfen:

  • Seitencache aktiv und aktuelle PHP-Version im Einsatz
  • Bilder als WebP oder AVIF in passender Größe, mit Breite und Höhe
  • Titelbild ohne Lazy Loading, alle weiteren Bilder mit Lazy Loading
  • Schriften lokal gehostet, nur benötigte Schnitte geladen
  • Kein Slider und kein Video mit Autoplay im ersten sichtbaren Bereich
  • Ungenutzte Plugins entfernt, Page-Builder-Module auf das Nötige reduziert
  • Third-Party-Skripte geprüft, verzögert oder entfernt
  • Cookie-Banner, Einbettungen und Werbeflächen mit reserviertem Platz
  • Nach jeder Änderung Labortest wiederholen und Felddaten nach einigen Wochen prüfen

Vorsicht bei Optimierungs-Plugins: Falsch eingestellt, legen sie schnell Formulare oder den Warenkorb lahm. Testen Sie nach jeder Einstellung die wichtigsten Abläufe. Wenn ein Theme oder Page Builder grundsätzlich zu schwer ist, stoßen Plugins an ihre Grenzen. Dann bringt ein schlankerer technischer Unterbau auf Dauer oft mehr.

Unterstützung bei der Optimierung

Schnelle WordPress-Seiten aus einer Hand

Als WordPress-Agentur entwickeln wir Websites, die von Anfang an auf gute Ladezeiten ausgelegt sind. Ob sich Nachbessern lohnt, hängt vor allem von Theme, Plugins und Hosting ab. Ist Ihre aktuelle Seite technisch ausgereizt, ist ein Website-Relaunch oft der sauberere Weg als endloses Nachbessern. Sprechen Sie uns einfach an.

Häufige Fragen

Was sind gute Werte für die Core Web Vitals?

Gut sind ein LCP von höchstens 2,5 Sekunden, ein INP von höchstens 200 Millisekunden und ein CLS von höchstens 0,1. Bewertet wird jeweils das 75. Perzentil der Felddaten, also der Wert, den mindestens drei von vier Seitenaufrufen erreichen.

Warum zeigt PageSpeed Insights andere Werte als die Search Console?

PageSpeed Insights zeigt Felddaten für eine einzelne URL und zusätzlich einen Labortest. Die Search Console fasst ähnliche Seiten zu Gruppen zusammen und bewertet sie gemeinsam. Außerdem beziehen sich Felddaten auf die letzten 28 Tage, Verbesserungen werden also erst mit Verzögerung sichtbar.

Gibt es den First Input Delay noch?

Nein. Seit März 2024 ist der Interaction to Next Paint (INP) die offizielle Metrik für die Reaktionsfähigkeit. Der First Input Delay hat nur die erste Eingabe betrachtet, der INP bewertet dagegen alle Interaktionen während eines Besuchs.

Muss ich einen Leistungswert von 100 in Lighthouse erreichen?

Nein. Der Leistungswert ist ein Laborwert und nicht identisch mit den Core Web Vitals. Es zählt, ob die Felddaten Ihrer echten Besucher in allen drei Metriken im grünen Bereich liegen.

Wie lange dauert es, bis Verbesserungen sichtbar werden?

Im Labortest sehen Sie Änderungen sofort. Die Felddaten im Chrome User Experience Report basieren auf einem Zeitraum von 28 Tagen, deshalb dauert es rund vier Wochen, bis eine Verbesserung vollständig in PageSpeed Insights und der Search Console angekommen ist.

Erzählen Sie uns von Ihrem Projekt.

Ein Gespräch von 30 Minuten, kostenlos. Danach wissen Sie, was Ihre Website braucht, was sie kostet und wie lange es dauert.

Dominik Plaszewski

Dominik PlaszewskiGeschäftsführer
02452 / 68 74 116 · info@dpi-design.de

Erstgespräch vereinbaren
Oranges Wählscheibentelefon neben einer Kappe mit dpi-Design-Logo auf einem Holztisch