CLS: definicja, obliczenia i naprawa

CLS (Cumulative Layout Shift) mierzy, jak bardzo widoczne elementy strony przesuwaja sie nieoczekiwanie podczas jej ladowania. Kazde przesuniecie ukladu jest obliczane przez pomnozenie frakcji dotknietej powierzchni (proporcja widocznej strefy, na ktora to wplywa) przez frakcje przebytego dystansu (relatywna odleglosc przesuniecia). Wynik CLS to suma wszystkich tych przesuniec wystepujacych w 5-sekundowych oknach sesji. Oficjalne progi Google: dobry (zielony) ponizej 0,1, do poprawy (pomaranczowy) miedzy 0,1 a 0,25, zly (czerwony) powyzej 0,25. Konkretny przyklad: uzytkownik czyta artykul i naciska 'Dodaj do koszyka', ale w momencie klikniecia reklama wstawia sie ponad przyciskiem — jego klikniecie laduje na reklamie. To typowe layout shift. Czeste przyczyny obejmuja obrazy i wideo bez wyraznych wymiarow (width/height), reklamy, embedy lub iframe ladowane dynamicznie, czcionki powodujace FOUT (Flash of Unstyled Text) oraz elementy wstrzykiwane przez JavaScript ponad istniejacym contentem.

Wysoki wynik CLS generuje frustrujace doswiadczenie uzytkownika: przypadkowe klikniecia, utrata pozycji czytania, poczucie niestabilnosci strony. Ta frustracja przeklada sie bezposrednio na wyzsze wspolczynniki odrzucen i nizsze wspolczynniki konwersji. Google wlaczyl CLS do Core Web Vitals, poniewaz to jeden z najczesciej wymienianych przez uzytkownikow czynnikow porzucenia. Dobry CLS przyczynia sie rowniez do percepcji jakosci i profesjonalizmu witryny.

Aby naprawic CLS: zawsze definiuj wyrazne atrybuty `width` i `height` na obrazach i wideo, aby przegladarka rezerwowala miejsce przed ladowaniem. Uzywaj `min-height` dla stref reklam i embedow. Wstepnie ladowuj czcionki i uzywaj `font-display: swap`, aby uniknac przesuniec typograficznych. Unikaj wstawiania tresci ponad istniejaca widoczna trescia za pomoca JavaScript. Audytuj swoje layout shifts w zakladce Performance DevTools Chrome lub PageSpeed Insights.