Jak poprawić CLS i zapobiegać przesunięciom układu
Dowiedz się, jak poprawić CLS, stabilizując obrazy, czcionki, osadzenia, reklamy i treści dynamiczne.
Jeśli tekst przesuwa się podczas czytania, przycisk nagle zmienia położenie albo obraz spycha resztę strony w dół, witryna ma problem ze stabilnością wizualną.
Te nieoczekiwane ruchy mierzy Cumulative Layout Shift (CLS), jeden z podstawowych wskaźników internetowych Google. Wynik 0,1 lub niższy jest dobry, a wynik powyżej 0,25 jest słaby.
Czym jest CLS?
CLS mierzy nieoczekiwane przesunięcia widocznych elementów podczas wizyty. Reklama może pojawić się nad linkiem dokładnie w chwili kliknięcia, a duży obraz może przesunąć artykuł po zakończeniu ładowania.
Wynik ocenia się na 75. percentylu wizyt, osobno dla urządzeń mobilnych i komputerów. Dzięki temu wskaźnik opisuje rzeczywiste doświadczenie użytkowników, a nie tylko szybkość pobierania zasobów.
Najczęstsze przyczyny
Przeglądarka często nie zna jeszcze końcowego rozmiaru elementu. Typowe przyczyny to obrazy bez wymiarów, filmy i iframe’y bez zarezerwowanego miejsca, reklamy, widżety zewnętrzne, zamiana czcionek, banery dodawane po wyświetleniu strony oraz treści wstrzykiwane przez JavaScript bez placeholdera.
Stabilne obrazy, osadzenia i reklamy
Podaj width i height obrazów, aby przeglądarka mogła wcześniej zarezerwować właściwe proporcje:
<img src="przyklad.jpg" alt="Przykład" width="1200" height="800">Responsywność nadal zapewnią max-width: 100%; height: auto. Dla filmów, map, formularzy i treści społecznościowych użyj kontenera z aspect-ratio: 16 / 9. Zarezerwuj także przewidywaną wysokość reklam.
Treści dynamiczne i czcionki
Banery cookies, promocje, wyniki wyszukiwania, rekomendacje i odpowiedzi API nie powinny spychać widocznej treści. Zarezerwuj miejsce wcześniej albo użyj skeletonów i przewidywalnych wysokości minimalnych.
Czcionka zastępcza może mieć inne metryki niż webfont i zmienić łamanie tekstu. Wybierz podobny fallback, ostrożnie skonfiguruj ładowanie i rozważ size-adjust przed usunięciem niestandardowej czcionki.
Animacje i diagnoza
Animowanie top, left, width, height lub margin zmienia układ. Do ruchu i skalowania lepiej użyć transformacji CSS, na przykład transform: translateX(20px).
Korzystaj z PageSpeed Insights, Lighthouse i Chrome DevTools. Dane terenowe pokazują prawdziwe urządzenia i sieci, a dane laboratoryjne pomagają debugować implementację. Sprawdź też przewijanie, menu, zgody, doładowywanie treści i widżety.
Szybszy hosting nie naprawi CLS automatycznie. Najpierw znajdź element, który się przesuwa, a następnie popraw HTML, CSS, JavaScript, media lub usługę zewnętrzną.
Najczęstsze pytania
Jaki wynik CLS jest dobry?
0,1 lub mniej jest dobry, od 0,1 do 0,25 wymaga poprawy, a powyżej 0,25 jest słaby.
Czy lazy loading powoduje CLS?
Nie sam w sobie. Problem pojawia się, gdy brakuje wymiarów lub proporcji potrzebnych do zarezerwowania miejsca.
Czy poprawa CLS poprawia SEO?
Core Web Vitals są używane przez systemy rankingowe Google, ale CLS jest tylko jednym z wielu sygnałów.
Zbuduj stabilniejszą stronę
Najważniejsza zasada brzmi: przeglądarka powinna możliwie wcześnie znać ilość miejsca potrzebną każdemu elementowi. Zarezerwuj przestrzeń, testuj prawdziwe interakcje i sprawdzaj dane terenowe oraz laboratoryjne.