Jak poprawić CLS: obrazy, fonty i dynamiczne treści

Aby poprawić Cumulative Layout Shift (CLS), znajdź przyczynę zmiany położenia elementu po jego pierwszym wyświetleniu i zapewnij mu przewidywalne miejsce. Typowe przyczyny to późno dodawana treść, obrazy bez wymiarów i fonty zmieniające łamanie tekstu. Sama kompresja obrazu nie rezerwuje jego miejsca.

Zacznij od strony, na której występuje skok. W tym poradniku prosty sklep demonstracyjny pokazuje przyczynę: nad produktami pojawia się informacja o dostawie. Zachowujemy tę samą treść i opóźnienie, zmieniając tylko rezerwację miejsca.

Co mówi CLS

CLS mierzy nieoczekiwane przesunięcia wizualne. Nie ma jednostki czasu: uwzględnia obszar przesuwanej treści i odległość ruchu. Dobry wynik według Google to 0,1 lub mniej w 75. percentylu wizyt na stronie. Pojedynczy pomiar lokalny nie potwierdza, że cała witryna spełnia Core Web Vitals.

Obecna metryka korzysta z największego okna sesji nieoczekiwanych przesunięć, zamiast sumować wszystkie przesunięcia podczas dowolnie długiej wizyty. Niedawna interakcja użytkownika również może wpływać na uwzględnienie ruchu. Reguły opisuje definicja CLS.

Audyt ładowania jest przydatny, ale użytkownik może zobaczyć skok później: po przewinięciu do osadzonego materiału, przejściu na inną podstronę lub otrzymaniu spersonalizowanej treści. Niski CLS początkowego testu Lighthouse nie potwierdza stabilności wszystkich późniejszych stanów.

Informacja o dostawie przesuwa katalog

FIELD / GOODS to celowo uproszczony sklep demonstracyjny, a nie witryna klienta. Komunikat pojawia się 1500 ms po gotowości dokumentu. W pierwszej wersji pusty kontener nie ma zarezerwowanej wysokości. Dodanie komunikatu przesuwa nagłówek produktów i karty w dół.

Lokalny zrzut Chrome z 22 października 2026 r. Przy obszarze 1280 × 900 pikseli CSS nagłówek przesuwa się z 406 do 498 pikseli. Obserwator Layout Instability API na stronie raportuje CLS 0,0289.

Druga wersja rezerwuje wysokość komunikatu przed pojawieniem się tekstu. Produkty od początku zajmują końcowe położenie. Oba zrzuty pokazują tę samą końcową treść; różnica dotyczy tego, co działo się podczas jej pojawiania.

Ta sama przeglądarka, obszar, treść i opóźnienie. Nagłówek pozostaje na wysokości 498 pikseli; zaobserwowany CLS tego przykładu wynosi 0,0000.

To pojedyncze obserwacje lokalne w Chrome 155, bez ograniczania sieci, zebrane 22 października 2026 r. Nie są raportami Lighthouse, percentylami danych użytkowników ani prognozą dla innej witryny. Nawet wersja z ruchem pozostaje poniżej 0,1 w tym małym eksperymencie: widoczny skok i ogólna klasyfikacja strony to osobne kwestie.

Otwórz wersję bez rezerwacji, a następnie porównaj wersję z rezerwacją. Zachowaj ten sam obszar, odśwież i poczekaj bez przewijania oraz klikania. Obserwator pomija przesunięcia po niedawnej interakcji i zachowuje największe okno sesji. Wyniki mogą zależeć od obszaru i zachowania przeglądarki.

Znajdź przyczynę, nie tylko przesuwany element

Otwórz Chrome DevTools → Performance i nagraj przeładowanie. Odtwórz właściwy problem: poczekaj na komunikat, przewiń do filmu albo przejdź do odpowiedniego widoku. Sprawdź wpisy przesunięć układu i sąsiednie klatki. Dokumentacja panelu Performance opisuje nagrywanie i analizę śladów.

Wskazana karta produktu może jedynie reagować na inną zmianę. Sprawdź obszar nad nią: czy pojawił się komunikat, obraz zyskał wysokość albo nagłówek zajął dodatkowy wiersz? Zmiana marginesu karty ukryłaby objaw tylko w jednym stanie.

Powtórz próbę w wąskim widoku i przy pierwszym ładowaniu. Zapisz stan banera cookies, logowania i adres strony. Jeśli przyczyną jest narzędzie zgód, odtwórz jego zwykłe działanie zamiast wyłączać je wyłącznie na czas testu.

Zapewnij przewidywalne miejsce

Zarezerwuj miejsce na późną treść

W demonstracji jedyną zmianą układu jest minimalna wysokość istniejącego kontenera:

.notice-slot {
  min-height: 92px;
}

@media (max-width: 600px) {
  .notice-slot {
    min-height: 116px;
  }
}

Te wartości dotyczą tego przykładu. Zmierz własną treść przy rzeczywistych szerokościach i w różnych językach: tłumaczenia oraz powiększony tekst mogą potrzebować więcej miejsca. Szkielet ładowania powinien odpowiadać geometrii docelowego bloku. Późniejsze usunięcie zarezerwowanego kontenera również może przesunąć stronę — sprawdź także ten stan.

Nadaj obrazom proporcje przed załadowaniem

Podaj rzeczywiste wymiary źródła i pozwól CSS skalować obraz proporcjonalnie:

<img
  src="/images/daypack.webp"
  alt="Zielony plecak z przednią kieszenią"
  width="800"
  height="600"
  style="width: 100%; height: auto;"
/>

W Next.js przekaż odpowiednie wymiary do Image albo nadaj rodzicowi obrazu z fill określony rozmiar lub proporcje. Ustaw poprawne responsywne sizes, aby dobrać pobierany wariant. To powiązane, ale osobne zadania: rezerwacja geometrii i wybór pliku. Zobacz opis Image.

Sprawdź zmianę fontu

Obserwuj nagłówek podczas ładowania fontu. Jeśli font zastępczy mieści tekst w dwóch wierszach, a docelowy potrzebuje trzech, treść poniżej może się przesunąć. Dopasuj metryki fontu zastępczego i sprawdź używaną rodzinę, grubości oraz podzbiory językowe. font-display: swap pozwala wcześniej wyświetlić tekst, ale nie gwarantuje stałego łamania wierszy.

W Next.js next/font zapewnia lokalne serwowanie fontów i opcje dopasowania fontu zastępczego. Sprawdź efekt bez fontu w pamięci podręcznej i na rzeczywistym tekście, szczególnie w różnych językach.

Udostępnij początkową treść w pierwszym renderze

Pusty katalog wypełniany przez efekt po stronie klienta może zmienić wysokość całej strony. Jeśli dane są dostępne na serwerze, wyrenderuj tam początkowe produkty i przekaż ten sam stan do komponentu interaktywnego. Jeśli dane muszą nadejść później, zarezerwuj realistyczny układ ładowania.

Client Component nie oznacza automatycznie braku HTML wyrenderowanego na serwerze. Next.js może wstępnie renderować Client Components przy pierwszym ładowaniu. Sprawdź, kiedy dane stają się dostępne i czy początkowy HTML je zawiera. Granicę wyjaśnia poradnik Server i Client Components.

Zweryfikuj stronę otrzymywaną przez użytkowników

Powtórz ten sam scenariusz przed zmianą i po niej. Zachowaj adres, obszar, przeglądarkę i stan treści. Sprawdź ślad razem z wynikiem: właściwy blok powinien przestać przesuwać inne elementy, a komunikat, obrazy i kontrolki muszą nadal działać.

Sprawdź pierwsze ładowanie oraz późniejsze interakcje wywołujące ruch. Dostępne dane rzeczywistych użytkowników oceniaj osobno: obejmują okres zbierania danych i nie stają się natychmiast nowym pomiarem lokalnym po wdrożeniu.

Uruchom darmowy test NEKTIQA, aby uzyskać diagnostykę Lighthouse, i korzystaj z historii wydajności, aby obserwować porównywalne testy laboratoryjne po kolejnych zmianach. Różnice między narzędziami omawia PageSpeed Insights a Lighthouse. O dostarczaniu obrazów i osadzonych widżetach przeczytasz w trzech praktycznych poprawkach wydajności strony.