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

Od dzisiaj zmiana w CLS jest wprowadzana na wielu platformach narzędzi internetowych Chrome, m.in. w Lighthouse, PageSpeed Insights i Raporcie na temat użytkowania Chrome.

Addy Osmani
Addy Osmani
Elizabeth Sweeny
Elizabeth Sweeny

Dziś chcemy opowiedzieć o tym, jak rozwijamy pomiary Skumulowane przesunięcie układu (CLS) z wielu platform narzędzi internetowych Chrome. Z myślą o deweloperach te zmiany będą miały większą szansę na odzwierciedlenie strony długotrwałe (np. w aplikacjach z nieskończonym przewijaniem lub na jednej stronie). Aktualizacje CLS zostaną wprowadzone w narzędziach takich jak Lighthouse, PageSpeed Insights i Raport na temat użytkowania Chrome.

Wszyscy życzymy sobie, żebyśmy nie widzieli mniejszej liczby przesunięć układu w internecie. Dane CLS okazały się przydatne do pomiaru stabilności wizualnej strony internetowej. Pomaga zachęcić witryn do lepszego ustawiania wymiarów treści, takich jak obrazy lub reklamy, co może przyczyniać się do zaskakujących skoków treści.

Dane mają nazwę „łącznie” ponieważ wynik każdej indywidualnej zmiany jest sumowany dla całego cyklu życia strony. Choć wszystkie przesunięcia układu strony wpływają negatywnie na wygodę użytkowników, długotrwałe strony, takie jak aplikacje jednostronicowe czy aplikacje z nieskończonym przewijaniem, z czasem gromadzą coraz więcej CLS. Ograniczając agregację do najgorszego „okna” zmian, CLS można teraz bardziej spójnie mierzyć niezależnie od czasu trwania sesji.

Jak informowaliśmy na stronie Rozwijanie danych CLS, zmieniamy dane CLS na maksymalne okno sesji z 1-sekundową przerwą, do 5 sekund, ta aktualizacja lepiej odzwierciedla wygodę użytkowników korzystających z długich stron. Po wprowadzeniu tej zmiany 70% źródeł nie powinno się spodziewać zmian CLS na 75 centylu, a pozostałe 30% źródeł – poprawi się.

Wdrażanie korekty okien dla CLS

Mówiliśmy, że zaktualizowana definicja CLS jest związana z maksymalnym oknem sesji z 1-sekundową luką, jest ograniczony do 5 sekund. Co to oznacza dla narzędzi?

Od dziś ta zmiana w CLS została wprowadzona na wielu platformach narzędzi internetowych Chrome, Narzędzie Lighthouse, PageSpeed Insights i Raport na temat użytkowania Chrome. Poniżej znajdziesz podsumowanie wdrożenia korekty okien CLS. a także narzędzia, które nadal umożliwiają porównanie z pierwotną implementacją.

Narzędzie „Aktywna” korekta okien CLS „Stary” Dostępność CLS
Panel Narzędzi deweloperskich w Lighthouse kanał Canary, 2 czerwca 2021 r. Nie dotyczy
Interfejs wiersza poleceń Lighthouse Wersja 8, opublikowana 1 czerwca 2021 r. Dostępne jako totalCumulativeLayoutShift 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
Interfejs API PSI 1 czerwca 2021 r. Dostępny w: lighthouseResult jako totalCumulativeLayoutShift. Niedostępne w 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 r.
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 w Narzędziach deweloperskich w Chrome pojawi się też obsługa korekty okien. Zmiany w CLS wprowadziliśmy też w Search Console. Będą one obowiązywać od 1 czerwca 2021 r.

W przypadku większości programistów Ta zmiana powinna nastąpić płynnie i nie wymaga żadnych działań, aby wykorzystać dane z poprawki.

„Stary” CLS

Przypominamy, że „stary” CLS mierzy przesunięcie układu w całym okresie działania strony. Niektórzy deweloperzy mogą chcieć monitorować starszą definicję CLS razem z korektą dotyczącą przedziałów czasu, mamy dobrą wiadomość: prezentujemy „stary CLS” w Lighthouse i CrUX.

W Lighthouse w wersji 8 jest dostępny w formacie JSON jako audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift

Znajdziesz go jako experimental_uncapped_cumulative_layout_shift w interfejsie CrUX API oraz experimental.uncapped_cumulative_layout_shift w CrUX BigQuery.

Po 1 czerwca żądania do interfejsu CrUX API będą zwracać „stare listy CLS”. dane:

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

Po 8 czerwca: CrUX 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

Dane te będą nadal dostępne przez maksymalnie 6 miesięcy, ze „starą wartością CLS” zostanie wycofana 14 grudnia 2021 r.

Aktualizowanie ważenia CLS w Lighthouse

Po wprowadzeniu CLS w Lighthouse To zupełnie nowe, błyszczące dane. Aby zapewnić deweloperom czas na testy, porównania i pod kątem jej optymalizacji, CLS ma mniejsze znaczenie w wyniku wydajności.

Teraz, po jakimś czasie pracy programistów, wynik w Lighthouse zwiększył wagę CLS z 5% do 15%, zgodnie z metodologią korzystania z podstawowych wskaźników internetowych, mogą być najbardziej ważonymi danymi w wyniku Lighthouse.

Zaktualizowane ważenia danych w Lighthouse w wersji 8 znajdziesz w kalkulatora punktów.

Kalkulator punktowy Lighthouse

Implementacja CLS w Lighthouse w wersji 8.0 obejmuje zarówno okna, jak i wkład CLS z ramek podrzędnych. Przed wersją 8.0 CLS w Lighthouse nie zawierał ramek podrzędnych CLS jest uwzględniane w obliczaniu danych, ale teraz je uwzględnia. Dla potwierdzenia: CLS pola mierzone przez CrUX również obsługuje okna i ramki podrzędne w podobny sposób.

Jednak podstawową różnicą między CLS modułu a polem CLS jest to, że okno obserwacji CLS modułu kończy się w stanie „w pełni załadowanym” zgodnie z warunkami laboratoryjnymi, a w terenie okres obserwacji rozciąga się do całego czasu działania strony, w tym również przez czynności po jej wczytaniu. Jednak korekta okien znacznie niweluje tę różnicę.

Samodzielne pomiary w terenie

Jeśli chcesz zmierzyć najnowszą implementację CLS, możesz też zarejestrować to dla danych pól przez RUM, używając tego fragmentu kodu PerformanceObserver.

lub polegając bezpośrednio na bibliotekę JavaScriptu Web Vitals, , które również zostały objęte tą zmianą.

Dodatkowe informacje

Poza zmianami dotyczącymi skumulowanego przesunięcia układu w naszych narzędziach internetowych wprowadziliśmy też te zmiany:

  • Aktualizujemy na najnowszą definicję wartości wskaźnika największego wyrenderowania treści. CrUX API, PSI, PSI API, Search Console zostanie zaktualizowany 1 czerwca 2021 r. Narzędzie CrUX BigQuery zostanie zaktualizowane 8 czerwca 2021 r.
  • W raporcie CrUX progi trzykrotnego wyrenderowania treści zostały zmienione na: Dobra: [0–1,8 s], wymaga poprawy: (1,8 s–3 s), słaba: [3s-∞]

Podsumowanie

Spodziewamy się, że zmiana ta będzie odzwierciedlona w większości witryn, dlatego zachęcamy do wskaźniki internetowe oraz Optymalizacja CLS zawiera porady i wskazówki dotyczące mierzenia i optymalizowania odchylenia układu. Jeśli chcesz, zawsze możesz skontaktować się z grupa z opiniami o web-vitals-feedback , gdzie znajdziesz opinie na temat danych i narzędzi poszczególnych narzędzi Lighthouse Raport na temat użytkowania Chrome przy problemach z narzędziami. Pozdrawiamy,

Z podziękowaniem Johannesem Henkelem, Rickem Viscomim, Vivek Sekharem, Rachel Andrew, Milica Mihajlija, Jeff Jose i Paul Ireland za opinie.

Baner powitalny: Barn Images / @barnimages w Unsplash