Przeskanuj stronę
AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ
Wydajność

Cumulative Layout Shift (CLS)

Opublikowano: · Aktualizacja:

Cumulative Layout Shift (CLS) mierzy stabilność wizualną strony: jak bardzo elementy przesuwają się w trakcie życia strony bez interakcji użytkownika. Każde nieoczekiwane przesunięcie dostaje wynik zależny od tego, jak duży fragment ekranu się poruszył i jak daleko; CLS to największa suma przesunięć w krótkim oknie czasowym.

Typowe objawy wysokiego CLS to „skaczący” tekst po doładowaniu banera, przyciski uciekające spod kursora czy reklamy wypychające treść. Dobry wynik to maksymalnie 0,1 na 75. percentylu realnych wizyt.

Najczęstsze przyczyny

  • Obrazy i iframy bez zadeklarowanych wymiarów (width/height lub aspect-ratio).
  • Reklamy, embedy i banery doładowywane nad istniejącą treścią.
  • Webfonty powodujące przeskok tekstu (FOIT/FOUT).
  • Treść wstrzykiwana dynamicznie przez JavaScript bez rezerwacji miejsca.

Jak poprawić CLS

Zawsze rezerwuj miejsce na media i treści dynamiczne, ładuj webfonty z font-display: optional lub swap i preloadem, a animacje wykonuj na transform zamiast właściwości wpływających na layout. Przesunięcia w ciągu 500 ms od interakcji użytkownika nie liczą się do CLS.

Przykład

Obraz bez wymiarów powoduje przeskok layoutu po załadowaniu. width, height lub aspect-ratio rezerwują miejsce z góry.

Powoduje CLS — brak wymiarów
HTML 
<img src="/baner-promo.jpg" alt="Promocja letnia">
Stabilny layout — zarezerwowane miejsce
HTML 
<img src="/baner-promo.jpg" alt="Promocja letnia"
     width="1200" height="400" style="aspect-ratio: 3 / 1;">

Źródła i dalsza lektura

Powiązane pojęcia

Core Web Vitals Zestaw trzech metryk Google (LCP, INP, CLS) mierzących szybkość ładowania, responsywność i stabilność wizualną strony w realnych warunkach.Largest Contentful Paint (LCP) Metryka Core Web Vitals mierząca czas od rozpoczęcia ładowania strony do wyrenderowania jej największego elementu treści. Dobry wynik to ≤ 2,5 s.Interaction to Next Paint (INP) Metryka Core Web Vitals mierząca opóźnienie między interakcją użytkownika (klik, dotknięcie, klawisz) a kolejnym odmalowaniem ekranu. Dobry wynik to ≤ 200 ms.
Wróć do słownika

Sprawdź wydajność swojej strony

Insight mierzy Core Web Vitals i porządkuje wąskie gardła według wpływu.

Przeskanuj stronę bezpłatnie Zobacz przykładowy raport
Bez karty kredytowej Raport z datą i źródłami Bez zakładania konta