Od dziś zmiana CLS została wdrożona w wielu narzędziach internetowych Chrome, w tym w Lighthouse, PageSpeed Insights i Raporcie na temat użytkowania Chrome.
Data publikacji: 2 czerwca 2021 r.
Dzisiaj chcemy poinformować, jak ulepszamy pomiar skumulowanego przesunięcia układu (CLS) w różnych narzędziach internetowych w Chrome. Te zmiany pozwolą deweloperom lepiej dostosować działanie starych stron (np. stron z nieskończonym przewijaniem lub aplikacji jednostronicowych) do potrzeb użytkowników. Te aktualizacje CLS będą wdrażane w narzędziach, takich jak Lighthouse, PageSpeed Insights i Raport na temat użytkowania Chrome.
Wszyscy chcielibyśmy, aby w internecie było mniej zmian układu. Właśnie w takich przypadkach wskaźnik CLS okazuje się przydatny do pomiaru stabilności wizualnej strony internetowej. Pomaga zachęcić witryny do lepszego ustawiania wymiarów treści, np. obrazów lub reklam, ponieważ może to powodować zaskakujące skoki treści.
Dane te nazywamy „skumulowanymi”, ponieważ wynik każdego przesunięcia jest sumowany w całym okresie działania strony. Choć wszystkie przesunięcia układu strony wpływają negatywnie na wygodę użytkowników, strony o długiej tradycji, takie jak aplikacje jednostronicowe (SPA) lub aplikacje z nieskończonym przewijaniem, z czasem gromadzą coraz więcej CLS. Dzięki ograniczeniu agregacji do najgorszego „okna” zmian CLS można teraz mierzyć bardziej spójnie niezależnie od czasu trwania sesji.
Jak informowaliśmy w sekcji Rozwijanie danych CLS, dopasowujemy dane CLS do maksymalnego okna sesji z 1-sekundową przerwą, ograniczoną do 5 sekund. Ta aktualizacja lepiej odzwierciedla wrażenia użytkowników korzystających z długotrwałych stron. Po wprowadzeniu tej zmiany 70% źródeł nie powinno zauważyć żadnych zmian w wartości CLS w 75. percentylu, a pozostałe 30% źródeł odnotuje poprawę.
Wdrażanie korekty okresu docelowego w CLS
Mówiliśmy, że zaktualizowana definicja CLS to maksymalne okno sesji z 1-sekundową luką, ograniczoną do 5 sekund. Co to oznacza dla narzędzi?
Od dziś ta zmiana w przypadku CLS została wdrożona w wielu narzędziach internetowych Chrome, takich jak Lighthouse, PageSpeed Insights i Raporty na temat użytkowania Chrome. Poniżej znajdziesz podsumowanie wdrożenia korekty okresowej CLS, a także narzędzia, które nadal umożliwiają porównanie wyników z pierwotną implementacją.
| Narzędzie | Korekta okna CLS „na żywo” | „Stara” dostępność CLS |
|---|---|---|
| Panel Narzędzi deweloperskich Lighthouse | kanał Canary, 2 czerwca 2021 r. | Nie dotyczy |
| Lighthouse CLI | Wersja 8, opublikowana 1 czerwca 2021 r. | Dostępny jako totalCumulativeLayoutShift w Lighthouse w wersji 8. |
| Lighthouse CI | v0.7.3, 3 czerwca 2021 r. | Nie dotyczy |
| narzędzie PageSpeed Insights (PSI) | 1 czerwca 2021 r. | Nie dotyczy |
| PSI API | 1 czerwca 2021 r. | Dostępny w: lighthouseResult jako totalCumulativeLayoutShift. Brak danych w polu loadingExperience |
| Raport na temat użytkowania Chrome (CrUX) – BigQuery | Zbiór danych z 202105 r., opublikowany 8 czerwca 2021 r. | Dostępne jako experimental.uncapped_cumulative_layout_shift do 202111 |
| Raport na temat użytkowania Chrome (CrUX) – interfejs API | 1 czerwca 2021 r. | Po 1 czerwca 2021 r. dostępne jako
experimental_uncapped_cumulative_layout_shift
14 grudnia 2021 r. |
Wkrótce zaktualizujemy też narzędzia deweloperskie w Chrome, aby obsługiwały one dostosowywanie okna. Zmiany w CLS zostały też wprowadzone w Search Console i będą widoczne od 1 czerwca 2021 r.
W przypadku większości deweloperów ta zmiana powinna nastąpić płynnie i nie trzeba podejmować żadnych działań, aby skorzystać z danych wprowadzonych w ramach poprawki.
„Stare” CLS
Przypominamy, że „stary” CLS mierzy przesunięcie układu w całym okresie działania strony. Niektórzy deweloperzy chcą śledzić starszą definicję CLS wraz z korektą okna, mamy więc dobrą wiadomość: ujawniamy „starą definicję CLS” w Lighthouse i CrUX.
W Lighthouse w wersji 8 jest on dostępny w pliku JSON jako audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Znajdziesz go jako
experimental_uncapped_cumulative_layout_shift
w interfejsie CrUX API i jako
experimental.uncapped_cumulative_layout_shift w BigQuery CrUX.
Po 1 czerwca żądania interfejsu CrUX API będą zwracać „starą” wartość CLS:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Po 8 czerwca te dane BigQuery w usłudze Crux będą porównywać stary i nowy 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
Dane te będą nadal dostępne przez maksymalnie 6 miesięcy. „Stare CLS” zostaną wycofane 14 grudnia 2021 r.
Aktualizowanie wagi CLS w Lighthouse
Gdy CLS został po raz pierwszy wprowadzony w Lighthouse, był zupełnie nowym rodzajem danych. Aby zapewnić deweloperom czas na testowanie, porównywanie i optymalizowanie pod kątem CLS, wynik ten został uwzględniony w wyniku skuteczności w mniejszym stopniu.
Teraz, gdy od jakiegoś czasu jest ono dostępne dla deweloperów, Lighthouse zwiększyło wagę CLS z 5% do 15%, zgodnie z metodologią, w której podstawowe wskaźniki internetowe mają najwyższą wagę w liczbie Lighthouse.
Zaktualizowane ważenia danych w Lighthouse w wersji 8 znajdziesz w kalkulatorze wyników.
Implementacja CLS w Lighthouse 8.0 obejmuje zarówno oknowanie, jak i wkład CLS z ramek podrzędnych. Przed wersją 8.0 CLS w Lighthouse nie uwzględniał CLS podramek w obliczeniach danych, ale teraz uwzględnia. Dla pewności: CLS w polu zmierzony przez CrUX również obsługuje okno i podramki w podobny sposób.
Główna różnica między CLS w laboratorium a w warunkach rzeczywistych polega na tym, że w laboratorium okno obserwacji kończy się na „pełnym załadowaniu” zgodnie z warunkami laboratoryjnymi, podczas gdy w warunkach rzeczywistych okno obserwacji obejmuje cały okres istnienia strony, w tym aktywność po załadowaniu. Jednak dostosowanie okresu obserwacji znacznie zmniejsza tę różnicę.
Pomiar na miejscu
Jeśli chcesz mierzyć najnowszą implementację CLS, możesz też rejestrować te dane w przypadku danych polowych za pomocą RUM, korzystając z tego fragmentu kodu PerformanceObserver.
Możesz też skorzystać bezpośrednio z biblioteki JavaScript Web Vitals, która została również zaktualizowana.
Dodatkowe informacje
Oprócz zmian w skumulowanym przesunięciu układu wprowadziliśmy też w naszych narzędziach internetowych te zmiany:
- Zmieniamy definicję największego wyrenderowania treści. Interfejsy API CrUX, PSI i PSI API oraz Search Console zostaną zaktualizowane 1 czerwca 2021 r. Aktualizacja BigQuery w ramach CrUX zostanie przeprowadzona 8 czerwca 2021 r.
- W raporcie CrUX progi potrójnego wyrenderowania treści First Contentful Paint zostały zmienione na: Dobrze: [0–1, 8 s], Wymagana poprawa: (1,8 s–3 s), Słabe: [3s-∞]
Podsumowanie
Spodziewamy się, że ta zmiana będzie płynna w przypadku większości witryn, dlatego zachęcamy do zapoznania się ze wskaźnikami internetowymi i zapisem Optimize CLS, w których znajdziesz porady i wskazówki dotyczące mierzenia i optymalizowania przesunięć układu. Jak zawsze możesz kontaktować się z grupą web-vitals-feedback, aby przekazywać opinie na temat danych i naszych narzędzi, a także z Lighthouse i Raport na temat użytkowania Chrome, aby przekazywać opinie na temat narzędzi. Pozdrawiamy,
Dziękujemy za opinie Johannesowi Henklowi, Rickowi Viscomi, Vivekowi Sekharowi, Rachel Andrew, Milicy Mihajlija, Jeffowi Jose i Paulowi Irishowi.
Baner powitalny autorstwa Barn Images / @barnimages na Unsplash