Cumulative Layout Shift in Webtools

Ab heute wurde eine Änderung an CLS für verschiedene Oberflächen von Chrome-Webtools eingeführt, darunter Lighthouse, PageSpeed Insights und den Bericht zur Nutzererfahrung in Chrome.

Addy Osmani

Elizabeth Sweeny

Heute möchten wir euch zeigen, wie wir die Messung des Cumulative Layout Shift (CLS)-Messwerts auf einer Reihe von Chrome-Webtools weiterentwickeln. Für Entwickler spiegeln diese Änderungen die Nutzerfreundlichkeit von langlebigen Seiten besser wider, z. B. Seiten mit unendlichem Scrollen oder nur einseitigen Seiten. Diese CLS-Updates werden für Tools wie Lighthouse, PageSpeed Insights und den UX-Bericht für Chrome eingeführt.

Wir alle hätten gerne weniger Layoutverschiebungen im Web. Hier hat sich der CLS-Messwert als nützlich erwiesen, um die visuelle Stabilität einer Webseite zu messen. Websites können dann bessere Abmessungen für Inhalte wie Bilder oder Anzeigen festlegen, was zu unerwarteten Sprüngen bei den Nutzern führen kann.

Der Messwert wird als „kumuliert“ bezeichnet, da der Wert für jede einzelne Änderung während der Lebensdauer einer Seite summiert wird. Während alle Layoutverschiebungen im Web die Nutzerfreundlichkeit beeinträchtigen, sammeln sich bei langlebigen Seiten wie Single-Page-Apps (SPAs) oder Apps mit unendlichem Scrollen von Natur aus im Laufe der Zeit mehr CLS an. Da die Aggregation auf das schlechteste „Fenster“ der Schichten begrenzt wird, kann der CLS-Wert jetzt unabhängig von der Sitzungsdauer konsistenter gemessen werden.

Wie im Rahmen des CLS-Messwerts Entwicklung des CLS-Messwerts angekündigt, wird der CLS-Messwert auf ein maximales Sitzungsfenster mit einer Pause von 1 Sekunde eingestellt, das auf 5 Sekunden begrenzt ist. Dieses Update spiegelt die Nutzererfahrung für langlebige Seiten besser wider. Nach dieser Änderung ist bei 70% der Ursprünge für das 75. Perzentil keine CLS-Änderung zu erwarten. Für die verbleibenden 30% der Ursprünge ergibt sich eine Verbesserung.

Einführung der Windowing-Anpassung für CLS

Wir haben darüber gesprochen, dass die aktualisierte CLS-Definition ein maximales Sitzungsfenster mit einer Lücke von 1 Sekunde ist, das auf 5 Sekunden begrenzt ist. Was bedeutet das für Tools?

Diese CLS-Änderung wurde ab heute für eine Reihe von Chrome-Webtools eingeführt, darunter Lighthouse, PageSpeed Insights und den UX-Bericht von Chrome. Unten sehen Sie eine Zusammenfassung der Einführung der CLS-Windowing-Anpassung sowie die Tools, die weiterhin die Möglichkeit bieten, ein Benchmarking mit der ursprünglichen Implementierung durchzuführen.

Die Chrome-Entwicklertools werden ebenfalls aktualisiert, damit die Windowing-Anpassung in Kürze unterstützt wird. Die CLS-Aktualisierung wurde auch für die Search Console vorgenommen und gilt ab dem 1. Juni 2021.

Für die meisten Entwickler ist davon auszugehen, dass diese Änderung reibungslos abläuft und keine Maßnahmen erforderlich sind, um die Daten aus der Korrektur zu nutzen.

CLS „Alt“

Zur Erinnerung: Mit dem „alten“ CLS werden Layoutverschiebungen über die gesamte Lebensdauer der Seite erfasst. Da einige Entwickler möglicherweise die ältere Definition von CLS parallel zur Windowing-Anpassung beobachten möchten, haben wir gute Neuigkeiten: Wir veröffentlichen den „alten CLS“ in Lighthouse und CrUX.

In Lighthouse v8 ist sie im JSON-Format als audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift verfügbar.

Sie finden sie in der CrUX API als experimental_uncapped_cumulative_layout_shift und in BigQuery als experimental.uncapped_cumulative_layout_shift.

Nach dem 1. Juni wird bei CrUX API-Anfragen der „alte CLS“-Messwert zurückgegeben:

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

Nach dem 8. Juni werden mit der folgenden CrUX BigQuery die alten und neuen CLS verglichen:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

Sie können sich weiterhin darauf verlassen, dass diese Daten für einen Zeitraum von bis zu 6 Monaten verfügbar sind, wobei „alte CLS“ am 14. Dezember 2021 eingestellt wird.

CLS-Gewichtung in Lighthouse aktualisieren

Bei der Einführung von CLS in Lighthouse war dies ein brandneuer Messwert. Um Entwicklern Zeit für Tests, Benchmarks und Optimierungen zu geben, wurde CLS bei der Leistungsbewertung weniger stark gewichtet.

Nachdem sich die Entwickler einige Zeit in die Hand genommen hatten, konnte der Lighthouse-Wert die Gewichtung von CLS von 5% auf 15 % erhöhen. Dies entspricht der Methodik, bei der Core Web Vitals die am stärksten gewichteten Messwerte im Lighthouse-Wert sind.

Die aktualisierte Gewichtung von Messwerten in Lighthouse Version 8 finden Sie im Scoring-Rechner.

Die CLS-Implementierung von Lighthouse 8.0 umfasst sowohl den Windowing- als auch den CLS-Beitrag von Subframes. Vor 8.0 hat CLS in Lighthouse keine CLS von Subframes in die Messwertberechnung einbezogen, jetzt aber schon. Nur zur Bestätigung: Das von CrUX gemessene Feld CLS behandelt Windowing und Subframes ähnlich.

Der Hauptunterschied zwischen Lab- und Feld-CLS besteht jedoch darin, dass das Beobachtungsfenster der Lab-CLS gemäß den Laborbedingungen „vollständig geladen“ endet, während sich das Beobachtungsfenster auf die gesamte Seitenlebensdauer erstreckt, einschließlich der Aktivität nach dem Laden. Allerdings wird dieser Unterschied durch die Windowing-Anpassung erheblich abgeschwächt.

Selbst im Außendienst messen

Wenn Sie die neueste CLS-Implementierung messen möchten, können Sie dies auch mit dem folgenden PerformanceObserver-Snippet für Ihre Felddaten über RUM aufzeichnen.

Alternativ kannst du auch die Web Vitals-JavaScript-Bibliothek nutzen, die ebenfalls mit dieser Änderung aktualisiert wurde.

Weitere Updates

Abgesehen von den Aktualisierungen von Cumulative Layout Shift wurden die folgenden messwertbezogenen Aktualisierungen an unseren Webtools vorgenommen:

• Wir aktualisieren auf die neueste Definition des Messwerts „Largest Contentful Paint“. CrUX API, PSI, PSI API und Search Console werden am 1. Juni 2021 aktualisiert. CrUX BigQuery wird am 8. Juni 2021 aktualisiert.
• Für die Nutzererfahrung in Chrome wurden die Tri-Binning-Grenzwerte für First Contentful Paint aktualisiert: Gut: [0–1, 8 Sek.], Verbesserungsbedarf: (1,8 Sek.–3 Sek.), Schlecht: [3 Sek.–∞]

Ergebnisse

Wir gehen davon aus, dass sich durch diese Änderung für die meisten Websites eine reibungslose Umstellung widerspiegelt. In den Web Vitals und CLS optimieren finden Sie Tipps und Tricks, wie Sie Layoutverschiebungen messen und optimieren können. Wie immer können Sie sich an die Gruppe „web-vitals-feedback“ wenden, um Feedback zu den Messwerten zu erhalten, und unsere Tool-spezifischen Feedbackforen für Lighthouse und den UX-Bericht für Chrome bei Problemen mit Tools. Vielen Dank und bis bald!

Vielen Dank an Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose und Paul Irish für ihr Feedback.

Hero-Image von Barn Images / @barnimages auf Unsplash