Skeleton screen to uproszczony szkielet układu strony (szare bloki w miejscu przyszłych elementów), wyświetlany podczas ładowania danych. Zmniejsza odczuwalny czas oczekiwania i zapobiega przesunięciom układu.
Skeleton czy spinner?
| Cecha | Skeleton | Spinner |
|---|---|---|
| Informacja o układzie | tak | nie |
| Wpływ na CLS | zmniejsza przesunięcia | neutralny |
| Najlepszy dla | list, kart, tablic | krótkich akcji, przycisków |
Dobre praktyki
- odwzoruj układ docelowej treści,
- nie wyświetlaj szkieletu dla bardzo szybkich odpowiedzi (poniżej ok. 300 ms),
- animację ogranicz zgodnie z ustawieniem
prefers-reduced-motion.
Zamiast pustego ekranu pokazuje szare bloki przypominające układ treści, co skraca odczuwalny czas ładowania. Nie powinien jednak przesłaniać faktycznych opóźnień, więc nie zastąpi optymalizacji.
Animacja pulsowania sygnalizuje, że treść się ładuje. Użyj go tam, gdzie układ jest przewidywalny, a spinner zachowaj dla krótkich, nieokreślonych operacji.
Czy skeleton poprawia wyniki Core Web Vitals?
Nie przyspiesza ładowania, ale rezerwując miejsce na treść, ogranicza przesunięcia układu (CLS), a dla użytkownika skraca odczuwalny czas oczekiwania.
Wpływa to bezpośrednio na wydajność strony mierzoną wskaźnikami Core Web Vitals.
Zobacz w praktyce
Core Web Vitals - poradnik jak poprawić wskaźniki 
Paginacja czy infinite scroll – co wybrać dla SEO i UX? 
Proces projektowania UX krok po kroku – od badań do testów