Was LCP, INP und CLS messen, die Grenzwerte für gut und schlecht, Felddaten im Vergleich zu Labordaten, ein Live-Messgerät für diese Seite und 25 Lösungsrezepte mit Code nach Ursache, dazu Hinweise je Plattform.
Core Web Vitals sind drei Messwerte aus echten Besuchen: Largest Contentful Paint (Laden, gut bei 2.5 Sekunden oder weniger), Interaction to Next Paint (Reaktionsfähigkeit, gut bei 200 Millisekunden oder weniger) und Cumulative Layout Shift (Stabilität, gut bei 0.1 oder weniger). Eine Seite besteht, wenn mindestens 75% der Besuche alle drei erfüllen.
Gute Werte
Das Messgerät unten misst diese Seite in deinem eigenen Browser, während du sie nutzt. Finde dann die Metrik, bei der du durchfällst, und arbeite die Rezepte dazu durch; jedes nennt die Ursache, die es behebt, und liefert den Code.
Interaction to Next Paint hat First Input Delay im März 2024 als Core Web Vital abgelöst. INP betrachtet alle Interaktionen auf einer Seite, nicht nur die erste, und schließt die Zeit bis zum Zeichnen des Ergebnisses ein.
Lighthouse ist ein einzelner Test auf einem simulierten Gerät. Core Web Vitals nutzen echte Besucher über 28 Tage, auf langsameren Smartphones und Netzen, und schließen INP ein, das Lighthouse nicht messen kann.
Sie sind Teil der Page-Experience-Signale von Google. Google bezeichnet Relevanz und Inhaltsqualität als weit wichtiger, gute Vitals helfen also vor allem dann, wenn Seiten ansonsten ähnlich sind.
Felddaten umfassen die vorherigen 28 Tage, Verbesserungen zeigen sich also nach dem Deploy schrittweise über etwa vier Wochen.
Grenzwerte (bewertet am 75. Perzentil echter Besuche)
Felddaten im Vergleich zu Labordaten
fetchpriority="high" sagt dem Browser, dass dieses Bild am wichtigsten ist. Lade das LCP-Bild niemals lazy.
Hintergrundbilder werden spät entdeckt, erst nachdem das CSS geladen ist. Ein Preload im head startet den Download sofort.
srcset und sizes lassen ein Smartphone eine kleine Datei statt der Desktop-Version laden.
AVIF und WebP sind bei gleicher Qualität meist deutlich kleiner als JPEG. picture lässt ältere Browser auf ein anderes Format zurückfallen.
font-display: swap zeigt sofort Ersatztext, sodass eine Überschrift, die das LCP-Element ist, nicht durch einen Schriftdownload aufgehalten wird.
preconnect erledigt DNS, TCP und TLS-Handshake im Voraus für einen Drittanbieter-Origin, den du brauchen wirst.
Skripte im head ohne defer oder async blockieren das Rendern. defer behält die Reihenfolge bei, wartet aber, bis das HTML geparst ist.
Wenn das LCP-Element per JavaScript erzeugt wird, kann nichts gezeichnet werden, bis das Bundle geladen und ausgeführt ist. Server-Rendering oder Prerendering bringt es in die erste Antwort. Die Optionen findest du in unserem SEO-Leitfaden für Single Page Apps.
Eine langsame Serverantwort verzögert alles. Cache statische Seiten auf einem CDN und setze ein sinnvolles Cache-Control.
Ein Task über 50 ms blockiert Eingaben. Gib zwischen den Teilstücken den Main Thread frei, damit ein Klick dazwischen verarbeitet werden kann. scheduler.yield ist neuer; der Fallback mit setTimeout funktioniert überall.
Aktualisiere den Button sofort und erledige die schwere Arbeit erst, nachdem der Browser die Gelegenheit zum Zeichnen hatte.
Eine lange Liste bei jedem Tastendruck zu filtern, lässt das Tippen hängen. Warte auf eine kurze Pause.
startTransition lässt React die Eingabe reaktionsfähig halten und das aufwendige Ergebnis rendern, sobald es geht.
Chat-Widgets und Tag-Manager führen beim Laden oft schweren Code aus. Lade sie, wenn die Seite im Leerlauf ist, oder bei der ersten Interaktion.
Riesige Seiten machen jedes Style- und Layout-Update langsamer. content-visibility überspringt das Rendern von Abschnitten außerhalb des Bildschirms, bis sie in die Nähe kommen.
offsetHeight nach jeder Style-Änderung auszulesen, erzwingt jedes Mal ein Layout. Lies zuerst alles aus und schreibe dann.
Das Parsen einer großen Datei oder das Sortieren Tausender Zeilen kann in einem Worker laufen, ohne Klicks zu blockieren.
width und height lassen den Browser den Platz reservieren, bevor die Datei ankommt. CSS kann sie trotzdem responsiv machen.
Karten, Videos und iframes laden oft spät. aspect-ratio hält ihre Box offen.
Inhalt, der oberhalb des Gelesenen eingefügt wird, schiebt diesen nach unten. Gib dem Platz im Voraus eine Mindesthöhe.
Wenn die Webschrift eingewechselt wird, kann Text neu umbrechen. size-adjust auf einer lokalen Ersatzschrift bringt beide in der Breite näher zusammen.
Bewegung per transform verschiebt keine anderen Elemente und zählt daher nicht als Layout Shift.
Eine am unteren Bildschirmrand fixierte Leiste bewegt die Seite nicht; eine oben eingefügte schon.
Ein Lade-Platzhalter sollte denselben Platz einnehmen wie das, was ihn ersetzt.
Aus dem Back/Forward Cache wiederhergestellte Seiten erscheinen sofort und ohne neue Verschiebungen. Ein unload-Handler verhindert das; nutze stattdessen pagehide.
Hinweise je Plattform
Bilder sind meist der Hauptverdächtige beim LCP; verkleinere sie mit dem
Live-Messgerät für diese Seite
Misst LCP, CLS und INP für diese Seite in deinem Browser, sofern unterstützt.
Gut
Verbesserungswürdig
Schlecht
In diesem Browser nicht unterstützt
INP (bisher langsamste)
Warte auf das größte Rendering
Klicke oder tippe irgendwo, um zu messen
Kostenlos starten · Keine Kreditkarte nötig