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