Es ist geplant, den CLS-Messwert so zu verbessern, dass er gegenüber langlebigeren Seiten fairer wird.
Wir vom Chrome-Team für Geschwindigkeitsmesswerte haben vor Kurzem unsere erste Untersuchung zu Möglichkeiten, den CLS-Messwert fairer gegenüber Seiten zu gestalten, die über einen längeren Zeitraum geöffnet sind, beschrieben. Wir haben viel hilfreiches Feedback erhalten und nach Abschluss der umfassenden Analyse haben wir die Änderung abgeschlossen, die wir am Messwert vornehmen möchten: maximales Sitzungsfenster mit 1 Sekunde Abstand, begrenzt auf 5 Sekunden.
Einzelheiten erfährst du, wenn du weiterliest.
Wie haben wir die Optionen bewertet?
Wir haben das gesamte Feedback von der Entwickler-Community geprüft und berücksichtigt.
Außerdem haben wir die Top-Optionen in Chrome implementiert und eine umfangreiche Analyse der Messwerte für Millionen von Webseiten durchgeführt. Wir haben überprüft, welche Arten von Websites sich bei den einzelnen Optionen verbessert haben und wie die Optionen verglichen wurden. Dabei haben wir uns insbesondere die Websites angesehen, die durch die verschiedenen Optionen unterschiedlich bewertet wurden. Insgesamt haben wir Folgendes festgestellt:
- Durch Alle Optionen wurde die Korrelation zwischen der auf der Seite verbrachten Zeit und dem Wert der Layoutverschiebung reduziert.
- Keine der Optionen führte zu einer schlechteren Bewertung für die Seite. Es besteht also kein Grund zur Sorge.
Entscheidungspunkte
Warum ein Sitzungsfenster?
In unserem früheren Beitrag haben wir einige verschiedene Windowing-Strategien behandelt, mit denen sich Layoutverschiebungen gruppieren und gleichzeitig sicherstellen können, dass die Punktzahl nicht unbegrenzt zunimmt. Das Feedback, das wir von Entwicklern erhalten haben, kam mit überwältigendem Gefallen an der Sitzungsfensterstrategie, da sie die Layoutverschiebungen auf intuitivere Weise zusammenfasst.
Hier ein Beispiel für die Überprüfung von Sitzungsfenstern:
Im Beispiel oben treten viele Layoutverschiebungen im Laufe der Zeit auf, wenn der Nutzer die Seite aufruft. Sie werden jeweils durch einen blauen Balken dargestellt. Oben sehen Sie, dass die blauen Balken unterschiedliche Höhen haben. Diese stellen den score der einzelnen Layout Shifts dar. Ein Sitzungsfenster beginnt mit der ersten Layoutverschiebung und wird erweitert, bis es eine Lücke ohne Layoutverschiebungen gibt. Mit der nächsten Layoutverschiebung wird ein neues Sitzungsfenster geöffnet. Da es drei Lücken ohne Layoutverschiebungen gibt, gibt es im Beispiel drei Sitzungsfenster. Ähnlich wie bei der aktuellen Definition von CLS werden die Punktzahlen jeder Verschiebung addiert, sodass der Wert jedes Fensters die Summe der einzelnen Layout Shifts ist.
Basierend auf der ersten Forschung haben wir eine Lücke von 1 Sekunde zwischen Sitzungsfenstern gewählt, was in unserer umfassenden Analyse gut funktionierte. Der im Beispiel oben gezeigte „Sitzungslücke“ beträgt also 1 Sekunde.
Warum ist das maximale Sitzungsfenster?
In unserer ersten Forschung haben wir die Zusammenfassungsstrategien auf zwei Optionen beschränkt:
- Die durchschnittliche Punktzahl aller Sitzungsfenster bei sehr großen Sitzungsfenstern (nicht begrenzte Fenster mit einem Abstand von 5 Sekunden zwischen ihnen).
- Der maximale Wert aller Sitzungsfenster bei kleineren Sitzungsfenstern (auf 5 Sekunden begrenzt, mit einem Abstand von 1 Sekunde).
Nach den ersten Untersuchungen haben wir jeden Messwert zu Chrome hinzugefügt, um eine umfassende Analyse von Millionen von URLs durchzuführen. Die umfangreiche Analyse stieß dabei auf viele URLs mit Layoutverschiebungsmustern wie diesen:
Unten rechts sehen Sie nur eine einzige, kleine Layoutverschiebung im Sitzungsfenster 2, was eine sehr niedrige Bewertung verursacht. Die durchschnittliche Punktzahl ist also ziemlich niedrig. Aber was ist, wenn der Entwickler diesen winzigen Layout Shift behebt? Dann wird die Punktzahl nur für Sitzungsfenster 1 berechnet, was bedeutet, dass sich die Punktzahl der Seite fast verdoppelt. Es wäre wirklich verwirrend und rät Entwicklern, ihre Layout Shifts zu verbessern, um dann festzustellen, dass sich die Punktzahl verschlechtert. Das Entfernen dieser kleinen Layoutverschiebung ist für die Nutzer offensichtlich etwas besser, daher sollte sich die Punktzahl nicht verschlechtern.
Aufgrund dieses Problems mit Durchschnitten haben wir uns entschieden, mit den kleineren, begrenzten und maximalen Fenstern fortzufahren. Im obigen Beispiel würde Sitzungsfenster 2 also ignoriert und nur die Summe der Layoutverschiebungen im Sitzungsfenster 1 wird gemeldet.
Warum 5 Sekunden?
Wir haben mehrere Fenstergrößen ausgewertet und zwei Dinge herausgefunden:
- Bei kurzen Fenstern können langsamere Seitenladevorgänge und langsamere Reaktionen auf Nutzerinteraktionen Layoutverschiebungen in mehrere Fenster unterbrechen und die Punktzahl verbessern. Wir wollten das Fenster groß genug halten, damit Verlangsamungen nicht belohnt werden.
- Es gibt einige Seiten mit einem ständigen Strom kleiner Layoutverschiebungen. Zum Beispiel eine Seite mit Sportergebnissen, die sich mit jeder Aktualisierung der Ergebnisse ein wenig verändert. Diese Schichten sind ärgerlich, werden aber mit der Zeit nicht lästig. Daher wollten wir dafür sorgen, dass das Fenster für diese Arten von Layoutverschiebungen begrenzt wird.
Unter Berücksichtigung dieser beiden Aspekte sind wir beim Vergleich verschiedener Fenstergrößen auf vielen realen Webseiten zu dem Schluss gekommen, dass 5 Sekunden eine gute Einschränkung der Fenstergröße sind.
Wie wirkt sich das auf den CLS-Wert meiner Seite aus?
Da dieses Update die CLS einer Seite begrenzt, hat keine Seite eine schlechtere Bewertung als Folge dieser Änderung.
Unsere Analyse hat ergeben, dass 55% der Ursprünge beim 75. Perzentil keine Änderung der CLS feststellen werden. Dies liegt daran, dass ihre Seiten entweder derzeit keine Layoutverschiebungen aufweisen oder dass die vorhandenen Verschiebungen bereits auf ein einzelnes Sitzungsfenster beschränkt sind.
Für die übrigen Ursprünge werden nach dieser Änderung verbesserte Werte für das 75. Perzentil angezeigt. Bei den meisten Punkten gibt es nur eine geringfügige Verbesserung. Bei etwa 3% werden sich die Bewertungen jedoch von „Optimierung erforderlich“ oder „Schlecht“ zu einer Bewertung „Gut“ verbessern. Auf diesen Seiten werden in der Regel unendliche Scroller oder viele langsame UI-Aktualisierungen verwendet, wie in unserem vorherigen Beitrag beschrieben.
Wie kann ich es ausprobieren?
Wir werden unsere Tools bald auf die neue Messwertdefinition aktualisieren. Bis dahin können Sie die aktualisierte CLS-Version mithilfe der JavaScript-Beispielimplementierungen oder der Abspaltung der Web Vitals-Erweiterung auf jeder beliebigen Website ausprobieren.
Vielen Dank an alle, die sich die Zeit genommen haben, den vorherigen Beitrag zu lesen und Feedback zu geben.