---
title: "CLS"
description: "CLS (Cumulative Layout Shift) to wskaźnik Core Web Vitals mierzący stabilność wizualną strony. Poznaj przyczyny przesunięć układu i sposoby ich eliminacji."
url: "https://nodea.pl/pl/slownik-pojec/cls"
lang: "pl"
updated: "2026-07-13"
---

# CLS

> CLS to wskaźnik Core Web Vitals mierzący, jak bardzo elementy strony niespodziewanie przesuwają się podczas ładowania, wpływając na komfort i stabilność wizualną.

**CLS** (ang. *Cumulative Layout Shift*, skumulowane przesunięcie układu) to wskaźnik należący do zestawu [Core Web Vitals](https://nodea.pl/pl/slownik-pojec/core-web-vitals), który mierzy stabilność wizualną strony podczas jej ładowania. CLS ocenia, jak bardzo elementy interfejsu niespodziewanie przeskakują, gdy przeglądarka doładowuje treści. Wysoki CLS oznacza frustrujące doświadczenie: użytkownik chce kliknąć przycisk, a ten w ostatniej chwili przesuwa się w inne miejsce.

## Jak działa pomiar CLS

Wskaźnik oblicza się jako iloczyn dwóch czynników: udziału widocznego ekranu, na którym doszło do przesunięcia, oraz odległości, o jaką elementy się przemieściły. Przesunięcia, które następują tuż po interakcji użytkownika (np. rozwinięcie menu), nie są liczone jako niepożądane. Sumowane są jedynie niespodziewane, samoistne zmiany układu w trakcie ładowania.

Głównymi winowajcami są elementy, dla których nie zarezerwowano miejsca. Obrazy bez atrybutów szerokości i wysokości, reklamy doładowywane asynchronicznie, banery cookie oraz czcionki wczytywane z opóźnieniem — wszystko to potrafi zepchnąć widoczną treść i podbić CLS. Nieumiejętnie wdrożone [lazy loading](https://nodea.pl/pl/slownik-pojec/lazy-loading) również bywa źródłem problemu.

## Zastosowanie w praktyce

Optymalizację CLS zaczyna się od pomiaru w narzędziach takich jak [PageSpeed Insights](https://nodea.pl/pl/slownik-pojec/pagespeed) czy Lighthouse, a następnie eliminuje najczęstsze przyczyny.

- **Rezerwuj wymiary** — zawsze podawaj szerokość i wysokość obrazów oraz kontenerów na reklamy.
- **Ładuj czcionki stabilnie** — stosuj *font-display* i wczytywanie z wyprzedzeniem, by uniknąć skoku tekstu.
- **Nie wstawiaj treści nad widoczną** — dynamiczne elementy dodawaj poniżej lub w zarezerwowanym miejscu.

CLS jest jednym z sygnałów rankingowych Google, dlatego jego poprawa przekłada się zarówno na lepszy odbiór strony przez użytkowników, jak i na potencjalnie wyższe pozycje. Razem z [LCP](https://nodea.pl/pl/slownik-pojec/lcp) i [INP](https://nodea.pl/pl/slownik-pojec/inp) tworzy pełny obraz jakości doświadczenia na stronie.

### Jaka wartość CLS jest dobra?

Google zaleca CLS na poziomie 0,1 lub niższym. Wartości między 0,1 a 0,25 wymagają poprawy, a powyżej 0,25 są uznawane za słabe i negatywnie wpływają na ocenę Core Web Vitals oraz odbiór strony.

### Co najczęściej powoduje wysoki CLS?

Najczęstsze przyczyny to obrazy i reklamy bez zarezerwowanego wymiaru, czcionki ładowane z opóźnieniem oraz treści wstawiane dynamicznie nad już widocznymi elementami, które spychają je w dół.

## Powiązane

- [Core Web Vitals](https://nodea.pl/pl/slownik-pojec/core-web-vitals)
- [LCP](https://nodea.pl/pl/slownik-pojec/lcp)
- [INP (Interaction to Next Paint)](https://nodea.pl/pl/slownik-pojec/inp)
- [PageSpeed](https://nodea.pl/pl/slownik-pojec/pagespeed)
- [Lazy loading](https://nodea.pl/pl/slownik-pojec/lazy-loading)

---

Wersje językowe: [en](https://nodea.io/en/glossary/cls.md)  
Spis treści witryny: [llms.txt](https://nodea.pl/pl/llms.txt)