Od dzisiaj zmiana wartości CLS została wprowadzona w wielu narzędziach internetowych Chrome, takich jak Lighthouse, PageSpeed Insights i Raport na temat użytkowania Chrome.
Dziś chcemy wspomnieć, jak rozwijamy pomiary danych skumulowanego przesunięcia układu (CLS) w różnych narzędziach internetowych Chrome. Dla deweloperów zmiany te będą lepiej odzwierciedlać wygodę użytkowników w przypadku długotrwałych stron (np. aplikacji z nieskończonym przewijaniem lub aplikacji jednostronicowych). Te aktualizacje CLS zostaną wdrożone w narzędziach takich jak Lighthouse, PageSpeed Insights i Raport na temat użytkowania Chrome.
Wszyscy chcieliśmy widzieć mniej zmian układu stron w internecie. W tej sytuacji wskaźnik CLS okazał się przydatny w mierzeniu stabilności wizualnej strony internetowej. Pomaga zachęcać witryny do lepszego ustawiania wymiarów dla treści, np. obrazów lub reklam, co może sprawić, że użytkownicy będą zaskakującymi skokami jakości treści.
Dane te nazywamy „skumulowanymi”, ponieważ wynik każdej z pojedynczych przesunięć jest sumowany w całym okresie aktywności strony. Choć wszystkie przesunięcia układu w internecie wpływają negatywnie na wrażenia użytkowników, strony, których używają długotrwałe, takie jak aplikacje jednostronicowe (SPA) lub aplikacje z nieskończonym przewijaniem, w naturalny sposób z czasem gromadzą więcej CLS. Ograniczając agregację do najgorszego „okresu” przesunięcia, można teraz bardziej spójnie mierzyć CLS niezależnie od czasu trwania sesji.
Jak zapowiedzieliśmy w sekcji Ewolucja danych CLS, dostosowujemy dane CLS do maksymalnego okna sesji z 1-sekundową luką i ograniczeniem do 5 sekund. Ta aktualizacja lepiej odzwierciedla wrażenia użytkowników dotyczące stron o długiej historii. Po wprowadzeniu tej zmiany 70% źródeł nie powinno się spodziewać żadnej zmiany CLS po 75 centylu, a w pozostałych 30% będzie to poprawa.
Wdrażanie dostosowania okresu do CLS
Mówiliśmy o zaktualizowanej definicji CLS, która określa maksymalny okres sesji z 1-sekundową luką i ograniczeniem do 5 sekund. Co to oznacza dla narzędzi?
Od dzisiaj ta zmiana CLS została wprowadzona w wielu narzędziach internetowych Chrome, takich jak Lighthouse, PageSpeed Insights i Raport na temat użytkowania Chrome. Poniżej znajdziesz podsumowanie wdrażania korekty okna CLS oraz narzędzia, które nadal umożliwiają porównanie z pierwotną implementacją.
| Narzędzie | Dostosowanie okna CLS „aktywne” | „Stara” dostępność CLS |
|---|---|---|
| Panel Narzędzi deweloperskich w Lighthouse | Canary channel, 2 czerwca 2021 r. | Nie dotyczy |
| Interfejs wiersza poleceń Lighthouse | wersja 8, opublikowana 1 czerwca 2021 r. | Dostępne jako totalCumulativeUkładShift w Lighthouse w wersji 8 |
| Lighthouse CI | Wersja 0.7.3, 3 czerwca 2021 r. | Nie dotyczy |
| PageSpeed Insights (PSI) | 1 czerwca 2021 r. | Nie dotyczy |
| PSI API | 1 czerwca 2021 r. | Dostępne w lighthouseResult jako totalCumulativeLayoutShift. Niedostępne w polu danych loadingExperience |
| Raport na temat użytkowania Chrome (CrUX) – BigQuery | Zbiór danych „202105”, opublikowany 8 czerwca 2021 r. | Dostępne w systemie experimental.uncapped_cumulative_layout_shift do 202111 r. |
| Raport na temat użytkowania Chrome (CrUX) – interfejs API | 1 czerwca 2021 r. | Po 1 czerwca 2021 r. jako experimental_uncapped_cumulative_layout_shift14 grudnia 2021 r. |
Wkrótce zaktualizujemy też Narzędzia deweloperskie w Chrome, aby umożliwić dostosowanie okna. Aktualizacja CLS została też wprowadzona w Search Console i będzie obowiązywać od 1 czerwca 2021 r.
W przypadku większości deweloperów ta zmiana powinna zostać przeprowadzona bezproblemowo i nie trzeba podejmować żadnych działań, aby korzystać z danych po wprowadzeniu poprawki.
„Stare” CLS
Przypominamy, że „stary” wskaźnik CLS mierzy przesunięcie układu w całym okresie życia strony. Niektórzy deweloperzy mogą chcieć śledzić starszą definicję CLS wraz z korektami okresowymi. Mamy dobrą wiadomość: ujawniamy „stary CLS” w narzędziach Lighthouse i CrUX.
W Lighthouse w wersji 8 jest dostępny w formacie JSON jako audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Znajdziesz ją jako
experimental_uncapped_cumulative_layout_shift
w interfejsie CrUX API
i jako experimental.uncapped_cumulative_layout_shift w CrUX BigQuery.
Po 1 czerwca żądania do interfejsu CrUX API będą zwracać dane „stary CLS”:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Po 8 czerwca ten BigQuery BigQuery porówna starą i nową wartość CLS:
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
Będą one dostępne przez maksymalnie 6 miesięcy. „Stara wersja CLS” zostanie wycofana 14 grudnia 2021 r.
Aktualizowanie wagi CLS w Lighthouse
Gdy CLS został po raz pierwszy wprowadzony w Lighthouse, był to zupełnie nowy, błyskotliwy wskaźnik. Aby deweloperzy mieli czas na testy, porównania i optymalizację w ramach optymalizacji, przy obliczaniu wyniku skuteczności waga CLS nie była brana pod uwagę.
Teraz, gdy już skorzystano z pomocy programistów, wynik Lighthouse zwiększył wagę CLS z 5% do 15%, zgodnie z metodologią, zgodnie z którą Podstawowe wskaźniki internetowe są najbardziej ważonymi danymi w wyniku Lighthouse.
Zaktualizowane wagi wskaźników znajdziesz w Lighthouse w wersji 8 w kalkulatorze punktów.
Implementacja CLS w Lighthouse 8.0 obejmuje zarówno okienko, jak i wpływ CLS z ramek podrzędnych. Przed wersją 8.0 wskaźnik CLS w Lighthouse nie uwzględniał CLS ramek podrzędnych przy obliczaniu danych, ale już tak. Dla pewności – pole CLS mierzone przez CrUX również obsługuje okna i ramki podrzędne w podobny sposób.
Jednak główna różnica między CLS modułu a poziomem pola CLS jest taka, że okres obserwacji tego modułu kończy się w chwili pełnego wczytania zgodnie z warunkami modułu. Z kolei w polu okres obserwacji obejmuje cały czas życia strony, w tym aktywność po wczytaniu. Pamiętaj jednak, że korekta przedziału czasu znacząco pomniejsza tę różnicę.
Samodzielne pomiary w terenie
Jeśli chcesz mierzyć najnowszą implementację CLS, możesz też zarejestrować ją dla danych pól za pomocą RUM przy użyciu tego fragmentu kodu PerformanceObserver.
Możesz też skorzystać bezpośrednio z biblioteki JavaScriptu wskaźników internetowych, która również została zaktualizowana w związku z tą zmianą.
Dodatkowe informacje
Oprócz aktualizacji skumulowanego przesunięcia układu wprowadziliśmy też w narzędziach internetowych te zmiany związane z danymi:
- Aktualizujemy do najnowszej definicji wskaźnika największego wyrenderowania treści. 1 czerwca 2021 r. zaktualizujemy interfejsy CrUX API, PSI, PSI API i Search Console. Raport CrUX BigQuery zostanie zaktualizowany 8 czerwca 2021 r.
- W raportach CrUX progi tribiningu w pierwszej treści Contentful Paint zostały zmienione na: Dobre: [0–1, 8 s], Wymagana poprawa: (1,8 s–3 s), Słabe: [3s–∞]
Podsumowanie
Spodziewamy się, że ta zmiana odzwierciedli płynne przejście w przypadku większości witryn, dlatego zachęcamy do sprawdzania Wskaźników internetowych i Optymalizacji CLS, w których znajdziesz wskazówki i wskazówki dotyczące mierzenia i optymalizowania przesunięć układu. Jeśli chcesz przekazać opinie na temat danych i naszych forów poświęconych narzędziom do Lighthouse, a także Raportu na temat użytkowania Chrome na temat problemów z narzędziami, skontaktuj się z nami za pośrednictwem grupy Web-vitals-feedback. Pozdrawiamy!
Dziękujemy Johannesowi Henkelowi, Rickowi Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose i Paul Ireland za ich opinię.
Baner powitalny: Barn Images / @barnimages w filmie Unsplash