Ab heute wird eine Änderung am CLS auf verschiedenen Chrome-Webtools eingeführt, darunter Lighthouse, PageSpeed Insights und der UX-Bericht für Chrome.
Heute möchten wir Ihnen zeigen, wie wir die Messung der Cumulative Layout Shift (CLS) auf verschiedenen Chrome-Oberflächen für Webtools. Für Entwickler spiegeln diese Änderungen die Nutzererfahrung langlebigen Seiten z. B. Apps mit unendlichem Scrollen oder Single-Page-Apps. Diese CLS-Updates werden für Tools wie Lighthouse, PageSpeed Insights und UX-Bericht für Chrome.
Wir alle hätten uns gerne weniger Layout Shifts im Web gewünscht. Hier hat sich der CLS-Messwert als nützlich erwiesen, um die visuelle Stabilität einer Webseite zu messen. Es ist hilfreich, Websites dazu anzuregen, die Größe des Inhalts, etwa Bilder oder Anzeigen, die bei den Nutzern zu überraschenden Sprüngen führen können.
Der Messwert heißt „kumuliert“. da der Wert jeder einzelnen Verschiebung während der Lebensdauer einer Seite addiert wird. Während alle Layoutverschiebungen im Web zu einer schlechten Nutzererfahrung führen, Langlebige Seiten wie Single-Page-Apps (SPAs) oder Anwendungen mit unendlichem Scrollen sammeln automatisch mehr CLS an. Durch Begrenzen der Aggregation auf das schlechteste „Fenster“ von Schichten, Der CLS lässt sich jetzt unabhängig von der Sitzungsdauer einheitlicher messen.
Wie wir im Abschnitt Änderung des CLS-Messwerts angekündigt haben, wird der CLS-Messwert nun auf einen maximales Sitzungsfenster mit einer Lücke von 1 Sekunde, begrenzt auf 5 Sekunden, Diese Aktualisierung spiegelt die Nutzererfahrung bei langlebigen Seiten besser wider. Mit dieser Änderung Bei 70% der Ursprünge sollte beim 75. Perzentil keine CLS-Änderung auftreten, und für die übrigen 30% der Ursprünge wird eine Verbesserung erkennbar.
Windowing-Anpassung an CLS einführen
Die aktualisierte CLS-Definition ist ein maximales Sitzungsfenster mit einer Lücke von 1 Sekunde, auf 5 Sekunden begrenzt. Was bedeutet das für Tools?
Ab heute Diese Änderung am CLS wurde auf mehreren Chrome-Oberflächen für Webtools eingeführt, darunter: Lighthouse, PageSpeed Insights und der UX-Bericht für Chrome. Unten sehen Sie eine Zusammenfassung des Rollouts von CLS-Windowing-Anpassungen. und mit welchen Tools Sie noch ein Benchmarking mit der ursprünglichen Implementierung durchführen können.
| Tool | CLS-Windowing-Anpassung „Live“ | "Alt" CLS-Verfügbarkeit |
|---|---|---|
| Bereich mit Lighthouse-Entwicklertools | Canary-Kanal, 2. Juni 2021 | – |
| <ph type="x-smartling-placeholder"></ph> Lighthouse-Befehlszeile | Version 8, veröffentlicht am 1. Juni 2021 | Als totalCumulativeLayoutShift in Lighthouse Version 8 verfügbar |
| Lighthouse CI | Version 0.7.3, 3. Juni 2021 | – |
| <ph type="x-smartling-placeholder"></ph> PageSpeed Insights (PSI) | 1. Juni 2021 | – |
| <ph type="x-smartling-placeholder"></ph> PSI API | 1. Juni 2021 | In der lighthouseResult als totalCumulativeLayoutShift erhältlich. Im Feld „loadingExperience“ nicht verfügbar |
| <ph type="x-smartling-placeholder"></ph> UX-Bericht für Chrome (CrUX) – BigQuery | Dataset 202105, veröffentlicht am 8. Juni 2021 | Verfügbar unter experimental.uncapped_cumulative_layout_shift bis 202111 |
| <ph type="x-smartling-placeholder"></ph> UX-Bericht für Chrome (CrUX) – API | 1. Juni 2021 | Ab dem 1. Juni 2021, verfügbar als
experimental_uncapped_cumulative_layout_shift
14. Dezember 2021 |
Auch die Chrome-Entwicklertools werden bald aktualisiert, damit sie die Windowing-Anpassung unterstützen. Die Aktualisierung des CLS wurde auch in der Search Console vorgenommen und ist ab dem 1. Juni 2021 wirksam.
Für die meisten Entwickler Diese Änderung erfolgt voraussichtlich nahtlos. Es sind keine Maßnahmen erforderlich, um die durch die Korrektur gewonnenen Daten zu nutzen.
"Alt" CLS
Zur Erinnerung: Das „alte“ CLS misst Layoutverschiebungen über die gesamte Lebensdauer der Seite. Da einige Entwickler möglicherweise neben der Windowing-Anpassung die ältere Definition von CLS beobachten möchten, haben wir gute Neuigkeiten: Wir stellen "alte CLS" in Lighthouse und CrUX.
In Lighthouse Version 8
ist sie im JSON-Format
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift
Sie finden ihn als
experimental_uncapped_cumulative_layout_shift
in der CrUX API und als
experimental.uncapped_cumulative_layout_shift in CrUX-BigQuery.
Nach dem 1. Juni wird bei CrUX API-Anfragen der „alte CLS“ zurückgegeben Messwert:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Nach dem 8. Juni werden die folgenden CrUX-BigQuery wird der alte und der neue 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 darauf verlassen, dass diese Daten für einen Zeitraum von bis zu 6 Monaten, mit „old CLS“ wird am 14. Dezember 2021 eingestellt.
CLS-Gewichtung in Lighthouse aktualisieren
Als CLS erstmals in Lighthouse eingeführt wurde, war es ein ganz neuer Messwert. Um sicherzustellen, dass Entwickler Zeit zum Testen hatten, sollten Sie und Optimierungen vornehmen, wurde der CLS bei der Leistungsbewertung weniger stark gewichtet.
Nachdem sie einige Zeit in den Händen der Entwickler hatten, der Lighthouse-Score die Gewichtung des CLS von 5% auf 15 % erhöht hat, Sie entspricht der Methodik für Core Web Vitals. der am stärksten gewichtete Messwerte im Lighthouse-Score.
Die aktualisierten Gewichtungen von Messwerten in Lighthouse Version 8 finden Sie in der Bewertungsrechner.
Die CLS-Implementierung von Lighthouse 8.0 umfasst sowohl Windowing als auch CLS-Beiträge aus Subframes. Vor Version 8.0 enthielten CLS in Lighthouse keine Subframes CLS in der Messwertberechnung berücksichtigt, jetzt aber schon. Nur zur Bestätigung: Das von CrUX gemessene Feld CLS verarbeitet Windowing und Subframes ähnlich.
Der Hauptunterschied zwischen Lab und Feld-CLS besteht dennoch darin, dass das Beobachtungsfenster des Lab-CLS mit „vollständig geladen“ endet. wie unter Laborbedingungen ermittelt, während sich das Beobachtungsfenster in der Praxis auf die gesamte Lebensdauer der Seite ausdehnt, einschließlich der Post-Load-Aktivität. Die Windowing-Anpassung verringert diesen Unterschied jedoch erheblich.
Selbst Messungen vor Ort durchführen
Wenn Sie die neueste CLS-Implementierung messen möchten, Sie können dies auch mit dem folgenden PerformanceObserver-Snippet für Ihre Felddaten über RUM erfassen.
Oder indem Sie sich direkt auf die Web Vitals-JavaScript-Bibliothek die ebenfalls mit dieser Änderung aktualisiert wurde.
Weitere Updates
Abgesehen von den Aktualisierungen von Cumulative Layout Shift die folgenden messwertbezogenen Aktualisierungen wurden auch an unseren Webtools vorgenommen:
- Wir aktualisieren auf die aktuelle Definition des Messwerts „Largest Contentful Paint“. Die CrUX API, PSI, PSI API und die Search Console werden am 1. Juni 2021 aktualisiert. CrUX-BigQuery wird am 8. Juni 2021 aktualisiert.
- In CrUX wurden die Tri-Binning-Grenzwerte für First Contentful Paint aktualisiert: Gut: [0–1,8 s], verbesserungswürdig: (1,8 s–3 s), Schlecht: [3 s–∞]
Ergebnisse
Wir gehen davon aus, dass die Umstellung für die meisten Websites reibungslos verläuft, und empfehlen Ihnen, sich die Informationen Web Vitals und CLS optimieren finden Sie Tipps und Tricks zum Messen und Optimieren von Layout Shifts. Wie immer können Sie sich Web Vitals-Feedbackgruppe Feedback zu den Messwerten und unsere speziellen Feedbackforen für Lighthouse und UX-Bericht für Chrome für Tool-Probleme. Viele Grüße
Wir danken 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