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

Die drei Werte im Überblick

Google bewertet jeden Wert in drei Stufen. Als „gut“ gilt eine Seite, wenn mindestens 75 Prozent der echten Seitenaufrufe den jeweiligen Grenzwert erreichen.

LCP: Wie schnell ist das Wichtigste sichtbar?

Der Largest Contentful Paint misst, wann das größte Element im sichtbaren Bereich fertig dargestellt ist, meist das Titelbild oder die Hauptüberschrift. Typische Bremsen und was hilft:

• Langsamer Server: Gutes Hosting, Caching und schlanker Code verkürzen die Antwortzeit.
• Zu große Bilder: Moderne Formate wie AVIF und WebP sowie passende Größen für jedes Gerät sparen oft den Großteil der Datenmenge.
• Falsch priorisiertes Titelbild: Das LCP-Bild darf nicht „lazy“ geladen werden und sollte mit fetchpriority="high" Vorrang bekommen.
• Blockierende Ressourcen: Große CSS- und JavaScript-Dateien im Kopf der Seite verzögern die Darstellung.
• Schriften von Fremdservern: Lokal gehostete Schriften laden schneller und sind zudem datenschutzfreundlicher.

INP: Wie schnell reagiert die Seite?

Interaction to Next Paint hat im März 2024 den früheren Wert First Input Delay (FID) abgelöst. Während FID nur die Verzögerung der ersten Interaktion maß, betrachtet INP die Reaktionszeit über den gesamten Besuch. Gemessen wird die Zeit von einem Klick, Tipp oder Tastendruck bis zur nächsten sichtbaren Reaktion.

Der größte Feind eines guten INP ist JavaScript, das den Hauptthread blockiert. Was hilft:

• Weniger JavaScript ausliefern: Jedes Slider-, Tracking- oder Chat-Skript kostet Rechenzeit.
• Lange Aufgaben aufteilen, damit der Browser zwischendurch auf Eingaben reagieren kann.
• Drittanbieter-Skripte erst laden, wenn sie gebraucht werden, und nur nach Einwilligung.
• Event-Handler schlank halten und aufwendige Berechnungen auslagern.

CLS: Bleibt das Layout stabil?

Sie wollen auf einen Button tippen und im letzten Moment springt die Seite, weil oben ein Bild nachgeladen wurde. Genau das misst der Cumulative Layout Shift. Die häufigsten Ursachen lassen sich einfach beheben:

• Bilder ohne Größenangabe: Mit width und height reserviert der Browser vorab den Platz.
• Nachgeladene Elemente: Werbung, Karten und Videos brauchen einen Platzhalter mit fester Größe.
• Schriftwechsel: Wenn die Webfont stark von der Ersatzschrift abweicht, springt der Text. Angepasste Fallback-Schriften verhindern das.
• Banner, die Inhalte verschieben: Cookie-Banner und Hinweisleisten sollten über dem Inhalt schweben, statt ihn nach unten zu drücken.

So messen Sie richtig

Es gibt zwei Arten von Daten, und beide sind wichtig:

• Felddaten stammen von echten Chrome-Nutzerinnen und -Nutzern (Chrome User Experience Report) und werden über 28 Tage gesammelt. Sie finden sie in PageSpeed Insights (öffnet in neuem Tab) und im Bericht „Core Web Vitals“ der Google Search Console. Diese Daten nutzt Google für die Bewertung.
• Labordaten entstehen bei einem simulierten Test, etwa mit Lighthouse in den Chrome-Entwicklertools. Sie eignen sich, um Probleme zu finden und Verbesserungen sofort zu prüfen. INP lässt sich im Labor nur näherungsweise abschätzen.

Kleine Websites haben oft zu wenig Besucher für Felddaten. Dann helfen Labortests und gesunder Menschenverstand: Testen Sie auf einem durchschnittlichen Smartphone im Mobilfunknetz, nicht nur am schnellen Büro-PC.

Wie wichtig sind die Core Web Vitals für SEO?

Die Core Web Vitals sind Teil der Signale, mit denen Google die „Page Experience“ bewertet. Google betont aber, dass relevante, hilfreiche Inhalte wichtiger sind. Gute Werte sind deshalb eher ein Vorteil bei vergleichbaren Inhalten als ein Ranking-Turbo.

Der größere Effekt liegt bei Ihren Besucherinnen und Besuchern: Eine schnelle, stabile Seite wird länger genutzt und führt öfter zu einer Anfrage. Wie Sie die gesamte Website technisch prüfen, zeigt unsere SEO-Audit-Checkliste.

Optimierung ist kein einmaliges Projekt. Jedes neue Bild, Plugin oder Tracking-Skript kann die Werte wieder verschlechtern.