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
Rezerwuj miejsce na media i treści dynamiczne. Przy fontach dopasuj metryki fallbacku (np. size-adjust i deskryptory metryk) i sprawdź zmianę łamania tekstu; swap z preloadem sam nie gwarantuje braku przesunięć. Animuj transform, jeśli pasuje do efektu. Wyjątek 500 ms dotyczy dyskretnego wejścia, np. kliknięcia lub klawisza, a nie przewijania, przeciągania czy pinch zoom.
Przykład
Obraz bez wymiarów powoduje przeskok layoutu po załadowaniu. width, height lub aspect-ratio rezerwują miejsce z góry.
<img src="/baner-promo.jpg" alt="Promocja letnia"><img src="/baner-promo.jpg" alt="Promocja letnia"
width="1200" height="400" style="aspect-ratio: 3 / 1;">0,1 lub mniej to wynik dobry, 0,1–0,25 wymaga poprawy, powyżej 0,25 jest słaby. Próg dotyczy 75. percentyla wczytań.
Od 2021 roku nie jest to suma wszystkich przesunięć na stronie, tylko wynik najgorszego okna sesji: ciągu przesunięć, w którym przerwa między kolejnymi nie przekracza sekundy, a całe okno nie przekracza pięciu sekund. Dzięki temu długa wizyta nie kumuluje wyniku w nieskończoność.
Obrazki i elementy iframe bez podanych wymiarów, reklamy i osadzenia bez zarezerwowanego miejsca, treść wstrzykiwana nad istniejącą oraz zamiana fontu zastępczego na docelowy o innych metrykach.
Przesunięcia w ciągu 500 ms od dyskretnego wejścia, np. kliknięcia, są wyłączone. Późniejsza odpowiedź asynchroniczna może już się liczyć. Przewijanie, przeciąganie i pinch zoom nie otrzymują tego wyjątku.
Źródła i dalsza lektura
- web.dev: Cumulative Layout Shift (CLS) dokumentacja
- MDN: Layout Instability API dokumentacja
- web.dev: Optymalizacja CLS dokumentacja