Ewolucja skumulowanego przesunięcia układu w narzędziach internetowych

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.

Addy Osmani

Elizabeth Sweeny

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ą.

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