Hier können Sie mehr über unsere Pläne zur Verbesserung des Messwerts „Cumulative Layout Shift“ erfahren und uns Feedback geben.
Cumulative Layout Shift (CLS) ist ein Messwert, der die visuelle Stabilität einer Webseite misst. Der Messwert wird als kumulative Layoutverschiebung bezeichnet, weil der Wert für jede einzelne Schicht über die gesamte Lebensdauer der Seite hinweg summiert wird.
Alle Layoutverschiebungen sind nicht nutzerfreundlich, doch sie summieren sich auf Seiten, die länger geöffnet sind. Aus diesem Grund hat sich das Chrome-Team für Geschwindigkeitsmesswerte daran gemacht, den CLS-Messwert zu verbessern, um die Zeit, die auf einer Seite verbracht wird, neutraler zu gestalten.
Es ist wichtig, dass der Messwert sich auf die Nutzererfahrung über die gesamte Seitenlebensdauer konzentriert, da wir festgestellt haben, dass Nutzer nach dem Laden beim Scrollen oder Navigieren durch Seiten häufig negative Erfahrungen machen. Wir haben jedoch Bedenken darüber gehört, inwiefern sich dies auf langlebige Seiten auswirkt, d. h. Seiten, die der Nutzer im Allgemeinen schon lange geöffnet hat. 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:
- Unendliche Scroller verschieben Inhalte, wenn der Nutzer scrollt.
- Eingabe-Handler, die mehr als 500 ms benötigen, um die Benutzeroberfläche als Reaktion auf eine Nutzerinteraktion ohne jegliche Art von Platzhaltern oder Rastermustern zu aktualisieren.
Wir möchten Entwickler ermutigen, diese Nutzererfahrungen zu verbessern. Wir arbeiten aber auch daran, den Messwert zu verbessern, und bitten um Feedback zu möglichen Ansätzen.
Wie würden wir entscheiden, ob ein neuer Messwert besser ist?
Bevor wir uns mit dem Design von Metriken befassten, wollten wir unsere Ideen anhand einer Vielzahl von realen Webseiten und Anwendungsfällen evaluieren. Zu Beginn haben wir eine kleine Nutzungsstudie entwickelt.
Zuerst haben wir Videos und Chrome-Traces zu 34 Nutzerpfaden auf verschiedenen Websites aufgezeichnet. Bei der Auswahl der User Journeys haben wir einige Dinge berücksichtigt:
- Eine Vielzahl verschiedener Arten von Websites, z. B. Nachrichten- und Shopping-Websites.
- Verschiedene Nutzerpfade, z. B. beim ersten Seitenaufbau, beim Scrollen, beim Aufrufen einer einzigen Seite in der App und bei Nutzerinteraktionen.
- Vielfältige Anzahl und Intensität einzelner Layoutverschiebungen auf den Websites.
- Abgesehen von Layoutverschiebungen gab es auf den Websites kaum negative Erfahrungen.
Wir haben 41 unserer Kollegen gebeten, sich zwei Videos gleichzeitig anzusehen, um zu bewerten, welches der beiden in Bezug auf Layoutverschiebung besser war. Aus diesen Bewertungen haben wir eine ideale Rangfolge der Websites erstellt. Die Ergebnisse des Nutzer-Rankings haben unsere Vermutung bestätigt, dass unsere Kollegen wie die meisten Nutzenden wirklich von Layoutverschiebungen nach dem Laden frustriert sind, insbesondere beim Scrollen und beim Navigieren in einer einzigen Seite in der App. Wir haben festgestellt, dass einige Websites bei diesen Aktivitäten eine viel bessere Nutzererfahrung bieten als andere.
Da wir Chrome-Traces zusammen mit den Videos aufgezeichnet haben, hatten wir alle Details zu den einzelnen Layoutverschiebungen, die bei den einzelnen Schritten der Nutzer entstanden sind. Wir haben diese verwendet, um Messwerte für jede Idee für jede User Journey zu berechnen. So konnten wir feststellen, wie die einzelnen Messwertvarianten die Kaufprozesse bewertet haben und wie sich die einzelnen Varianten vom idealen Ranking unterscheiden.
Welche Ideen für Messwerte haben wir getestet?
Windowing-Strategien
Häufig gibt es mehrere Layoutverschiebungen, die nah beieinander liegen, weil sich Elemente mehrfach verschieben können, wenn neuer Inhalt Stück für Stück erscheint. Das hat uns dazu veranlasst, Techniken zum Gruppieren von Schichten zu testen. Um dies zu erreichen, haben wir uns drei Windowing-Ansätze angesehen:
- Rollierende Fenster
- Schiebefenster
- Sitzungsfenster
In jedem dieser Beispiele gibt es auf der Seite Layoutverschiebungen mit unterschiedlichem Schweregrad im Laufe der Zeit. Jeder blaue Balken steht für einen einzelnen Layout Shift, und die Länge stellt den Score dieser Verschiebung dar. Die Bilder veranschaulichen, wie verschiedene Windowing-Strategien die Layoutverschiebungen im Zeitverlauf gruppieren.
Rollierende Fenster
Der einfachste Ansatz besteht darin, die Seite einfach in Fenster gleich großer Blöcke aufzuteilen. Diese werden als rollierende Fenster bezeichnet. Oben sehen Sie, dass der vierte Balken eigentlich in dem zweiten rollierenden Fenster gruppiert werden sollte. Da die Fenster aber alle eine feste Größe haben, befindet sie sich stattdessen im ersten Fenster. Wenn es auf der Seite leichte Unterschiede beim Timing von Ladevorgängen oder Nutzerinteraktionen gibt, können dieselben Layoutverschiebungen auf verschiedenen Seiten der rollierenden Fenstergrenzen auftreten.
Schiebefenster
Ein Ansatz, der uns mehr mögliche Gruppierungen gleicher Länge ermöglicht, besteht darin, das potenzielle Zeitfenster im Laufe der Zeit kontinuierlich zu aktualisieren. Die Abbildung oben zeigt ein gleitendes Fenster nach dem anderen, aber wir könnten alle möglichen gleitenden Fenster oder einen Teil davon betrachten, um einen Messwert zu erstellen.
Sitzungsfenster
Wenn wir uns auf die Identifizierung von Bereichen der Seite mit Reihen von Layoutverschiebungen konzentrieren möchten, könnten wir jedes Fenster mit einer Verschiebung beginnen und es so lange vergrößern, bis wir zwischen den Layoutverschiebungen eine Lücke einer bestimmten Größe gefunden haben. Bei diesem Ansatz werden die Layoutverschiebungen zu Gruppen zusammengefasst und der Großteil der nicht wechselnden User Experience ignoriert. Ein potenzielles Problem besteht darin, dass ein auf Sitzungsfenstern basierender Messwert genau wie der aktuelle CLS-Messwert unbegrenzt wachsen kann, wenn die Layoutverschiebungen keine Lücken aufweisen. Also haben wir das auch mit einer maximalen Fenstergröße ausprobiert.
Fenstergrößen
Die Metrik kann je nach Größe der Fenster sehr unterschiedliche Ergebnisse liefern. Daher haben wir mehrere unterschiedliche Fenstergrößen ausprobiert:
- Jede Verschiebung als eigenes Fenster (keine Fenster)
- 100 ms
- 300 ms
- 1 Sekunde
- 5 Sekunden
Zusammenfassung
Wir haben verschiedene Möglichkeiten ausprobiert, die verschiedenen Fenster zusammenzufassen.
Perzentile
Wir haben uns den maximalen Fensterwert sowie das 95. Perzentil, das 75. Perzentil und den Medianwert angesehen.
Durchschnitt
Wir haben uns den durchschnittlichen Fensterwert angeschaut.
Budgets
Wir haben uns gefragt, ob es vielleicht einen minimalen Wert für Layoutverschiebungen gäbe, den die Nutzer nicht bemerken würden, und konnten einfach Layoutverschiebungen, die über dieses „Budget“ hinausgehen, in die Bewertung einbeziehen. Daher haben wir uns für verschiedene potenzielle „Budget“-Werte den Prozentsatz der Umschichtungen gegenüber dem Budget und den Gesamtwert für die Verschiebungen gegenüber dem Budget betrachtet.
Weitere Strategien
Wir haben uns auch viele Strategien angesehen, die keine Fenster beinhalteten, zum Beispiel die gesamte Layoutverschiebung durch die Zeit auf der Seite und den Durchschnitt der schlimmsten N einzelnen Verschiebungen.
Erste Ergebnisse
Insgesamt haben wir 145 verschiedene Messwertdefinitionen getestet, die auf den Varianten der oben genannten Ideen beruhen. Für jeden Messwert haben wir alle Kaufprozesse nach ihrem Score für den Messwert sortiert und dann die Messwerte danach bewertet, wie nahe sie dem idealen Ranking waren.
Um einen Vergleichswert zu erhalten, haben wir alle Websites außerdem nach ihrem aktuellen CLS-Wert eingestuft. CLS belegte den 32. Platz, gleichauf mit 13 weiteren Strategien, sodass er besser als die meisten der oben genannten Strategien war. Um sicherzustellen, dass die Ergebnisse aussagekräftig waren, haben wir auch drei zufällige Reihenfolgen hinzugefügt. Wie erwartet, waren die zufälligen Bestellungen schlechter als jede getestete Strategie.
Um herauszufinden, ob eine Überanpassung für das Dataset vorliegt, haben wir nach unserer Analyse einige neue Videos und Traces zur Layoutverschiebung aufgezeichnet, diese manuell eingestuft und festgestellt, dass die Rangfolgen der Messwerte für das neue und das ursprüngliche Dataset sehr ähnlich waren.
Verschiedene Strategien stießen in den Ranglisten auf.
Beste Strategien
Bei der Bewertung der Strategien stellten wir fest, dass drei Arten von Strategien an erster Stelle stehen. Beide erzielten ungefähr die gleiche Leistung, daher planen wir, mit einer genaueren Analyse aller drei Methoden fortzufahren. Wir sind auch an Feedback von Entwicklern interessiert, um zu verstehen, ob es neben der Nutzererfahrung weitere Faktoren gibt, die wir bei der Entscheidung zwischen ihnen berücksichtigen sollten. Unten finden Sie Informationen dazu, wie Sie Feedback geben können.
Hohe Perzentile langer Fenster
Einige Windowing-Strategien funktionierten gut bei großen Fenstern:
- Schiebefenster mit 1 Sekunde
- Sitzungsfenster sind auf 5 Sekunden begrenzt, mit einer Lücke von 1 Sekunde.
- Sitzungsfenster mit einer Lücke von 1 Sekunde nicht begrenzt
Diese Punkte schnitten sowohl beim 95. Perzentil als auch beim Maximum wirklich gut ab.
Aber bei so großen Fenstergrößen machten wir uns Sorgen um die Verwendung des 95. Perzentils – oft haben wir nur 4 bis 6 Fenster betrachtet und das 95. Perzentil davon ist viel Interpolation. Es ist unklar, wie sich die Interpolation in Bezug auf den Messwert auswirkt. Da der Maximalwert viel klarer ist, haben wir beschlossen, ihn zu überprüfen.
Durchschnitt der Sitzungsfenster mit langen Lücken
Der Durchschnitt der Punktzahlen aller uneingeschränkten Sitzungsfenster mit einem Abstand von 5 Sekunden zwischen ihnen war sehr gut. Diese Strategie weist einige interessante Merkmale auf:
- Wenn auf der Seite keine Lücken zwischen Layoutverschiebungen vorhanden sind, wird am Ende ein langes Sitzungsfenster angezeigt, das exakt denselben Wert wie die aktuelle CLS hat.
- Bei diesem Messwert wurde die Inaktivitätszeit nicht direkt berücksichtigt. Es wurden nur die Änderungen auf der Seite berücksichtigt, nicht aber die Zeitpunkte, zu denen die Seite keine Veränderungen hatte.
Hohe Perzentile kurzer Zeitfenster
Das gleitende Fenster mit maximal 300 ms wurde sehr hoch eingestuft, ebenso wie das 95. Perzentil. Bei der kürzeren Fenstergröße gibt es weniger Perzentilinterpolation als größere Fenstergrößen, aber wir waren auch besorgt über „wiederholte“ gleitende Fenster: Wenn ein Satz von Layoutverschiebungen über zwei Frames erfolgt, gibt es mehrere 300-ms-Fenster, die sie enthalten. Das Maximum lässt sich viel klarer und einfacher ermitteln als das 95. Perzentil. Also haben wir uns entschlossen, das Maximum zu überprüfen.
Strategien, die nicht funktioniert haben
Strategien, bei denen versucht wurde, die „durchschnittliche“ Zeit ohne Layoutverschiebungen und mit Layoutverschiebungen auszuwerten, schnitten sehr schlecht ab. In keiner der Zusammenfassungen des Medianwerts oder des 75. Perzentils einer Windowing-Strategie wurden die Websites gut bewertet. Auch die Summe der Layoutverschiebungen im Laufe der Zeit hat sich nicht ergeben.
Wir haben verschiedene „Budgets“ hinsichtlich akzeptabler Layoutverschiebungen ausgewertet:
- Prozentsatz der Layoutverschiebungen, die über einem bestimmten Budget liegen. Diese schnitten bei den verschiedenen Budgets recht schlecht ab.
- Durchschnittliche Layoutverschiebung über einem übermäßigen Übergang. Die meisten Varianten dieser Strategie schnitten schlecht ab, aber der durchschnittliche Überschuss bei einer langen Sitzung mit einer großen Lücke war fast genauso gut wie der durchschnittliche Sitzungsfenster mit langen Lücken. Wir haben beschlossen, nur Letzteres zu verwenden, da es einfacher ist.
Weitere Informationen
Größere Analyse
Wir haben die oben aufgeführten 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 die umfassendere Analyse planen wir, einen ähnlichen Ansatz zum Ranking von Websites auf der Grundlage ihrer Kennzahlen zu nutzen:
- Sortieren Sie alle Websites nach CLS und nach jedem neuen Messwertkandidat.
- Welche Websites werden nach CLS und den einzelnen Kandidaten am unterschiedlichsten eingestuft? Finden wir etwas Unerwartetes, wenn wir uns diese Websites ansehen?
- Was sind die größten Unterschiede zwischen den neuen Messwertkandidaten? Stehen irgendwelche der Unterschiede als Vor- oder Nachteile eines bestimmten Kandidaten auf?
- Wiederholen Sie die obige Analyse, aber erstellen Sie Bucketing nach der Zeit, die bei jedem Seitenaufbau aufgewendet wurde. Erwarten wir eine Verbesserung bei langlebigen Seitenladevorgängen mit akzeptabler Layoutverschiebung? Gibt es unerwartete Ergebnisse für kurzlebige Seiten?
Feedback zu unserem Ansatz
Wir würden uns über Feedback von Webentwicklern zu diesen Ansätzen freuen. Bei der Berücksichtigung der neuen Ansätze ist Folgendes zu beachten:
Was sich nicht ändert
Wir möchten betonen, dass sich mit einem neuen Ansatz vieles nicht ändern wird:
- Keine unserer Ideen für Messwerte ändert die Art und Weise, wie Layout Shift-Werte für einzelne Frames berechnet werden, sondern nur die Art und Weise, wie wir mehrere Frames zusammenfassen. Das bedeutet, dass die JavaScript API für Layout Shifts unverändert bleibt und die zugrunde liegenden Ereignisse in den Chrome-Traces, die von den Entwicklertools verwendet werden, ebenfalls unverändert bleiben. Die Layout Shift-Rects in Tools wie WebPageTest und den Chrome-Entwicklertools funktionieren also weiterhin wie gewohnt.
- Wir arbeiten weiterhin intensiv daran, die Messwerte für Entwickler einfach zu verwenden. Wir nehmen sie in die web-vitals-Bibliothek auf, dokumentieren auf web.dev und melden sie in unseren Entwicklertools wie Lighthouse.
Vor- und Nachteile von Messwerten
Eine der Top-Strategien fasst die Layout Shift-Fenster als Durchschnitt zusammen und die anderen geben das maximale Fenster an. Bei Seiten, die sehr lange geöffnet sind, wird im Durchschnitt wahrscheinlich ein repräsentativerer Wert gemeldet. Im Allgemeinen ist es für Entwickler jedoch wahrscheinlich einfacher, auf ein einzelnes Fenster zu reagieren – sie können protokollieren, wann das Ereignis aufgetreten ist, welche Elemente sich verschoben haben usw. Wir freuen uns über Feedback, was für Entwickler wichtiger ist.
Finden Sie gleitende oder Sitzungsfenster leichter zu verstehen? Sind Ihnen die Unterschiede wichtig?
So geben Sie Feedback
Sie können die neuen Messwerte zum Layout Shift auf jeder beliebigen Website ausprobieren. Verwenden Sie dazu unsere Beispiel-JavaScript-Implementierungen oder unsere Abspaltung der Core Web Vitals-Erweiterung.
Bitte senden Sie Ihr Feedback mit dem Betreff „[Layout Shift Metrics]“ an unsere Google-Gruppe web-vitals-feedback. Wir freuen uns auf deine Rückmeldung!