Drei Messwerte für drei unterschiedliche Erfahrungen
Core Web Vitals sind Kennzahlen zur Nutzererfahrung aus Googles Leitlinien für Webleistung. Largest Contentful Paint (LCP) misst, wann der größte sichtbare Hauptinhalt gerendert ist. Interaction to Next Paint (INP) beschreibt die Reaktionsfähigkeit auf Eingaben. Cumulative Layout Shift (CLS) erfasst unerwartete Verschiebungen von Seiteninhalten.
Die Werte machen unterschiedliche Problemarten erkennbar. Ein großes, nicht optimiertes Titelbild kann den Hauptinhalt verzögern. Zu viel JavaScript kann Navigation oder Formular träge machen. Bilder und eingebettete Inhalte ohne reservierte Abmessungen können Text beim Laden verschieben.
Felddaten und Labortests beantworten unterschiedliche Fragen
Labortools führen einen kontrollierten Test aus, mit dem Entwickler Probleme reproduzieren und Änderungen vergleichen können. Felddaten spiegeln echte Besuche über verschiedene Geräte, Netze und Nutzungsweisen hinweg wider. Eine Website kann im schnellen Desktop-Labor gut abschneiden und sich auf einem älteren Telefon oder einer langsamen Verbindung dennoch träge anfühlen.
Beide Perspektiven sind nützlich. Labortests helfen, blockierende Ressourcen, übergroße Medien und Interaktionsengpässe zu finden. Messungen aus echten Besuchen zeigen, ob Verbesserungen tatsächlich bei Menschen ankommen. Soweit möglich, sollte nach Seitentyp unterschieden werden, denn eine Produktseite und ein langer Artikel haben unterschiedliche Leistungsprofile.
Die Ursache statt nur den Messwert beheben
Für LCP sollte das Element ermittelt werden, das zum größten sichtbaren Inhalt wird. Zu prüfen sind Bildgröße, Entdeckungspriorität, Serverantwort und Render-Abhängigkeiten. Ein Titelbild im ersten sichtbaren Bereich sollte nicht verzögert geladen werden. Bei INP helfen kürzere Aufgaben auf dem Hauptthread, weniger unnötige Drittanbieterskripte und eine schnelle Reaktion interaktiver Elemente vor nicht dringender Arbeit.
Für CLS sollten Bilder und Videos Breite und Höhe erhalten, Platz für Einbettungen reserviert und Einfügungen oberhalb des gelesenen Inhalts vermieden werden. Auch Schriftwechsel verändern das Layout. Deshalb ist ein kleiner, sorgfältig gewählter Schriftstapel sinnvoll, der mit echtem Zeilenumbruch geprüft wird.
Leistungsoptimierung sollte gutes Design erhalten
Eine Performance-Verbesserung verlangt nicht, alle Bilder oder Animationen zu entfernen. Bewegungen sollten möglichst Transformation und Deckkraft nutzen; unsichtbare dekorative Arbeit kann pausiert und wichtiger Inhalt im anfänglichen HTML bereitgestellt werden. Responsive, komprimierte Medien und bedarfsgeladenes Material unterhalb des sichtbaren Bereichs helfen ebenfalls.
Nach einer Änderung sollten wichtige Geschäftswege getestet werden: Navigation öffnen, Dienst ansehen, Formular ausfüllen und Kontaktaktion auslösen. Schnelle Bildschirminhalte reichen nicht, wenn Bedienelemente schwer zu nutzen sind oder wichtige Informationen fehlen.
Quellen und weiterführende Informationen
Einen sachlichen Fehler melden oder eine Quelle vorschlagen? Redaktion kontaktieren.
