Przegląd współczynnika rankingowego Google w 2021 r.
Dowiedz się więcej o skumulowanym przesunięciu układu (CLS): co to jest, jak to się dzieje, jak je mierzyć i dlaczego jest częścią metryki Core Web Vitals.
Cumulative Layout Shift (CLS) to wskaźnik Google, który mierzy zdarzenie związane z wrażeniami użytkownika i stał się czynnikiem rankingowym w 2021 r.
Oznacza to, że ważne jest, aby zrozumieć, czym jest CLS i jak go zoptymalizować.
Definicja skumulowanego przesunięcia układu
Co to jest skumulowane przesunięcie układu?
CLS to nieoczekiwane przesunięcie elementów strony internetowej, gdy strona jest nadal pobierana. Rodzaje elementów, które mają tendencję do powodowania zmian, to czcionki, obrazy, filmy, formularze kontaktowe, przyciski i inne rodzaje treści.
Minimalizacja CLS jest ważna, ponieważ strony, które się przesuwają, mogą powodować złe wrażenia użytkownika.
Słaby wynik CLS wskazuje na problemy z kodowaniem, które można rozwiązać.
Dlaczego CLS się dzieje?
Według Google istnieje pięć powodów, dla których dochodzi do skumulowanego przesunięcia układu:
- Obrazy bez wymiarów.
- Reklamy, elementy umieszczone i elementy iframe bez wymiarów.
- Treść wstrzykiwana dynamicznie.
- Czcionki internetowe powodujące FOIT/FOUT.
- Akcje oczekujące na odpowiedź sieciową przed aktualizacją DOM.
Obrazy i filmy muszą mieć wymiary wysokości i szerokości zadeklarowane w kodzie HTML. Jeśli chodzi o obrazy elastyczne, upewnij się, że różne rozmiary obrazów dla różnych widocznych obszarów mają te same proporcje.
Google zaleca używanie AspectRatioCalculator.com do obliczania współczynników proporcji. To dobry zasób.
Reklamy mogą powodować CLS
Ten jest trochę trudny do pokonania. Jednym ze sposobów radzenia sobie z reklamami, które powodują CLS, jest stylizacja elementu, w którym reklama ma się wyświetlać.
Na przykład, jeśli ustawisz styl div tak, aby miał określoną wysokość i szerokość, reklama zostanie do nich ograniczona.
Istnieją dwa rozwiązania, jeśli brakuje zasobów reklamowych i reklama się nie wyświetla.
Jeśli element zawierający reklamę nie wyświetla reklamy, możesz ustawić go tak, aby do wypełnienia miejsca był używany alternatywny baner reklamowy lub obraz zastępczy.
Ewentualnie w przypadku niektórych układów, w których reklama zajmuje cały wiersz u góry, być może, kolumny w prawej lub lewej części strony, jeśli strona się nie wyświetla, nie nastąpi przesunięcie. Nie będzie to miało znaczenia ani na urządzeniach mobilnych, ani na komputerach stacjonarnych. Ale to zależy od układu motywu. Musisz to sprawdzić, jeśli problemem są zasoby reklamowe.
Treści wstrzykiwane dynamicznie
To jest treść, która jest wstrzykiwana na stronę internetową. Na przykład w WordPressie możesz połączyć się z filmem YouTube lub tweetem, a WordPress wyświetli wideo lub tweet jako osadzony obiekt.
Czcionki internetowe
Pobrane czcionki internetowe mogą powodować tzw. Flash of niewidzialnego tekstu (FOIT) i Flash of Unstyled Text (FOUT).
Sposobem, aby temu zapobiec, jest użycie rel=”preload” w łączu do pobrania tej czcionki internetowej. Lighthouse może pomóc Ci zdiagnozować przyczynę CLS.
CLS może wkraść się podczas rozwoju
Skumulowana zmiana układu może prześlizgnąć się na etapie opracowywania. Może się zdarzyć, że wiele zasobów potrzebnych do renderowania strony zostanie załadowanych do pamięci podręcznej przeglądarki.
Następnym razem, gdy programista lub wydawca odwiedzi opracowywaną stronę, nie zauważy zmiany układu, ponieważ elementy strony są już pobrane.
Dlatego warto wykonać pomiar w laboratorium lub w terenie.
Jak obliczane jest skumulowane przesunięcie układu
Obliczenie obejmuje dwie metryki/zdarzenia. Pierwsza nazywa się frakcją uderzeniową.
Frakcja Uderzenia
Frakcja uderzenia jest miarą tego, ile miejsca zajmuje niestabilny element w rzutni.
Widoczny obszar to to, co widzisz na ekranie urządzenia mobilnego.
Gdy element jest pobierany, a następnie przesuwany, całkowita przestrzeń zajmowana przez element, od lokalizacji, którą zajmował w rzutni podczas pierwszego renderowania, do ostatecznej lokalizacji podczas renderowania strony.
Przykładem, którego używa Google, jest element, który zajmuje 50% widocznego obszaru, a następnie spada o kolejne 25%.
Po zsumowaniu, wartość 75% nazywana jest frakcją uderzeniową i jest wyrażana jako wynik 0,75.
Ułamek odległości
Drugi pomiar to ułamek odległości. Ułamek odległości to ilość miejsca, o jaką element strony przesunął się z pozycji początkowej do pozycji końcowej.
W powyższym przykładzie element strony przesunął się o 25%.
Tak więc teraz skumulowany wynik układu jest obliczany poprzez pomnożenie frakcji uderzenia przez frakcję odległości:
0,75 x 0,25 = 0,1875
Jest jeszcze trochę matematyki i innych rozważań, które wchodzą w skład obliczeń. Ważne jest, aby od tego odjąć, że wynik jest jednym ze sposobów pomiaru ważnego czynnika doświadczenia użytkownika.
Jak mierzyć CLS
Istnieją dwa sposoby pomiaru CLS. Google wzywa pierwszą drogę w laboratorium. Drugi sposób nazywa się w Polu.
W laboratorium oznacza symulację rzeczywistego użytkownika pobierającego stronę internetową. Google używa symulowanego Moto G4 do generowania wyniku CLS w środowisku laboratoryjnym.
Narzędzia laboratoryjne najlepiej nadają się do zrozumienia, jak układ może działać, zanim zostanie udostępniony użytkownikom. Daje wydawcom możliwość przetestowania układu pod kątem problemów .
Narzędzia laboratoryjne obejmują Chrome Dev Tools i Lighthouse .
Zrozumienie skumulowanego przesunięcia układu
Ważne jest, aby zrozumieć skumulowane przesunięcie układu. Nie trzeba rozumieć, jak samemu wykonywać obliczenia.
Ale zrozumienie, co to znaczy i jak działa, jest kluczowe, ponieważ stało się to teraz częścią czynnika rankingowego Core Web Vitals.