Informacje o skumulowanym przesunięciu układu
Czym jest skumulowane przesunięcie układu?
Skumulowane przesunięcie układu mierzy, jak bardzo zmienia się układ strony podczas jej wczytywania. Za każdym razem, gdy widoczny element przeskakuje w nowe miejsce bez działania użytkownika, przesunięcie otrzymuje wynik, a wyniki te są sumowane.
Jest to wskaźnik, którego objaw jest najbardziej znany: sięgasz po link i klikasz coś innego, ponieważ reklama lub obraz załadowały się powyżej niego i przesunęły stronę w dół.
W przeciwieństwie do dwóch pozostałych wskaźników nie jest mierzony w czasie. Jest to współczynnik opisujący, jak duża część ekranu się przesunęła i na jaką odległość, dlatego wartości są niewielkie, a wynik 0,1 już oznacza zauważalne przesunięcie.
Jaki wynik CLS uznaje się za dobry?
Google uznaje wynik 0,1 lub niższy za dobry, wynik od 0,1 do 0,25 za wymagający poprawy, a każdy wynik powyżej 0,25 za słaby — przy 75. percentylu rzeczywistych wczytań stron.
Przesunięcia powodowane przez samego użytkownika nie są uwzględniane. Otwarcie akordeonu lub zamknięcie banera powoduje uzasadnione przesunięcie strony, a za usprawiedliwione uznaje się tylko przesunięcie następujące w ciągu pół sekundy od interakcji — jest to w przybliżeniu czas, w którym użytkownik przypisuje przesunięcie własnemu działaniu.
Zwykle jest to najłatwiejszy do osiągnięcia z tych trzech elementów. Podczas gdy poprawa LCP i INP wymaga optymalizacji wydajności, większość przesunięć układu można wyeliminować poprzez zarezerwowanie miejsca, co jest zmianą w znacznikach, a nie w architekturze.
Co zwykle powoduje przesunięcia układu
- Obrazy i filmy bez atrybutów szerokości i wysokości, przez co do czasu ich załadowania nie jest rezerwowane żadne miejsce.
- Reklamy i elementy osadzane wstawiane do kontenera, który nie miał określonych wymiarów.
- Czcionki internetowe przełączające się na inny rozmiar niż czcionka zastępcza i powodujące ponowne rozmieszczenie tekstu.
- Banery, komunikaty i paski plików cookie wstawiane nad istniejącą treścią.
- Treść wstawiana przez skrypt po wyrenderowaniu strony.
Wspólny schemat jest zawsze taki sam: coś pojawia się z opóźnieniem i zajmuje miejsce, którego wcześniej dla tego elementu nie zarezerwowano. Wszystko poniżej zostaje przesunięte w dół, a element, którego odwiedzający miał zamiar dotknąć, zmienia położenie.
Jak to poprawić
- Ustaw szerokość i wysokość każdego obrazu i filmu, aby przeglądarka mogła zarezerwować dla nich miejsce.
- Nadaj miejscom na reklamy i osadzonym elementom stały minimalny rozmiar, nawet gdy są puste.
- Wstępnie wczytuj kluczowe czcionki i dopasuj parametry czcionki zastępczej, aby ich zamiana nie powodowała ponownego układania strony.
- Umieszczaj banery i komunikaty poniżej istniejącej treści albo nakładaj je na nią zamiast przesuwać zawartość.
- Zarezerwuj miejsce na wszystko, co skrypt doda później.
- Sprawdź stronę na urządzeniach mobilnych, gdzie wąska kolumna sprawia, że niewielkie przesunięcie staje się dużym problemem.
Co sprawdza to narzędzie
Test CLS odczytuje dane terenowe Google dla strony — pomiary zebrane od rzeczywistych użytkowników przeglądarki Chrome — i pokazuje, jak wypada ona względem powyższych progów.
Jeśli nie wyświetla się żaden wynik, oznacza to, że strona ma zbyt mały ruch, aby Google mógł przedstawić raport. W międzyczasie jedynym wskaźnikiem, który można wiarygodnie sprawdzić ręcznie, jest przesunięcie układu: wczytaj stronę na telefonie, przy wolnym połączeniu, i obserwuj, co się przesuwa.
W przypadku pozostałych dwóch wskaźników lub wszystkich trzech naraz użyj narzędzia
Test Core Web Vitals.
Co dalej