Technologiczne, Gadżety, Telefony Komórkowe, Pobieranie Aplikacji

Twój kompletny przewodnik po skumulowanym przesunięciu układu (CLS)

Uwaga: Poniższy artykuł pomoże Ci w: Twój kompletny przewodnik po skumulowanym przesunięciu układu (CLS)

Czy kiedykolwiek przewijałeś listę produktów w witrynie i zostało to zakłócone przez ładowanie reklamy i przesunięcie całej strony w dół? Dość powiedzieć, że jest to frustrujące doświadczenie i w zależności od sytuacji może skutkować błędnym kliknięciem, którego cofnięcie zajmuje cenny czas.

Jeśli kiedykolwiek ci się to przytrafiło, to już wiesz, jak to jest spotkać się jako użytkownik z funkcją Cumulative Layout Shift (CLS). Ale czym właściwie jest CLS, dlaczego ma znaczenie z punktu widzenia SEO, jak można go zmierzyć i co można zrobić, aby ulepszyć swój? Czytaj dalej, aby dowiedzieć się i rozpocząć optymalizację CLS swojej witryny.

Co to jest skumulowane przesunięcie układu?

Oczekiwaliśmy aktualizacji dotyczącej jakości stron Google od wielu miesięcy, a jej wdrażanie ostatecznie rozpoczęło się w lipcu 2021 r. Aby zachęcić witryny do zapewniania użytkownikom jak najbardziej wyjątkowej wygody, aktualizacja wprowadziła szereg nowych sygnałów dla algorytmów Google, aby mogły rozważać.

Wśród nich jest Podstawowe wskaźniki sieciowe, czyli trzy sygnały używane do oceny szybkości i responsywności strony. Te trzy sygnały obejmują:

  • Największa zawartość treściowa (LCP), która mierzy czas ładowania największego elementu treści na stronie;
  • Opóźnienie pierwszego wejścia (FID), które mierzy czas potrzebny stronie na reakcję na pierwszą interakcję użytkownika; I
  • Cumulative Layout Shift (CLS), który mierzy stabilność wizualną.

Ale co dokładnie oznacza stabilność wizualna? Aby to zrozumieć, przypomnij sobie, kiedy ostatni raz przewijałeś stronę i straciłeś miejsce, gdy cały układ przeskoczył w górę lub w dół. Być może spowodowało to nawet kliknięcie innego przycisku niż zamierzałeś lub sfrustrowało Cię tak bardzo, że całkowicie opuściłeś stronę.

Ten typ scenariusza jest znany jako niestabilność układu Lub zmiana układui jest to jeden z wielu elementów strony, który może powodować niezadowalające wrażenia użytkownika. Kiedy więc mówimy, że CLS mierzy stabilność wizualną, mamy na myśli to, że informuje Cię, jak niestabilny jest układ Twojej strony. W związku z tym im niższy wynik CLS, tym lepsze wrażenia użytkownika.

Mówiąc dokładniej, Google zaleca, aby witryny dążyły do ​​uzyskania wyniku CLS wynoszącego 0.1 lub mniej:

Wynik 0.1–00,25 jest w porządku, ale należy je jeszcze poprawić, a wynik wynosi 00,25 lub więcej jest uważane za niespełniające norm i powinno zostać naprawione tak szybko, jak to możliwe.

Jak ważne jest skumulowane przesunięcie układu?

W świetle ostatniej aktualizacji sposobu działania strony jasne jest, że skumulowane przesunięcie układu ma znaczenie. Ale jak ważne jest to?

Sam Google sklasyfikował CLS (i dwa pozostałe podstawowe wskaźniki internetowe) jako „ważny wskaźnik zorientowany na użytkownika”. Innymi słowy, to, czy Twoja witryna osiągnie dobre wyniki we wszystkich trzech podstawowych wskaźnikach internetowych, będzie miało bezpośredni wpływ na jej rankingi w wyszukiwarkach. W związku z tym utrzymanie niskiego wyniku CLS jest niezbędne w celu poprawy pozycji witryny w SERP.

Ale CLS jest ważny także z perspektywy czysto użytkownika. Nie musisz nam wierzyć na słowo — programista Akamai, Nic Jansma, odkrył, że wraz ze wzrostem wyniku CLS witryny podobnie jak współczynnik odrzuceń:

Innymi słowy, im wyższy wynik skumulowanej zmiany układu, tym większe prawdopodobieństwo, że odwiedzający klikną przycisk Wstecz i zamiast tego przejdą do witryny konkurencji.

Zatem niski wynik CLS nie tylko pomoże przyciągnąć użytkowników do Twojej witryny poprzez podniesienie jej rankingu, ale sprawi, że ci użytkownicy będą również chętniej na niej pozostawać. Wiedząc o tym, łatwo zrozumieć, dlaczego CLS jest tak ważny zarówno na papierze, jak i w praktyce.

Jak zmierzyć skumulowane przesunięcie układu

Jeśli chcesz sprawdzić, jak radzi sobie CLS Twojej witryny, możesz to zrobić, przeglądając dane laboratoryjne (tj. dane wygenerowane w drodze testów automatycznych) lub dane terenowe (tj. dane zebrane od prawdziwych użytkowników). Żaden typ danych nie jest obiektywnie lepszy od drugiego, ale najlepiej jest korzystać zarówno z danych laboratoryjnych, jak i terenowych, aby uzyskać kompleksowe zrozumienie swojego CLS.

W przypadku danych laboratoryjnych możesz użyć:

Na przykład tak to wygląda, gdy używasz WebPageTest do analizowania CLS witryny wyświetlanej na urządzeniach mobilnych — tutaj widzimy, że iloveseo.com ma wynik CLS równy zero:

W przypadku danych terenowych możesz użyć:

Oto na przykład, co PageSpeed ​​Insights ma do powiedzenia na temat CLS CNN i innych podstawowych wskaźników internetowych:

Co powoduje skumulowane przesunięcie układu?

Niestabilność układu jest często spowodowana powolnym ładowaniem treści, takich jak reklamy innych firm GIF z reklam zaawansowanych więc doskonale pokazuje:

Ale to nie jedyny potencjalny winowajca – wysoki wynik CLS może być również spowodowany:

  • nieokreślone wymiary obrazu;
  • nieokreślone wymiary reklamy, osadzenia i ramki iframe;
  • niestabilne czcionki internetowe; I
  • zawartość dynamiczna.

Jeśli Twoja witryna ma wysoki wskaźnik CLS, musisz przeprowadzić małe śledztwo, aby dowiedzieć się, co dokładnie jest tego przyczyną. Dobra wiadomość jest jednak taka, że ​​gdy już to zrobisz, możesz podjąć jasne kroki, aby zaradzić tej sytuacji i zapewnić użytkownikom jak najlepsze doświadczenia.

Jak poprawić skumulowane przesunięcie układu

W zależności od konkretnej przyczyny wysokiego wyniku CLS Twojej witryny, każda lub wszystkie z poniższych taktyk mogą pomóc w jej prawidłowym osiągnięciu.

Określ wymiary obrazu

Określenie dokładnych wymiarów obrazów w witrynie jest ważne nie tylko ze względu na optymalizację obrazu i szybkość strony — może również pomóc w ograniczeniu CLS do minimum.

Jeśli pracujesz bezpośrednio w kodzie HTML witryny, wystarczy dodać proste atrybuty, jak pokazano w Przykład W3Schools:

Możesz także dodać wymiary z w WordPressiealbo użyj wtyczka aby przyspieszyć proces.

Określ wymiary reklamy, osadzenia i ramki IFrame

Obrazy nie są jedynym rodzajem treści, dla których należy określić wymiary – to samo dotyczy reklam, osadzonych treści i ramek iframe.

Oto jak to na przykład wygląda po określeniu rozmiaru reklamy o stałym rozmiarze zgodnie z instrukcjami Google:

Zminimalizuj niestabilność czcionki

Okazuje się, że nie wszystkie czcionki są sobie równe: istnieją czcionki pulpitu (tj. te, które są instalowane bezpośrednio na komputerze i używane w programach takich jak Word), a tam są czcionki internetowe (tj. takie, które są specjalnie zaprojektowane do użytku i wyświetlania na stronach internetowych za pośrednictwem CSS).

Chociaż rodzaj czcionki używanej w Twojej witrynie może wydawać się nieistotny, prawda jest taka, że ​​jeśli zawiera czcionki internetowe, mogą one powodować problemy z układem i zakłócać wygodę użytkownika.

Aby uniknąć tego problemu, możesz użyć metody wyświetlanie czcionek deskryptor w CSS swojej witryny, zastosuj deskryptor Google Interfejs programowania aplikacji (API) do ładowania czcionekDodaj wstępne załadowanie Wartość HTMLDodaj opcjonalny wartość do wyświetlanie czcionek deskryptora lub nawet całkowicie powstrzymać się od używania czcionek internetowych.

Ostrożnie korzystaj z zawartości dynamicznej

Nietrudno zrozumieć, dlaczego warto skorzystać zawartość dynamiczna, zwane także treściami adaptacyjnymi. Ponieważ zmienia się w zależności od zachowania użytkowników, może zapewnić wyjątkowo wciągające doświadczenie, dostosowane do każdego odwiedzającego. Na przykład zawartość dynamiczna może wyświetlać różne komunikaty na podstawie lokalizacji użytkownika:

Jednak to zdolność treści dynamicznych do zmian sprawia, że ​​stanowią one zagrożenie dla CLS. Na przykład, jeśli użytkownicy są w połowie strony i ładuje się dynamiczna treść (np. przypomnienie o produktach znajdujących się nadal w koszyku), układ strony może gwałtownie się zmienić.

Jednym z możliwych rozwiązań jest zarezerwowanie miejsca na zawartość dynamiczną, zamiast pozwalać, aby ładowała się chcąc nie chcąc. Inną opcją jest umożliwienie użytkownikom inicjowania procesu ładowania (np. poprzez kliknięcie „załaduj więcej”), dzięki czemu będą mieli kontrolę nad wszelkimi zmianami układu.

Zmniejsz CLS, aby zwiększyć wygodę użytkownika

Jeśli chodzi o skumulowaną zmianę układu, mniej znaczy zdecydowanie więcej. Na szczęście obniżenie go nie jest czymś kosmicznym — stosując dowolną z prostych metod, które tutaj omówiliśmy, możesz znacząco zmienić na lepsze wygodę użytkowników swojej witryny.

Ostatecznie Ty (i Twoje rankingi) z pewnością skorzystacie na wdrożonych dzisiaj wysiłkach na rzecz ograniczenia CLS. Dzieje się tak niezależnie od tego, czy Google używa skumulowanego przesunięcia układu jako czynnika rankingowego, czy nie.

Kredyty obrazowe

Zrzuty ekranu autorstwa autora / wrzesień 2021
Zaawansowane reklamy / grudzień 2020
Nic Jansma / październik 2020
Cloudflare / sierpień 2021