Web Vitals: Was LCP, INP und CLS messen

Worum es geht

Core Web Vitals, definiert von Googles web.dev, sind drei nutzerzentrierte Metriken. Largest Contentful Paint (LCP) meldet die Renderzeit des grössten im Viewport sichtbaren Bilds, Textblocks oder Videos, relativ zum Start der Navigation. Interaction to Next Paint (INP) beobachtet die Latenz aller Klicks, Taps und Tastendrücke während eines Besuchs und meldet die längste beobachtete Interaktion, wobei Ausreisser ignoriert werden (einer wird pro 50 Interaktionen verworfen). Cumulative Layout Shift (CLS) bewertet unerwartete Bewegung sichtbarer Inhalte, die typischerweise auftritt, wenn Ressourcen asynchron laden oder Elemente oberhalb bestehenden Inhalts eingefügt werden. Die empfohlenen Zielwerte sind LCP innerhalb von 2,5 Sekunden, INP von 200 Millisekunden oder weniger und CLS von 0,1 oder weniger, ausgewertet am 75. Perzentil der Seitenaufrufe, aufgeteilt nach Mobil- und Desktop-Geräten.

Warum es wichtig ist

Labor-Tools führen einen synthetischen Ladevorgang auf einer Maschine aus; die Vitals sind auf Felddaten echter Nutzer und Geräte definiert, also das, was Nutzer tatsächlich erleben. Zu wissen, welche Metrik fehlschlägt, zeigt die Ursache: LCP ist Serverzeit plus Ressourcen-Erkennung plus Rendering, INP ist Hauptthread-Arbeit in und nach Event-Handlern, CLS ist Inhalt, der ohne reservierten Platz eintrifft.

So wird es angewendet

• LCP: Das HTML schnell ausliefern (Caching, Kompression), das grösste Bild im initialen HTML auffindbar machen statt es lazy zu laden oder per Skript einzufügen, und render-blockierende Ressourcen davor vermeiden.
• INP: Event-Handler kurz halten, lange Tasks aufteilen und dem Hauptthread Kontrolle abgeben, nicht dringende Arbeit verschieben und das DOM klein halten, damit Style und Layout nach einer Interaktion günstig bleiben.
• CLS: Für Bilder, Einbettungen, Werbung und spät ladende Komponenten mit expliziten Massen oder aspect-ratio Platz reservieren; nie Inhalt oberhalb dessen einfügen, was der Nutzer gerade liest, ausser er hat danach gefragt.
• Im Feld mit den Performance-APIs des Browsers oder Googles web-vitals-Bibliothek messen und vor Schlussfolgerungen nach Seitentyp und Geräteklasse aufteilen.
• Am 75. Perzentil arbeiten, nicht am Median: Ein schneller Median mit langsamem Ausläufer scheitert trotzdem.

Stolpersteine

Einen Labor-Wert verbessern, ohne die Felddaten zu bewegen, meist weil Testgeräte schneller sind als die Geräte der Nutzer. Die Metriken sind Seitenaufrufen zugeordnet; in einer Single-Page-Anwendung ist ein clientseitiger Routenwechsel kein neuer Aufruf, sodass eine Zuordnung pro Route zusätzliche Instrumentierung braucht. Die Schwellenwerte sind Empfehlungen der zitierten Quelle, keine Garantie für Ranking- oder Konversionseffekte.