CLS (skumulowana zmiana układu)
CLS mierzy, jak wiele widocznych elementów niespodziewanie przesuwa się podczas wczytywania strony - jednej z podstawowych wartości internetowych Google.
Co to jest CLS (skumulowana zmiana układu)?
CLS mierzy, ile widocznych elementów nieoczekiwanie przesuwa się podczas wczytywania lub używania strony. Wynik jest jednoznaczny i obliczony jako *frakcja uderzeniowa * (jak duża część widoków jest naruszona) razy *ułamek odległości * (jak daleko poruszają się elementy). CLS jest jednym z trzech Podstawowe wartości WWW obok LCP i INP, i dobry wynik jest 0.1 lub niższy w 75. percentylu - cokolwiek powyżej 0.25 jest uważana za biedną.
Dlaczego CLS (skumulowana zmiana układu) ma znaczenie?
Skoki w układzie są bezpośrednio szkodliwe w sklepie internetowym: kupujący ma zamiar nacisnąć “Kup”, ale baner lub late- ładujący obraz naciska przycisk i kran wyląduje na czymś innym. To powoduje frustrację, błędy i nieufność tuż przed nawróceniem. CLS jest również częścią sygnałów doświadczenia strony Google, więc uporczywie wysokie wartości mogą przeciągać rankingi w dół. Stabilna strona wydaje się szybsza i bardziej profesjonalna - nawet jeśli prędkość jest identyczna.
Przypadki wspólnego stosowania
- Obrazy i wideo bez wymiarów. Bez
width/heightlubaspect-ratioprzeglądarka nie może zarezerwować miejsca z góry, więc zawartość skacze, gdy media ładują - podłącz to z odpowiednim Tekst alternatywny. - Banery i wyskakujące ciasteczka. Zawartość wstrzyknięta na górze lub w środku strony popycha wszystko poniżej.
- Widżety aplikacji. Opinie, “ostatnio oglądane”, i upsell bloki, które ładują po resztę odświeżyć układ.
- Czcionki internetowe. Wymiana z czcionki zapasowej na ostatnią czcionkę może spowodować, że tekst zostanie odtworzony i przesunięty.
- reklama i iframy bez zastrzeżonego miejsca w okolicy Obszar widoczny bez przewijania.
Shopify perspektywa
W Shopify większość skoków układu pochodzi z aplikacji i edycji tematu, a nie z głównej platformy. Zawsze rezerwuj miejsce dla dynamicznych bloków, ustaw stałe wymiary na obrazach produktów, a następnie ładuj banery i popupy cookies, aby nie popychać treści wokół. Zmierz efekt z PageSpeed Insights lub Latarnia morska na zarówno mobilne i pulpitu, i oglądać raport prędkości pod Sklep internetowy w administracji Shopify, która jest zbudowana na danych Google Latarnia morska.