# CLS

*Cumulative Layout Shift*

CLS punktuje to, jak bardzo strona skacze w trakcie ładowania, w skali bez jednostki, gdzie 0,1 lub mniej to dobry wynik. Liczy się każdy element, który przesuwa się bez udziału odwiedzającego, ważony odległością i zajmowaną częścią ekranu.

**Canonical:** https://spoko.space/pl/slownik/cls/  
**Language:** pl  
**Kategoria:** Wydajność  
**Inaczej:** skumulowane przesunięcie układu, stabilność wizualna  
**Published:** 2026-09-22  
**Słownik pojęć:** https://spoko.space/pl/slownik/

---
## Co to jest {#co-to-jest}

Zaczynasz czytać. Nad akapitem doczytuje się obrazek, tekst zjeżdża w dół i zdanie, na którym byłeś, jest gdzie indziej. Zrób tak cztery razy, a strona sprawia wrażenie zepsutej, choć nic się nie zepsuło.

CLS sumuje każdy taki ruch. Liczy tylko przesunięcia, których odwiedzający nie wywołał: rozwinięcie akordeonu przesuwa stronę i się nie liczy, baner wstrzykujący się po dwóch sekundach — owszem.

## Dlaczego to twój problem, jeśli zamawiasz stronę {#dlaczego-to-twój-problem-jeśli-zamawiasz-stronę}

Kosztem nie jest wynik, tylko chybione kliknięcie. Przycisk przesuwa się o 40 pikseli w momencie między decyzją a dotknięciem, a odwiedzający trafia w to, co zajęło jego miejsce. Na stronie zamówienia to stracone zamówienie, na formularzu kontaktowym — telefon, który nie zadzwonił.

## Co to naprawdę powoduje {#co-to-naprawdę-powoduje}

Cztery rzeczy, w kolejności, w jakiej je znajduję.

**Obrazki bez wymiarów.** Przeglądarka, która nie zna kształtu obrazka, nie rezerwuje na niego miejsca, a potem musi je zrobić, gdy obrazek przyjdzie. Podaj `width` i `height` albo pozwól frameworkowi odczytać je z pliku.

**Fonty z sieci.** Strona rysuje się fontem zapasowym i przelewa się, gdy przyjdzie właściwy — a im dłuższy tekst, tym dalej wędruje wszystko pod nim.

**Wstrzykiwana treść.** Banery cookies, paski promocyjne, zachęty do zapisu. Cokolwiek dołożonego na górze dokumentu po pierwszym rysowaniu spycha całą stronę w dół.

**Reklamy i osadzone elementy**, które ustalają swój rozmiar po załadowaniu.

Do tej listy pasuje jedna decyzja z tej strony. Baner zgody na cookies jest pływającą kartą nad treścią, a nie paskiem spychającym stronę w dół — więc niczego nie przesuwa i nie dokłada nic do CLS. Jest też powodem, dla którego strona świadomie nie spełnia jednego kryterium dostępności, bo pływająca karta potrafi zasłonić element z fokusem klawiatury. Dwa wskaźniki, jeden baner, przeciwne kierunki: tak wygląda prawdziwy kompromis, a obie jego połowy są spisane, nie po cichu wybrane.

## Czym CLS nie jest {#czym-cls-nie-jest}

Nie dotyczy przewijania i nie naprawia się go przyspieszaniem strony. Wolna strona z zarezerwowanym miejscem na wszystko ma zero; szybka strona, która doczytuje baner, nie ma.

## Powiązane pojęcia {#related-terms}

- [Core Web Vitals](https://spoko.space/pl/slownik/core-web-vitals/): Core Web Vitals to trzy wskaźniki, które Google zbiera z prawdziwych wizyt w Chrome: LCP dla ładowania, INP dla reakcji na kliknięcie i CLS dla stabilności układu. Adres zalicza je, gdy 75% wizyt mieści się w progu „dobrze”. — Markdown: https://spoko.space/pl/slownik/core-web-vitals.md
- [WCAG](https://spoko.space/pl/slownik/wcag/): WCAG to standard W3C opisujący, jak zrobić stronę używalną dla osób z niepełnosprawnościami. Ma trzy poziomy zgodności — A, AA i AAA — a tym, którego realnie żądają przepisy, przetargi i umowy z dużymi firmami, jest AA. — Markdown: https://spoko.space/pl/slownik/wcag.md
- [CDN](https://spoko.space/pl/slownik/cdn/): CDN to sieć serwerów rozsianych po świecie, które trzymają kopie twojej strony i odpowiadają odwiedzającemu z najbliższego punktu. Usuwa dystans między odwiedzającym a serwerem źródłowym — i tylko to. — Markdown: https://spoko.space/pl/slownik/cdn.md
- [INP](https://spoko.space/pl/slownik/inp/): INP mierzy, ile czasu mija od kliknięcia, dotknięcia albo naciśnięcia klawisza do chwili, gdy widać reakcję. Dobry wynik to 200 milisekund lub mniej. W marcu 2024 zastąpił FID i — inaczej niż tamten — patrzy na każdą interakcję, nie tylko pierwszą. — Markdown: https://spoko.space/pl/slownik/inp.md

## Gdzie o tym piszę {#related-posts}

- [Uper SEO Auditor](https://spoko.space/pl/uper-seo-auditor/) — Markdown: https://spoko.space/pl/uper-seo-auditor.md
  Plugin Chrome dla specjalistów SEO i deweloperów. Debugowanie Web Vitals, Schema.org, GTM i błędów JS w czasie rzeczywistym w Side Panelu przeglądarki.
- [Strona agencji SEO](https://spoko.space/pl/seo-agency-website/) — Markdown: https://spoko.space/pl/seo-agency-website.md
  Wizytówka dla freelancera SEO zajmującego się poprawą widoczności online i generowaniem ruchu organicznego dla firm.
- [Nowoczesna strona internetowa 2026 — trendy, nawigacja i inspiracje](https://spoko.space/pl/blog/nowoczesna-strona-internetowa-trendy/) — Markdown: https://spoko.space/pl/blog/nowoczesna-strona-internetowa-trendy.md
  Bento grid, dark mode, kinetyczna typografia, CSS scroll animations i ewolucja menu hamburger — praktyczny przegląd trendów web design 2026 z przykładami i listą inspiracji.

## Zobacz też {#see-also}

- [Migracja WordPress → Astro](https://spoko.space/pl/migracja-wordpress-astro/)
- [Audyt dostępności WCAG 2.2 AA](https://spoko.space/pl/dostepnosc-wcag/)

## Źródła {#sources}

- [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) — Jak liczony jest wynik, razem z udziałem odległości i powierzchni.
- [Optimize Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — Typowe przyczyny, każda z markupem, który jej zapobiega.