Przesunięcia układu

Silktide obserwuje stronę podczas jej ładowania i mierzy, jak bardzo zmienia się układ, wskazując konkretne elementy strony, które się przesuwają. Stabilna strona pojawia się raz i pozostaje na miejscu; niestabilna przesuwa się podczas ładowania obrazów, czcionek i osadzonych treści.

Miarą jest Skumulowane przesunięcie układu (CLS), jeden z Podstawowych wskaźników internetowych Google. Sumuje ono wszystkie nieoczekiwane ruchy podczas ładowania: wynik 0,1 lub niższy jest uznawany za dobry, a 0,25 lub wyższy — za słaby.

Dlaczego to ważne

Przesunięcia układu powodują rzeczywiste pomyłki. Odwiedzający chce kliknąć link, treść przeskakuje w ostatniej chwili, a on klika coś innego — czasem reklamę, czasem „Kup” zamiast „Anuluj”. Tekst, który odwiedzający czyta, nagle przesuwa się poza jego zasięg. Sprawia to, że witryna wydaje się uszkodzona i niewiarygodna, co odwiedzający zauważają od razu, nawet jeśli nie potrafią tego nazwać.

Google wykorzystuje również Podstawowe wskaźniki internetowe, w tym ten, jako sygnał rankingu w wyszukiwarce, więc niestabilna strona może obniżyć zarówno widoczność, jak i zaufanie użytkowników.

Jak to naprawić

Silktide pokazuje, które elementy się przesunęły; rozwiązaniem jest zarezerwowanie dla nich miejsca przed ich załadowaniem.

1. Nadaj każdemu obrazowi i filmowi jawną szerokość i wysokość (lub proporcje CSS), aby przeglądarka zarezerwowała odpowiednie miejsce przed pobraniem pliku — zobacz Jawne rozmiary obrazów.
2. Zarezerwuj miejsce na reklamy, osadzone treści i inne treści ładowane z opóźnieniem, używając kontenera o stałym rozmiarze, nawet jeśli czasami jest on częściowo pusty.
3. Nigdy nie wstawiaj nowej treści nad tym, co odwiedzający już czyta, chyba że jest to odpowiedź na jego własne działanie.
4. Ładuj niestandardowe czcionki w sposób, który zapobiega widocznemu przeformatowywaniu tekstu — zobacz Widoczny tekst podczas ładowania.

Jak Silktide to testuje

1. Ładuje stronę w prawdziwej przeglądarce, używając typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
2. Rejestruje każdy nieoczekiwany ruch układu podczas ładowania strony i sumuje je w wynik Skumulowanego przesunięcia układu strony.
3. Raportuje każdy element, który się przesunął, wraz z jego HTML i indywidualnym wkładem do sumy.
4. Ocenia stronę na podstawie jej łącznego wyniku, według publicznej skali dla tego pomiaru: 0,1 lub mniej jest dobre, a 0,25 lub więcej — słabe.

Rozwiązywanie problemów

Nie widzę ruchu strony

Przesunięcia często występują w pierwszych chwilach ładowania, zanim zaczniesz czytać, albo tylko przy wolniejszych połączeniach, gdy pliki docierają w odstępach czasu. Twoja przeglądarka może również mieć obrazy i czcionki strony zapisane w pamięci podręcznej, więc nic nie musi zostać załadowane później. Elementy wymienione przez kontrolę wskazują jednak, co się przesunęło, nawet jeśli trwało to tylko chwilę.

Mój wynik różni się od wyników innych narzędzi

CLS zależy od urządzenia, szybkości połączenia i zakresu pomiaru. Silktide mierzy kontrolowane ładowanie strony przy użyciu skonfigurowanych ustawień testu szybkości; narzędzia oparte na danych rzeczywistych odwiedzających (lub kontynuujące pomiar podczas przewijania i interakcji użytkowników) mogą zasadnie raportować inne wartości dla tej samej strony.

Dowiedz się więcej

• Szybkość strony i Podstawowe wskaźniki internetowe — struktura priorytetyzacji dla CLS i innych wskaźników
• Skumulowane przesunięcie układu (web.dev)
• Optymalizacja skumulowanego przesunięcia układu (web.dev)
• Jawne rozmiary obrazów
• Widoczny tekst podczas ładowania
• Web Vitals