Hier erfahren Sie mehr über unsere Pläne zur Verbesserung des Messwerts „Cumulative Layout Shift“ und können uns Feedback geben.
Cumulative Layout Shift (CLS) ist ein Messwert, mit dem die visuelle Stabilität einer Webseite gemessen wird. Der Messwert wird als kumulative Layoutverschiebung bezeichnet, da die Bewertung jeder einzelnen Verschiebung während der Lebensdauer der Seite summiert wird.
Alle Layoutänderungen sind nutzerunfreundlich, auf Seiten, die länger geöffnet sind, wirken sie sich jedoch stärker aus. Deshalb hat sich das Chrome-Team für Geschwindigkeitsmesswerte vorgenommen, den CLS-Messwert zu verbessern, damit er unabhängiger von der Zeit ist, die auf einer Seite verbracht wird.
Es ist wichtig, dass sich der Messwert auf die Nutzerfreundlichkeit während der gesamten Lebensdauer der Seite konzentriert. Wir haben festgestellt, dass Nutzer nach dem Laden, beim Scrollen oder beim Wechseln zwischen Seiten oft negative Erfahrungen machen. Wir haben jedoch Bedenken hinsichtlich der Auswirkungen auf langlebige Seiten gehört, also Seiten, die Nutzer in der Regel lange geöffnet haben. Es gibt verschiedene Arten von Seiten, die in der Regel länger geöffnet bleiben. Zu den gängigsten gehören Social-Media-Apps mit unendlichem Scrollen und Single-Page-Anwendungen.
Eine interne Analyse von langlebigen Seiten mit hohen CLS-Werten hat ergeben, dass die meisten Probleme durch die folgenden Muster verursacht wurden:
- Unendliche Scroller, die Inhalte verschieben, während der Nutzer scrollt.
- Eingabe-Handler benötigen länger als 500 ms, um die UI als Reaktion auf eine Nutzerinteraktion ohne Platzhalter oder Rastermuster zu aktualisieren.
Wir empfehlen Entwicklern, die Nutzerfreundlichkeit zu verbessern. Wir arbeiten aber auch daran, den Messwert zu verbessern und suchen nach Feedback zu möglichen Ansätzen.
Wie können wir entscheiden, ob ein neuer Messwert besser ist?
Bevor wir uns mit dem Design von Messwerten befasst haben, wollten wir unsere Ideen anhand einer Vielzahl von realen Webseiten und Anwendungsfällen bewerten. Zuerst haben wir einen kleinen Usability-Test entwickelt.
Zuerst haben wir Videos und Chrome-Traces von 34 Nutzerinteraktionen auf verschiedenen Websites aufgezeichnet. Bei der Auswahl der User Journeys haben wir uns auf Folgendes konzentriert:
- Eine Vielzahl verschiedener Websites, z. B. Nachrichten- und Shoppingwebsites.
- Eine Vielzahl von Nutzerabläufen, z. B. das Laden der Startseite, das Scrollen, die Navigation in einer App mit einer Seite und Nutzerinteraktionen.
- Eine Vielzahl von Layout-Abweichungen auf den Websites, sowohl hinsichtlich der Anzahl als auch der Intensität.
- Abgesehen von Layoutänderungen gab es nur wenige negative Erfahrungen auf den Websites.
Wir haben 41 unserer Kollegen gebeten, sich jeweils zwei Videos anzusehen und zu bewerten, welches der beiden Videos in Bezug auf die Layoutänderung besser war. Anhand dieser Bewertungen haben wir eine idealisierte Rangfolge der Websites erstellt. Die Ergebnisse des Nutzerrankings bestätigten unsere Vermutung, dass unsere Kollegen, wie die meisten Nutzer, wirklich frustriert sind, wenn sich das Layout nach dem Laden ändert, insbesondere beim Scrollen und bei der Navigation auf einer einzelnen Seite der App. Wir haben festgestellt, dass einige Websites bei diesen Aktivitäten eine viel bessere Nutzerfreundlichkeit bieten als andere.
Da wir neben den Videos auch Chrome-Traces aufgezeichnet haben, hatten wir alle Details zu den einzelnen Layoutänderungen in jeder User Journey. Wir haben diese verwendet, um die Messwerte für jede Idee und den jeweiligen Kaufprozess zu berechnen. So konnten wir sehen, wie die einzelnen Messwertvarianten die User Journeys bewerteten und wie sie sich von der idealen Reihenfolge unterschieden.
Welche Messwertideen haben wir getestet?
Windowing-Strategien
Oft sind auf Seiten mehrere Layoutänderungen eng beieinander, da sich Elemente mehrmals verschieben können, wenn nach und nach neue Inhalte hinzukommen. Dies veranlasste uns, Techniken zur Gruppierung von Schichten auszuprobieren. Dazu haben wir uns drei Fensteransatze angesehen:
- Rollierende Fenster
- Schiebefenster
- Sitzungsfenster
In jedem dieser Beispiele kommt es im Laufe der Zeit zu Layoutänderungen unterschiedlicher Schwere. Jeder blaue Balken steht für einen einzelnen Layout Shift und die Länge entspricht dem score dieses Shifts. Die Bilder veranschaulichen, wie die Layoutänderungen bei verschiedenen Fensterstrategien im Zeitverlauf gruppiert werden.
Rollierende Fenster
Am einfachsten ist es, die Seite in Fenster mit gleichgroßen Bereichen aufzuteilen. Diese werden als rollierende Fenster bezeichnet. Wie Sie sehen, sieht der vierte Balken wirklich so aus, als sollte er im zweiten rollierenden Fenster gruppiert werden. Da die Fenster aber alle eine feste Größe haben, befindet sie sich stattdessen im ersten Fenster. Wenn es geringfügige Unterschiede beim Timing von Seitenladevorgängen oder Nutzerinteraktionen gibt, können dieselben Layoutänderungen auf unterschiedliche Seiten der Grenzen des sich drehenden Fensters fallen.
Schiebefenster
Ein Ansatz, der uns mehr mögliche Gruppierungen derselben Länge ermöglicht, besteht darin, das potenzielle Fenster im Laufe der Zeit kontinuierlich zu aktualisieren. Auf dem Bild oben ist jeweils nur ein gleitendes Fenster zu sehen. Wir könnten uns aber auch alle möglichen gleitenden Fenster oder einen Teil davon ansehen, um einen Messwert zu erstellen.
Sitzungsfenster
Wenn wir uns auf die Identifizierung von Bereichen der Seite mit Bursts von Layout Shifts konzentrieren möchten, könnten wir jedes Fenster mit einer Schicht starten und es so lange vergrößern, bis wir zwischen den Layout Shifts eine Lücke einer bestimmten Größe feststellen. Bei diesem Ansatz werden die Layout Shifts gruppiert und der Großteil der nicht verlagerten Nutzererfahrung ignoriert. Ein potenzielles Problem besteht darin, dass ohne Lücken in den Layout Shifts ein Messwert, der auf Sitzungsfenstern basiert, genau wie der aktuelle CLS-Messwert unbegrenzt wachsen kann. Deshalb haben wir das auch mit einer maximalen Fenstergröße ausprobiert.
Fenstergrößen
Je nach Größe der Zeiträume können sehr unterschiedliche Ergebnisse erzielt werden. Wir haben daher mehrere unterschiedliche Zeiträume getestet:
- Jede Schicht als eigenes Fenster (keine Fenster)
- 100 ms
- 300 ms
- 1 Sekunde
- 5 Sekunden
Zusammenfassung
Wir haben viele Möglichkeiten ausprobiert, die verschiedenen Zeiträume zusammenzufassen.
Perzentile
Wir haben uns den maximalen Fensterwert sowie das 95., 75. und den Medianwert angesehen.
Durchschnitt
Wir haben uns den Mittelwert des Zeitraums angesehen.
Budgets
Wir haben uns gefragt, ob es vielleicht einen Mindestwert für Layoutverschiebungen gibt, den Nutzer nicht bemerken, und wir könnten Layoutverschiebungen über diesem „Budget“ in der Bewertung einfach zählen. Wir haben uns daher für verschiedene potenzielle „Budget“-Werte den Prozentsatz der Abweichungen vom Budget und den Gesamtwert der Abweichungen vom Budget angesehen.
Andere Strategien
Wir haben uns auch viele Strategien angesehen, die keine Zeitfenster beinhalten, z. B. die Gesamtverschiebung des Layouts geteilt durch die Verweildauer auf der Seite und der Durchschnitt der schlechtesten N einzelnen Verschiebungen.
Die ersten Ergebnisse
Insgesamt haben wir 145 verschiedene Messwertdefinitionen auf Basis von Varianten der oben genannten Ideen getestet. Für jeden Messwert haben wir alle User Journeys nach ihrer Punktzahl für den Messwert und dann die Messwerte nach dem Grad der Nähe zum idealen Ranking bewertet.
Um einen Baseline-Wert zu ermitteln, haben wir alle Websites auch nach ihrem aktuellen CLS-Wert sortiert. CLS belegte den 32. Platz, punktgleich mit 13 anderen Strategien. Damit war sie besser als die meisten Permutationen der oben genannten Strategien. Um sicherzustellen, dass die Ergebnisse aussagekräftig sind, haben wir auch drei zufällige Reihenfolgen hinzugefügt. Wie erwartet schnitten die zufälligen Reihenfolgen schlechter ab als jede der getesteten Strategien.
Nach unserer Analyse haben wir einige neue Videos und Traces zu Layout Shifts aufgezeichnet, diese manuell sortiert und festgestellt, dass die Messwert-Rankings für den neuen und den ursprünglichen Datensatz sehr ähnlich waren, um herauszufinden, ob wir für den Datensatz möglicherweise überanpassungsfähig sind.
In der Rangliste fielen verschiedene Strategien auf.
Die besten Strategien
Bei der Rangfolge der Strategien haben wir festgestellt, dass drei Arten von Strategien an der Spitze stehen. Beide hatten ungefähr die gleiche Leistung, daher planen wir, alle drei genauer zu analysieren. Wir würden auch gerne Feedback von Entwicklern hören, um herauszufinden, ob es neben der Nutzerfreundlichkeit noch weitere Faktoren gibt, die wir bei der Entscheidung berücksichtigen sollten. (Weitere Informationen zum Geben von Feedback finden Sie unten.)
Hohe Perzentile für lange Zeitfenster
Einige Fensterstrategien haben sich bei langen Fenstergrößen bewährt:
- Schiebefenster von 1 Sekunde
- Sitzungsfenster mit einer maximalen Dauer von 5 Sekunden und einer Lücke von 1 Sekunde
- Unbegrenzte Sitzungsfenster mit einer Lücke von 1 Sekunde
Sie schnitten sowohl beim 95. Perzentil als auch beim Maximum sehr gut ab.
Bei so großen Fenstergrößen hatten wir Bedenken, das 95. Perzentil zu verwenden – oft haben wir uns nur 4–6 Fenster angesehen, und das 95. Perzentil davon ist eine Menge Interpolation. Es ist nicht klar, welche Auswirkungen die Interpolation auf den Messwert hat. Der Maximalwert ist viel klarer, daher haben wir uns entschieden, den Maximalwert zu prüfen.
Durchschnitt von Sitzungsfenstern mit langen Pausen
Die durchschnittliche Punktzahl aller Sitzungsfenster ohne Begrenzung mit einer Lücke von 5 Sekunden dazwischen erwies sich als sehr erfolgreich. Diese Strategie weist einige interessante Merkmale auf:
- Wenn es auf der Seite keine Lücken zwischen den Layoutänderungen gibt, wird ein langes Sitzungsfenster mit genau derselben Bewertung wie der aktuelle CLS erfasst.
- Bei diesem Messwert wurde die Leerlaufzeit nicht direkt berücksichtigt. Es wurden nur die Änderungen berücksichtigt, die auf der Seite erfolgten, und keine Zeitpunkte, zu denen die Seite keine Verschiebungen hatte.
Hohe Perzentile für kurze Zeiträume
Das maximale gleitende Fenster von 300 ms und der 95. Perzentilrang schnitten sehr gut ab. Bei der kürzeren Fenstergröße ist die Percentilinterpolation geringer als bei größeren Fenstergrößen. Wir hatten aber auch Bedenken im Hinblick auf sich wiederholende gleitende Fenster. Wenn sich das Layout über zwei Frames hinweg ändert, gibt es mehrere 300-ms-Fenster, die diese Änderungen enthalten. Die Verwendung des Maximums ist viel klarer und einfacher als die Verwendung des 95. Perzentilwerts. Also haben wir uns entschieden, das Maximum zu prüfen.
Strategien, die nicht funktioniert haben
Strategien, bei denen versucht wurde, die „durchschnittliche“ Nutzungsdauer ohne und mit Layoutänderungen zu ermitteln, schnitten sehr schlecht ab. Die Websites wurden weder in den Zusammenfassungen des Medianwerts noch im 75. Perzentil einer Windowing-Strategie ein gutes Ranking erzielt. Ebenso wenig galt die Summe der Layout Shifts im Zeitverlauf.
Wir haben eine Reihe verschiedener „Budgets“ für akzeptable Layoutänderungen bewertet:
- Der Prozentsatz der Layoutverschiebungen liegt über einem bestimmten Budget. Bei verschiedenen Budgets schnitten diese alle eher schlecht ab.
- Durchschnittliche Layoutverschiebung über einem bestimmten Wert. Die meisten Variationen dieser Strategie schnitten schlecht ab, aber der durchschnittliche Mehrertrag über eine lange Sitzung mit einer großen Lücke war fast so hoch wie der Durchschnitt der Sitzungsfenster mit langen Lücken. Wir haben uns für die zweite Option entschieden, weil sie einfacher ist.
Nächste Schritte
Analyse im größeren Maßstab
Wir haben die oben aufgeführten Top-Strategien in Chrome implementiert, damit wir Daten zur tatsächlichen Nutzung für eine viel größere Anzahl von Websites erhalten. Für die umfassendere Analyse möchten wir einen ähnlichen Ansatz verwenden, bei dem Websites anhand ihrer Messwertbewertungen gelistet werden:
- Sortieren Sie alle Websites nach CLS und nach jedem neuen Messwert.
- Welche Websites werden von CLS und den einzelnen Kandidaten am unterschiedlichsten bewertet? Finden wir bei diesen Websites etwas Unerwartetes?
- Was sind die größten Unterschiede zwischen den neuen Messwertkandidaten? Stehen einige der Unterschiede als Vorteile oder Nachteile eines bestimmten Kandidaten heraus?
- Wiederholen Sie die obige Analyse, aber gruppieren Sie sie nach der Zeit, die bei jedem Seitenaufbau verbracht wurde. Ist eine erwartete Verbesserung bei lang andauernden Seitenladezeiten mit akzeptabler Layoutverschiebung zu sehen? Sehen wir unerwartete Ergebnisse für kurzlebige Seiten?
Feedback zu unserem Ansatz
Wir würden uns über Feedback von Webentwicklern zu diesen Ansätzen freuen. Beachten Sie bei der Auswahl der neuen Ansätze Folgendes:
Was sich nicht ändert
Wir möchten jedoch betonen, dass sich mit dem neuen Ansatz nicht viel ändern wird:
- Keine unserer Messwertideen ändert die Berechnung der Layout-Shift-Werte für einzelne Frames, sondern nur die Zusammenfassung mehrerer Frames. Das bedeutet, dass die JavaScript API für Layoutänderungen unverändert bleibt und auch die zugrunde liegenden Ereignisse in Chrome-Protokollen, die in Entwicklertools verwendet werden, unverändert bleiben. Daher funktionieren Layoutänderungs-Rechtecke in Tools wie WebPageTest und Chrome DevTools weiterhin auf dieselbe Weise.
- Wir werden weiterhin intensiv daran arbeiten, die Messwerte für Entwickler möglichst einfach zu implementieren. Dazu nehmen wir sie in die Web Vitals-Bibliothek auf, dokumentieren sie auf web.dev und erfassen sie in unseren Entwicklertools wie Lighthouse.
Vor- und Nachteile von Messwerten
Bei einer der Top-Strategien werden die Layoutänderungsfenster als Durchschnitt zusammengefasst, bei den anderen wird das maximale Fenster erfasst. Bei Seiten, die sehr lange geöffnet sind, ist der Mittelwert wahrscheinlich ein aussagekräftigerer Wert. Im Allgemeinen ist es für Entwickler jedoch einfacher, auf ein einzelnes Fenster zu reagieren. Sie können beispielsweise protokollieren, wann das Ereignis aufgetreten ist, welche Elemente verschoben wurden usw. Wir würden uns über Feedback dazu freuen, was für Entwickler wichtiger ist.
Sind Schiebe- oder Sitzungsfenster für Sie leichter verständlich? Sind die Unterschiede für Sie wichtig?
So geben Sie Feedback
Sie können die neuen Messwerte für Layoutverschiebungen auf jeder Website mit unseren Beispielimplementierungen für JavaScript oder unserer Fork der Core Web Vitals-Erweiterung ausprobieren.
Bitte senden Sie Ihr Feedback per E-Mail an die Google-Gruppe web-vitals-feedback. Im Betreff steht „[Layout Shift Metrics]“. Wir freuen uns auf dein Feedback!