Pläne zur Verbesserung des CLS-Messwerts, um gegenüber langlebigen Seiten fairer zu sein
Wir (das Team der Chrome-Geschwindigkeitsmetriken) haben kürzlich unsere erste Forschung zu Optionen, um den CLS-Messwert fairer für Seiten zu gestalten, die lange geöffnet sind Wir haben viele sehr hilfreiches Feedback geben. Nach Abschluss der umfassenden Analyse haben wir die geplante Änderung des Messwerts: maximales Sitzungsfenster mit einer Sekunde die auf 5 Sekunden begrenzt ist.
Lesen Sie weiter, um die Details zu erfahren.
Wie haben wir die Optionen bewertet?
Wir haben das gesamte Feedback der Entwickler-Community geprüft und berücksichtigt werden.
Außerdem haben wir die wichtigsten Optionen in Chrome und eine umfangreiche Analyse der Messwerte von Millionen von Webseiten durchgeführt. Mi. welche Arten von Websites sich mit den einzelnen Optionen verbessert haben, insbesondere die Websites, die von unterschiedlichen Optionen. Insgesamt haben wir Folgendes herausgefunden:
- Alle Optionen reduzierten den Zusammenhang zwischen der Verweildauer auf der Seite und Layout Shift-Wert.
- Keine der Optionen führte zu einer schlechteren Bewertung für jede Seite. Es gibt also keine Sie befürchten, dass sich die Werte für Ihre Website durch diese Änderung verschlechtern.
Entscheidungspunkte
Warum ein Sitzungsfenster?
In unserem früheren Beitrag haben wir einige unterschiedliche Windowing- Strategien zum Gruppieren von Layout Shifts und um sicherzustellen, dass die Punktzahl nicht zunimmt unbegrenzt. Das Feedback, das wir von Entwicklern erhalten haben, war vor allem für die Sitzungsfensterstrategie, da sie die Layout Shifts am stärksten intuitiv.
Hier ein Beispiel zum Überprüfen der Sitzungsfenster:
<ph type="x-smartling-placeholder">Im obigen Beispiel treten viele Layout Shifts im Laufe der Zeit auf, wenn die Nutzenden die Seite. Jedes Feld wird durch einen blauen Balken dargestellt. Oben sehen Sie, dass die blauen Balken unterschiedliche Höhen haben, Diese stehen für den score von für jeden einzelnen Layout Shift. Ein Sitzungsfenster beginnt mit dem ersten Layout Shift und wird so lange erweitert, bis eine Lücke ohne Layoutverschiebungen entsteht. Wenn die nächste Layout Shifts erfolgt, wird ein neues Sitzungsfenster geöffnet. Da es drei Lücken gibt, keine Layout Shifts vorhanden sind, gibt es im Beispiel drei Sitzungsfenster. Ähnlich wie die Definition der CLS gesprochen, werden die Werte jeder Verschiebung addiert, ist die Punktzahl des Fensters die Summe der einzelnen Layout Shifts.
Basierend auf den ursprünglichen Studien, wählten wir eine Lücke von 1 Sekunde zwischen den Sitzungsfenstern. Diese Lücke hat in unserem umfangreiche Analyse durchführen. Die „Sitzungslücke“ wie im obigen Beispiel 1 2.
Warum das maximale Sitzungsfenster?
Wir haben die Zusammenfassung von Strategien bis hin zu zwei Optionen aus unserer ersten Studie:
- Der durchschnittliche Wert aller Sitzungsfenster bei sehr großen Sitzungen Fenster (unbegrenzte Fenster mit einer Lücke von 5 Sekunden dazwischen).
- Der maximale Wert aller Sitzungsfenster für kleinere Sitzungsfenster (begrenzt auf 5 Sekunden, mit einer Lücke von 1 Sekunde dazwischen).
Nach den ersten Recherchen haben wir alle Messwerte zu Chrome hinzugefügt, um eine und umfangreiche Analysen von Millionen URLs durchführen. Bei der umfassenden Analyse viele URLs mit Layout Shift-Mustern wie diesem gefunden:
Unten rechts sehen Sie, dass es nur eine kleine Sitzungsfenster 2. Es ist daher sehr niedrig. Das bedeutet, dass die durchschnittliche ist ziemlich niedrig. Aber was ist, wenn der Entwickler diese winzigen Layoutverschiebungen behebt? Dann wird nur im Sitzungsfenster 1 berechnet, das heißt, naht sich verdoppelt. Das wäre für Entwickler sehr verwirrend und abschreckend. um ihre Layout Shifts zu verbessern, nur um festzustellen, dass sich die Punktzahl verschlechterte. Und diese kleine Layoutverschiebung zu entfernen, ist für die Nutzenden Daher sollte sich das Ergebnis nicht verschlechtern.
Aufgrund dieses Problems mit den Durchschnitten haben wir beschlossen, kleineren, begrenzten, maximalen Fenstern. Im obigen Beispiel ist also Sitzungsfenster 2 ignoriert werden und nur die Summe der Layout Shifts in Sitzungsfenster 1 gemeldet werden.
Warum 5 Sekunden?
Wir haben mehrere Fenstergrößen ausgewertet und zwei Dinge festgestellt:
- Bei kurzen Fenstern, langsamerem Seitenaufbau und langsameren Reaktionen auf Nutzerinteraktionen Layout Shifts in mehrere Fenster aufteilen und die Bewertung verbessern Mi. wollte das Fenster groß genug halten, damit es keine Verlangsamungen belohnen!
- Es gibt einige Seiten mit einem fortlaufenden Strom kleiner Layoutverschiebungen. Für Beispiel für eine Seite mit Sportergebnissen, die sich mit jeder Aktualisierung des Spielstands ein wenig verschiebt. Diese Schichten sind ärgerlich, werden aber mit der Zeit nicht lästiger. Also haben wir wollte sicherstellen, dass das Fenster für diese Arten von Layout Shifts begrenzt wurde.
Wenn Sie diese beiden Dinge im Hinterkopf behalten, sollten Sie verschiedene Fenstergrößen realen Webseiten gezeigt werden, kamen wir zu dem Schluss, dass 5 Sekunden eine gute Beschränkung Fenstergröße.
Wie wirkt sich das auf den CLS-Wert meiner Seite aus?
Da durch dieses Update der CLS-Wert einer Seite begrenzt wird, hat keine Seite eine schlechtere Bewertung. als Folge dieser Änderung.
Unsere Analyse hat ergeben, dass bei 55% der Ursprünge keine Änderung des CLS zu erkennen ist. am 75. Perzentil. Dies liegt daran, dass ihre Seiten oder die vorhandenen Shifts bereits auf eine bestimmte für ein einzelnes Sitzungsfenster.
Für die übrigen Ursprünge werden beim 75. Perzentil verbesserte Werte Bei den meisten wird nur eine leichte Verbesserung erkannt, bei etwa 3 % ihre Quoten sich aufgrund eines „Verbesserungsbedarfs“ verbessern. oder „schlecht“ Bewertung auf ein „gutes“ Bewertung. Diese Seiten verwenden in der Regel unendliches Scrollen oder haben viele langsamen UI-Updates, wie in der früheren Übersicht zu Blogpost.
Wie kann ich es ausprobieren?
Wir werden unsere Tools bald auf die neue Messwertdefinition aktualisieren. Bis dahin können Sie die aktualisierte Version von CLS auf jeder Website ausprobieren. Verwenden Sie dazu die Beispiel- JavaScript Implementierungen oder die Abspaltung der Web Vitals Erweiterung.
Vielen Dank an alle, die sich die Zeit genommen haben, den vorherigen Beitrag zu lesen Feedback!