Naprawa skaczących układów: najczęstsze przyczyny

Q: Jakie jest najskuteczniejsze pojedyncze działanie?

Nadanie każdemu obrazowi width i height oraz dodanie w CSS height: auto . Przeglądarka rezerwuje wtedy od początku właściwe miejsce, a skalowanie zostaje zachowane. To działanie stanowi w praktyce często połowę problemu.

Najważniejsze w skrócie

Sześć przyczyn pokrywa niemal wszystkie przypadki – obrazy bez wymiarów, doładowywane kroje pisma, osadzone treści obce, wyświetlane później komunikaty, późno ładowany CSS i treści wstawiane dynamicznie.
Wartość na własnym komputerze wychodzi regularnie zbyt dobrze: szybkie łącze, wypełniona pamięć podręczna, inna wielkość ekranu.
Najskuteczniejszym pojedynczym działaniem jest nadanie każdemu obrazowi i każdemu osadzonemu elementowi stałych wymiarów albo proporcji.
Pasek komunikatu pojawiający się po załadowaniu i spychający treść w dół to druga co do częstości przyczyna – i najłatwiejsza do usunięcia.

Sześć przyczyn

1. Obrazy bez podania wymiarów

Bez width i height przeglądarka nie wie, ile miejsca zarezerwować – tekst zjeżdża, gdy tylko obraz dotrze.

Usunięcie: ustawić oba atrybuty i dodać w CSS height: auto, żeby zachować skalowanie.

2. Doładowywane kroje pisma

Tekst pojawia się najpierw w kroju zastępczym i skacze przy zmianie, bo oba mają inną szerokość.

Usunięcie: wczytać krój z wyprzedzeniem, font-display: swap i dopasować metryki kroju zastępczego do docelowego.

3. Osadzone treści obce

Filmy, mapy, widżety ocen przychodzą bez znanej wysokości i przy dotarciu spychają wszystko w dół.

Usunięcie: przygotować symbol zastępczy o stałych proporcjach, do którego treść jest ładowana.

4. Komunikaty wyświetlane później

Baner zgody albo pasek akcji pojawiający się po załadowaniu na górze i spychający całą stronę w dół.

Usunięcie: zarezerwować miejsce od początku albo wyświetlać nakładkowo zamiast wsuwająco.

5. Późno ładowany CSS

Jeśli arkusz stylów zadziała dopiero po pierwszym wyrysowaniu, strona zostaje przedstawiona raz bez oprawy, a potem z oprawą.

Usunięcie: dostarczyć wcześnie reguły potrzebne dla widocznego obszaru – w całości, nie w częściach.

6. Treści wstawiane dynamicznie

Komunikat, lista albo obszar wstawiany przez JavaScript po załadowaniu nad istniejącą treścią.

Usunięcie: wstawiać poniżej widocznego obszaru albo zarezerwować miejsce.

Czy wiesz, że…?

Przyczyna piąta jest najbardziej podstępna, bo lokalnie prawie nigdy nie występuje: na szybkim łączu arkusz stylów dociera przed pierwszym wyrysowaniem i nic nie skacze. Na wolnym łączu dociera po nim – i cała strona buduje się dwa razy.

Dostarczenie części CSS wcześnie nie wystarczy: jeśli brakuje w niej reguły dotyczącej widocznego obszaru, skacze dokładnie ten element. Albo w całości dla widocznego obszaru, albo wcale – połowiczne rozwiązania są tu gorsze niż żadne.

Poprawne mierzenie

Sposób pomiaru	Co pokazuje	Pułapka
Własny komputer, narzędzia deweloperskie	zgrubne wskazówki	za szybko, wypełniona pamięć podręczna
Test laboratoryjny w narzędziu kontrolnym	odtwarzalną wartość	jeden warunek, nie rzeczywistość
Dane polowe prawdziwych odwiedzających	co faktycznie się dzieje	wymaga dość ruchu
Mobilnie z ograniczonym łączem	najuczciwszy pojedynczy test	trzeba świadomie ustawić

Uwaga Dobra wartość lokalna nie mówi nic. Kto na tej podstawie odwoła alarm, regularnie przeocza dokładnie te przypadki, których doświadczają odwiedzający – wolne łącze, pusta pamięć podręczna, mały ekran. Mierzy się z ograniczeniem albo wcale.

Z praktyki

Przypadek, który zapada w pamięć: strona miała lokalnie nienaganną wartość, a w narzędziu kontrolnym bardzo złą. Przyczyną był częściowo wbudowany arkusz stylów – brakowało w nim trzech reguł dla obszarów w widocznej części.

Lokalnie nigdy się to nie rzucało w oczy, bo pełny plik docierał szybciej niż pierwsze wyrysowanie. Przy ograniczeniu docierał po nim i trzy obszary skakały. Wniosek: przy skaczących układach lokalne wrażenie nie jest kontrdowodem, lecz tylko innym scenariuszem – i zwykle mniej realistycznym.

Kolejność usuwania

Sprawdzić wszystkie obrazy. Ustawione width i height, w CSS height: auto. Zwykle połowa problemu.
Objąć ramą osadzone treści obce. Symbol zastępczy o stałych proporcjach.
Sprawdzić wyświetlane komunikaty. Nakładkowo zamiast wsuwająco.
Sprawdzić ładowanie krojów pisma. Wczytać z wyprzedzeniem, dopasować krój zastępczy.
Sprawdzić dostarczanie CSS. W całości dla widocznego obszaru.
Zmierzyć ponownie – z ograniczeniem. I to po każdym pojedynczym kroku, inaczej nie wiadomo, co zadziałało.

Prompt

Pomóż mi znaleźć i usunąć skaczące układy na naszej stronie.

Dane:
- Zmierzona wartość przesunięcia układu: [wartość, narzędzie,
  mobilnie albo komputer]
- Elementy przesuwające się według pomiaru: [lista, jeśli znana]
- Obrazy z atrybutami width/height? [tak / nie / częściowo]
- Jak dostarczany jest CSS? [plik zewnętrzny / wbudowany /
  częściowo wbudowany]
- Osadzone treści obce: [filmy, mapy, oceny, czat]
- Czy coś jest wyświetlane po załadowaniu? [baner, komunikat,
  pasek akcji]
- Jak ładowane są kroje pisma? [dane]

Zadania:
1. Przypisz każdy przesuwający się element do jednej z sześciu
   przyczyn: obrazy bez wymiarów, doładowywane kroje pisma,
   osadzone treści obce, komunikaty wyświetlane później, późno
   ładowany CSS, treści wstawiane dynamicznie.
2. Podaj przy każdej przyczynie konkretne usunięcie z
   przykładem kodu.
3. Jeśli CSS jest wbudowany tylko częściowo: wyjaśnij, dlaczego
   może to być gorsze niż wcale i co należy sprawdzić.
4. Daj mi kolejność według efektu na jednostkę nakładu.
5. Powiedz mi, jak powinnam mierzyć po każdym kroku, żebym
   wiedziała, co zadziałało.

Nie wymyślaj wartości pomiarowych.

Podsumowanie

Sześć przyczyn, a pierwsza – obrazy bez podania wymiarów – stanowi zwykle połowę. Usuwa się ją w pół godziny i działa natychmiast.

Trudniejszą częścią jest mierzenie: kto sprawdza lokalnie, mierzy scenariusz, którego prawie żaden odwiedzający nie doświadcza. Mierzyć z ograniczeniem, po każdym kroku osobno – inaczej usuwa się trzy rzeczy i nie wiadomo, która z nich zadziałała.

Częste pytania

Dlaczego treść skacze przy ładowaniu strony?

Zwykle z jednej z sześciu przyczyn: obrazy bez podania wymiarów, doładowywane kroje pisma o innej szerokości, osadzone treści obce bez znanej wysokości, wyświetlane później paski komunikatów, CSS działający późno oraz treści wstawiane przez JavaScript nad widocznym obszarem.

Jakie jest najskuteczniejsze pojedyncze działanie?

Nadanie każdemu obrazowi width i height oraz dodanie w CSS height: auto. Przeglądarka rezerwuje wtedy od początku właściwe miejsce, a skalowanie zostaje zachowane. To działanie stanowi w praktyce często połowę problemu.

Dlaczego wartość lokalnie jest lepsza niż w narzędziu kontrolnym?

Bo na własnym komputerze łącze jest szybkie, a pamięć podręczna wypełniona: arkusze stylów, kroje pisma i obrazy docierają przed pierwszym wyrysowaniem i nic nie skacze. W warunkach realistycznych docierają po nim – dlatego trzeba mierzyć z ograniczeniem.

Czy częściowo wbudowany CSS może zaszkodzić?

Tak. Jeśli w części wbudowanej brakuje reguły dotyczącej obszaru w widocznej części, dokładnie ten element skacze, gdy tylko dotrze pełny arkusz stylów. Albo w całości dla widocznego obszaru, albo wcale – połowiczne rozwiązania są tu gorsze niż żadne.

Jak usunąć skaczące banery zgody?

Wyświetlając je nakładkowo zamiast wsuwająco – czyli tak, by leżały nad treścią, nie spychając jej w dół. Alternatywnie da się zarezerwować miejsce od początku. Ta przyczyna jest jedną z najczęstszych i zarazem najłatwiejszych do usunięcia.