Hier erfahren Sie mehr über unsere Pläne zur Verbesserung des Messwerts „Cumulative Layout Shift“ und geben uns Feedback.
Cumulative Layout Shift (CLS) ist ein Messwert, der die visuelle Stabilität einer Webseite misst. Dieser Messwert wird als kumulativer Layout Shift bezeichnet, da die Punktzahl jeder einzelnen Verschiebung während der Lebensdauer der Seite addiert wird.
Alle Layout Shifts stellen zwar eine schlechte Nutzererfahrung dar, summieren sich jedoch auf Seiten, die länger geöffnet sind, mehr. Deshalb wollte das Chrome-Team für Geschwindigkeitsmesswerte den CLS-Messwert verbessern, um die auf einer Seite verbrachte Zeit neutraler zu gestalten.
Dabei ist es wichtig, dass der Schwerpunkt auf der Nutzererfahrung während der gesamten Lifetime liegt. Wir haben festgestellt, dass Nutzer häufig negative Erfahrungen nach dem Laden beim Scrollen oder Navigieren auf Seiten machen. Uns wird jedoch mitgeteilt, wie sich das auf langlebige Seiten auswirkt, also auf Seiten, die Nutzer im Allgemeinen schon lange geöffnet haben. Es gibt verschiedene Arten von Seiten, die in der Regel länger geöffnet bleiben. Zu den häufigsten gehören Social-Media-Apps mit unendlichem Scrollen und Single-Page-Anwendungen.
Eine interne Analyse langlebiger Seiten mit hohen CLS-Werten ergab, dass die meisten Probleme durch folgende Muster verursacht wurden:
- Unendliches Scrolling, das sich den Inhalt des Bilds bewegt, wenn 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 ermutigen Entwickler, diese Nutzererfahrungen zu verbessern. Wir arbeiten aber auch daran, den Messwert zu verbessern, und bitten um Feedback zu möglichen Ansätzen.
Wie können wir entscheiden, ob ein neuer Messwert besser ist?
Bevor wir uns mit dem metrischen Design befassen, wollten wir sicherstellen, dass wir unsere Ideen auf einer Vielzahl von realen Webseiten und Anwendungsfällen ausgewertet haben. Zu Beginn haben wir eine kleine Nutzerstudie entwickelt.
Zuerst haben wir Videos und Chrome-Traces von 34 Nutzerpfaden auf verschiedenen Websites aufgezeichnet. Bei der Auswahl der User Journeys hatten wir folgende Ziele:
- Eine Vielzahl unterschiedlicher Arten von Websites, z. B. Nachrichten- und Shopping-Websites.
- Verschiedene Nutzerpfade, z. B. anfänglicher Seitenaufbau, Scrollen, Single-Page-App-Navigation und Nutzerinteraktionen.
- Unterschiedliche Anzahl und Intensität der einzelnen Layout Shifts auf den Websites.
- Abgesehen von Layoutverschiebungen gab es nur wenige negative Erfahrungen auf den Websites.
Wir haben 41 unserer Kollegen gebeten, sich zwei Videos gleichzeitig anzusehen, und bewerteten, welches von ihnen in Bezug auf Layout Shifts besser abschneidet. Aus diesen Bewertungen haben wir eine idealisierte Rangfolge der Websites erstellt. Das Ergebnis des Nutzer-Rankings bestätigt unsere Vermutung, dass unsere Kollegen wie die meisten Nutzer sehr frustriert über Layoutverschiebungen nach dem Laden sind, insbesondere beim Scrollen und beim Aufrufen von einseitigen Apps. Wir haben festgestellt, dass einige Websites bei diesen Aktivitäten eine viel bessere Nutzererfahrung bieten als andere.
Da wir zusammen mit den Videos Chrome-Traces aufgezeichnet hatten, hatten wir alle Details der einzelnen Layout Shifts in jeder User Journey. Wir haben diese verwendet, um die Messwerte für jede Idee und den jeweiligen Kaufprozess zu berechnen. So konnten wir nachvollziehen, wie die einzelnen Messwertvarianten die Nutzerpfade bewertet haben und wie sich die einzelnen Varianten vom idealen Ranking unterscheiden.
Welche Ideen für Messwerte haben wir getestet?
Windowing-Strategien
Häufig sind auf Seiten mehrere Layout Shifts eng beieinander angeordnet, da sich Elemente mehrfach verschieben können, wenn Stück für Stück neuer Inhalt verfügbar ist. Dies veranlasste uns, Techniken zur Gruppierung von Schichten auszuprobieren. Um dies zu erreichen, haben wir uns drei Windowing-Ansätze angesehen:
- Rollierende Fenster
- Schiebefenster
- Sitzungsfenster
In jedem dieser Beispiele weist die Seite Layoutverschiebungen von unterschiedlichem Schweregrad im Laufe der Zeit auf. Jeder blaue Balken steht für einen einzelnen Layout Shift und die Länge entspricht dem score dieses Shifts. Die Bilder veranschaulichen, wie verschiedene Windowing-Strategien die Layout Shifts im Laufe der Zeit gruppieren.
Rollierende Fenster
Am einfachsten ist es, die Seite in Fenster mit gleich großen Blöcken 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 der Ladevorgänge oder der Nutzerinteraktionen auf der Seite gibt, können dieselben Layout Shifts auf verschiedene Seiten der rollierenden Fenstergrenzen 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. Die obige Abbildung zeigt ein gleitendes Fenster nach dem anderen, aber wir könnten alle möglichen gleitenden Fenster oder eine Teilmenge davon betrachten, 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. Wir haben dies also auch mit einer maximalen Fenstergröße ausprobiert.
Fenstergrößen
Der Messwert kann je nachdem, wie groß die Fenster tatsächlich sind, sehr unterschiedliche Ergebnisse liefern. Daher haben wir mehrere unterschiedliche Fenstergrößen ausprobiert:
- Jede Schicht als eigenes Fenster (keine Fenster)
- 100 ms
- 300 ms
- 1 Sekunde
- 5 Sekunden
Zusammenfassung
Wir haben viele Möglichkeiten ausprobiert, die verschiedenen Fenster zusammenzufassen.
Perzentile
Wir haben uns den Wert des maximalen Zeitfensters, das 95. Perzentil, das 75. Perzentil und den Medianwert angesehen.
Durchschnitt
Wir haben uns den mittleren Wert des Fensters angesehen.
Budgets
Wir haben uns gefragt, ob es vielleicht einen Mindestwert für Layout Shifts gibt, den die Nutzer nicht bemerken würden, und wir könnten einfach Layout Shifts über dieses „Budget“ in die Punktzahl einbeziehen. Daher haben wir uns bei verschiedenen potenziellen „Budget“-Werten den prozentualen Anteil der Veränderungen über dem Budget und den Gesamtwert der Verschiebung gegenüber dem Budget angesehen.
Weitere Strategien
Wir haben uns auch viele Strategien angesehen, die keine Fenster umfassten, wie z. B. die gesamte Layoutverschiebung durch die Zeit auf der Seite und den Durchschnitt der schlechtesten n einzelnen Schichten.
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 Nutzerpfade nach ihrem Wert für den Messwert sortiert und dann die Messwerte danach bewertet, wie nahe sie dem idealen Ranking lagen.
Um einen Baseline-Wert zu ermitteln, haben wir alle Websites auch nach ihrem aktuellen CLS-Wert sortiert. CLS belegte den 32. Platz, verglichen mit 13 anderen Strategien, und war daher besser als die meisten Varianten 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.
In der Rangliste fielen verschiedene Strategien auf.
Beste Strategien
Bei der Rangfolge der Strategien haben wir herausgefunden, 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 freuen uns auch über Feedback von Entwicklern, um zu erfahren, ob es neben der Nutzererfahrung auch andere Faktoren gibt, die wir bei der Entscheidung berücksichtigen sollten. (Unten sehen Sie, wie Sie Feedback geben können.)
Hohe Perzentile langer Fenster
Einige Windowing-Strategien haben sich bei langen Fenstergrößen bewährt:
- Fließende Fenster (1 Sekunde)
- Sitzungsfenster auf 5 Sekunden begrenzt mit einer Lücke von 1 Sekunde
- Sitzungsfenster ohne Begrenzung von 1 Sekunde
Diese Videos haben sowohl beim 95. Perzentil als auch beim Höchstwert ein gutes Ranking erzielt.
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 unklar, was die Interpolation in Bezug auf den Messwert bewirkt. Der Maximalwert ist viel klarer, daher haben wir beschlossen, den Maximalwert zu überprüfen.
Durchschnitt der Sitzungsfenster mit langen Lücken
Die durchschnittliche Punktzahl aller Sitzungsfenster ohne Begrenzung mit einer Lücke von 5 Sekunden dazwischen erwies sich als sehr erfolgreich. Diese Strategie hat einige interessante Eigenschaften:
- Wenn auf der Seite keine Lücken zwischen Layout Shifts bestehen, handelt es sich am Ende um ein langes Sitzungsfenster mit genau demselben Wert wie der aktuelle CLS.
- Bei diesem Messwert wurde die Inaktivitätszeit nicht direkt berücksichtigt. Es wurden nur die Änderungen berücksichtigt, die auf der Seite erfolgten, und keine Zeitpunkte, zu denen die Seite keine Verschiebung ergab.
Hohe Perzentile kurzer Fenster
Das maximale gleitende Fenster von 300 ms wurde sehr hoch eingestuft sowie das 95. Perzentil. Bei der kürzeren Fenstergröße gibt es weniger Perzentilinterpolation als bei größeren Fenstergrößen, aber wir waren auch besorgt über „sich wiederholende“ gleitende Fenster: Wenn eine Reihe von Layout Shifts über zwei Frames auftritt, gibt es mehrere 300-ms-Fenster, die sie enthalten. Das Maximum ist viel klarer und einfacher als das 95. Perzentil. Daher haben wir uns entschieden, den Maximalwert zu überprüfen.
Strategien, die nicht funktioniert haben
Strategien, bei denen versucht wurde, die „durchschnittliche“ Zeit zu betrachten, die sowohl ohne Layout Shifts als auch mit Layout Shifts verbracht wurde, 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 Shifts überprüft:
- Prozentsatz der Layoutverschiebungen über einem bestimmten Budget. Bei verschiedenen Budgets schnitten diese alle eher schlecht ab.
- Durchschnittliche Layoutverschiebung über einem Überschuss Die meisten Varianten dieser Strategie schnitten schlecht ab. Der durchschnittliche Überschuss bei einer langen Sitzung mit einer großen Lücke schnitt jedoch fast genauso ab 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
Umfangreichere Analysen
Wir haben die oben aufgeführten Top-Strategien in Chrome implementiert, sodass wir Daten zur tatsächlichen Nutzung für eine viel größere Gruppe von Websites erhalten können. Für eine umfassendere Analyse planen wir einen ähnlichen Ansatz für das Ranking von Websites auf der Grundlage ihrer Kennzahlen:
- Sortieren Sie alle Websites nach CLS und jedem neuen möglichen Messwert.
- Welche Websites werden bei den CLS und den jeweiligen Kandidaten am unterschiedlichsten eingestuft? Kommt es beim Aufrufen dieser Websites zu unerwarteten Ergebnissen?
- Was sind die größten Unterschiede zwischen den neuen Messwertkandidaten? Heben sich einige der Unterschiede als Vor- oder Nachteile eines bestimmten Kandidaten hervor?
- Wiederholen Sie die obige Analyse, aber gruppieren Sie sie nach der Zeit, die bei jedem Seitenaufbau verbracht wurde. Erwarten wir eine Verbesserung bei langlebigen Seitenladevorgängen mit akzeptablen Layout Shifts? 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. Einige Punkte, die Sie im Zusammenhang mit den neuen Ansätzen beachten sollten:
Was sich nicht ändert
Wir möchten klarstellen, dass sich durch einen neuen Ansatz viele Dinge nicht ändern werden:
- Keine unserer Metrikideen ändert die Art und Weise, wie Layout Shift-Werte für einzelne Frames berechnet werden, sondern nur die Art, wie wir mehrere Frames zusammenfassen. Das bedeutet, dass die JavaScript API für Layout Shifts unverändert bleibt und die zugrunde liegenden Ereignisse in Chrome-Traces, die von den Entwicklertools verwendet werden, gleich bleiben, sodass die Layoutverschiebungen in Tools wie WebPageTest und Chrome DevTools weiterhin auf die gleiche Weise funktionieren.
- Wir arbeiten weiterhin intensiv daran, die Messwerte für Entwickler so einfach wie möglich zu machen. Dazu gehören sie in die Webvitals-Bibliothek, die Dokumentation auf web.dev und die Berichterstellung in unseren Entwicklertools wie Lighthouse.
Vor- und Nachteile von Messwerten
Eine der Top-Strategien fasst die Layout Shift-Fenster als Durchschnittswert zusammen, die anderen umfassen das maximale Fenster. Bei Seiten, die sehr lange geöffnet sind, gibt der Durchschnitt wahrscheinlich einen repräsentativeren Wert zurück. Im Allgemeinen ist es für Entwickler jedoch wahrscheinlich einfacher, auf ein einzelnes Fenster zu reagieren – sie können protokollieren, wann es aufgetreten ist, welche Elemente sich verschoben haben usw. Wir freuen uns immer über Feedback, was für Entwickler wichtiger ist.
Finden Sie gleitende Fenster oder Sitzungsfenster leichter verständlich? Sind die Unterschiede wichtig für Sie?
So geben Sie Feedback
Sie können die neuen Messwerte für Layout Shifts auf jeder Website mit unseren Beispiel-JavaScript-Implementierungen 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!