Zbiorcza zmiana układu: popraw wynik Google CLS

Czy kiedykolwiek byłeś w sytuacji, w której przycisk kasy znika podczas próby złożenia zamówienia?

Tak! To frustrujące.

Prawda jest taka, że ​​zdarza się to zbyt często i zbyt wielu z nas.

Na szczęście, jak zawsze, Google stawia przede wszystkim na wygodę użytkownika.

Dlatego od 2021 r. wprowadzi trzy nowe wskaźniki wydajności w ramach kluczowych wskaźników internetowych.

Core Web Vitals jest przeznaczony do mierzenia szybkości ładowania, interaktywności i stabilności wizualnej strony.

Reprezentują je trzy metryki:

1. Największa zawartość farby (LCP)

2. Opóźnienie pierwszego wejścia (FIP)

3. Układ skumulowany Przesunięcie (CLS)

Rozumiemy CLS zarówno z punktu widzenia użytkownika, jak i webmasterów (SEO).

Co to jest skumulowane przesunięcie układu?

Kumulatywne przesunięcie układu (CLS) reprezentuje wizualną stabilność witryny.

Mierzy ilość nieznacznych przesunięć układu na stronie.

Nieoczekiwane zmiany układu są wynikiem poruszania się strony internetowej bez udziału użytkownika.

Google CLS jest rodzajem wskaźnika (sygnału), który pozwala rozwiązać problem, mierząc, jak często nieoczekiwany ruch elementów strony wpływa na wrażenia użytkownika.

Zmiana układu może nastąpić w dowolnym momencie, gdy widoczny element zmienia swoje położenie z jednej renderowanej klatki do następnej.

Spróbujmy zrozumieć powszechne znaczenie i zdefiniować prostymi słowami „Cumulatywne przesunięcie układu”:

Skumulowany to wzrost ilości.

Układ to Ramka

Przesunięcie to zmiana pozycji

Mówiąc najprościej, skumulowane przesunięcie układu to łączna suma wszystkich zmian poszczególnych ramek w pozycjach projektu witryny.

Obraz pochodzący z web.dev

Standardowy wynik CLS powinien być poniżej 0,1.

Dobrym progiem do pomiaru tego samego jest 75. percentyl wczytywania stron na urządzeniach mobilnych i stacjonarnych.

Na powyższym obrazku wyraźnie widać, że zgodnie z Google:

1. Jeśli wynik CLS jest mniejszy niż 0,1, jest to dobry sygnał. Oznacza to, że Twoja witryna nie ma problemu z jakąkolwiek zmianą układu.

2. Jeśli wynik CLS wynosi od 0,1 do 0,25, oznacza to, że Twoja witryna wymaga pewnej poprawy układu wizualnego.

3. Jeśli wynik CLS jest większy niż 0,25, jest to słaby sygnał, co oznacza również, że ruch elementu wizualnego występuje bardzo często.

Jak obliczane jest skumulowane przesunięcie układu?

Google oblicza CLS strony, obliczając ułamek wpływu i ułamek odległości dla każdego nieoczekiwanego przesunięcia układu.

Ułamek wpływu CLS

Mierzy ilość miejsca zajmowanego przez niestabilny element w obszarze rzutni między dwiema klatkami.

Wzór do obliczenia frakcji wpływu dla CLS

Aby obliczyć wynik przesunięcia układu, potrzebujemy frakcji wpływu.

Jak obliczyć Impact Fraction dla CLS?

Graficzna reprezentacja pomoże Ci lepiej zrozumieć ułamki wpływu.

 Udział uderzenia = [Obszar obszaru uderzenia] / [Obszar rzutu] Udział uderzenia = [330 x 490] / [375 x 667] Udział uderzenia = [161700] / [250125] Udział uderzenia = 0,645

Ułamek odległości CLS

Jest to miara ilości miejsca, o jaką element strony przesunął się z pierwotnej pozycji do końcowej pozycji, która zasadniczo zmienia układ.

Aby uniknąć nadmiernych przypadków karania, przesuń duże elementy o niewielką wartość uwzględnioną przez wprowadzenie ułamka odległości.

Wzór do obliczenia ułamka odległości dla CLS

Jak obliczyć ułamek odległości dla CLS?

Reprezentacja graficzna pomoże Ci lepiej zrozumieć ułamek odległości.

Ułamek odległości = [Maks. Odległość przesunięcia] / [Wysokość ViewPort] Ułamek odległości = [120] / [667] Ułamek odległości = 0,179

Formuła do obliczenia wyniku Google CLS

Łączny wynik układu jest obliczany poprzez pomnożenie udziału uderzenia przez udział odległości:

 Skumulowane przesunięcie układu (CLS) = udział uderzenia x udział odległości

CLS = 0,645 x 0,179 CLS = 0,1154 .

Wynik CLS rośnie wraz ze wzrostem wpływu i odległości.

Zbiorcza zmiana układu z prostym przykładem.

Odwiedziłeś witrynę i zobaczyłeś coś ciekawego do przeczytania.

Idź dalej, aby kliknąć link.

Ale tuż przed kliknięciem linku, przesuwa się on na stronie internetowej o pół cala w dół, a Ty w końcu klikasz reklamę umieszczoną tuż nad nim.

Źródło:nitropack.io

Brzmi niesprawiedliwie, prawda?

To nieoczekiwana zmiana układu.

Oznacza to tylko, że zostaniesz przekierowany na jakąś niechcianą stronę docelową, z której musisz wrócić do oryginalnej strony internetowej.

Mamy też coś, co nazywamy oczekiwaną zmianą układu.

Dzieje się tak, gdy klikniesz coś na stronie internetowej i zmienia to bieżący układ strony.

Na przykład idziesz na bloga w poszukiwaniu określonej informacji.

Gdy tylko wprowadzisz nazwę tematu w pasku wyszukiwania, pobierze on konkretny wpis na blogu, w którym znajdziesz wymagane informacje lub wymyśli kilka wpisów na blogu związanych z tematem.

Źródło: nitropack.io

Jest to oczekiwany wynik ze strony internetowej i można go uznać za oczekiwaną zmianę układu.

Co powoduje problemy z CLS?

Według Google, giganta wyszukiwarek, istnieje 5 możliwych powodów skumulowanego przesunięcia układu :

Obrazy i filmy bez wymiarów

Zaleca się, aby zawsze określać szerokość i wysokość zdjęć i filmów.

Możesz także użyć pól współczynnika proporcji CSS, aby umożliwić przeglądarce przydzielenie odpowiedniej ilości miejsca na stronie internetowej podczas ładowania obrazu.

Reklamy, elementy umieszczone i iframe bez wymiarów

Rozmiary reklam mogą zwiększyć przychody dzięki wysokiemu CTR.

Może to jednak pogorszyć jakość doświadczenia użytkownika, przesuwając zawartość w dół strony.

Tę zmianę układu można złagodzić, rezerwując miejsce na boksy reklamowe, eliminując przesunięcia, rezerwując największy możliwy rozmiar boksu reklamowego lub wybierając najlepszy możliwy rozmiar boksu reklamowego na podstawie danych historycznych.

Treść wstrzykiwana dynamicznie

Unikaj wstawiania nowej treści nad istniejącą, chyba że jest to reakcja na interakcję użytkownika.

Zapewni to, że wszelkie zmiany układu, które wystąpią, będą zawsze oczekiwane, zamiast powodować nieoczekiwane przesuwanie się obrazu lub tekstu.

Czcionki internetowe powodujące FOIT/FOUT

Spróbuj użyć wartości font:display z niestandardowymi czcionkami, takimi jak auto, swap, block, fallback i opcjonalne, aby zapobiec niepotrzebnym przesunięciom układu.

Aby mieć pewność, że nie nastąpi przesunięcie układu, użyj font:display wraz z linkiem rel=preload.

Każdy element używający tej czcionki będzie ukryty, dopóki zasób czcionki nie zostanie w pełni pobrany, jest znany jako FOIT (Flash of invisible text).

Źródło nimacji: malthemilthers.com

Wyświetlanie czcionki rezerwowej w stosie czcionek do momentu załadowania niestandardowego jest znane jako FOUT (Flash tekstu bez stylu).

Czynności oczekujące na odpowiedź sieci przed aktualizacją DOM

Zawsze wybieraj animacje „transformacji” dla animacji właściwości, które powodują zmiany układu.

Jak reklamy wpływają na wynik Google CLS?

Aby poradzić sobie z reklamami, które powodują CLS, musisz nadać styl elementowi, w którym reklama ma się wyświetlać.

Dlatego, jeśli stylizujesz div, podział obrazu lub wideo w WordPressie lub dowolny element witryny z określonym pomiarem wysokości i szerokości, Twoja reklama będzie ograniczona tylko do wspomnianych wymiarów.

Jeśli element zawierający reklamę nie wyświetla reklamy, możesz ustawić ją w taki sposób, aby alternatywny baner reklamowy lub obraz zastępczy wypełnił wolne miejsce.

Ewentualnie reklama może wypełnić cały wiersz u góry kolumny w prawej lub lewej części strony w przypadku niektórych układów.

Jeśli strona się nie pojawi, nie nastąpi zmiana i nie będzie to miało żadnego znaczenia na telefonie komórkowym lub komputerze stacjonarnym.

Pamiętaj jednak, że zależy to od układu motywu i musisz go przetestować, jeśli wystąpi problem z zasobami reklamowymi.

Jak CLS może przesuwać się podczas tworzenia stron internetowych?

Google CLS może prześlizgnąć się przez etap rozwoju.

Oto, co może się wydarzyć.

Wiele zasobów potrzebnych do renderowania strony internetowej jest ładowanych do pamięci podręcznej przeglądarki.

Następnym razem, gdy programista odwiedzi opracowywaną stronę, nie zauważy zmiany układu, ponieważ elementy strony są już pobrane.

Dlatego zaleca się wykonanie pomiaru w terenie lub w laboratorium.

Test skumulowanego przesunięcia układu

Skumulowane metryki wydajności zmiany układu strony można mierzyć na jeden z następujących sposobów:

Narzędzia terenowe

W terenie: na rzeczywistych użytkownikach faktycznie wchodzących w interakcję ze stroną. Można go zmierzyć za pomocą następujących narzędzi terenowych:

Raport z doświadczeń użytkowników Chrome

Dostarcza metryki doświadczenia użytkownika, pokazujące, jak użytkownicy przeglądarki Chrome w rzeczywistym świecie korzystają z popularnych miejsc w sieci.

Statystyki PageSpeed

To narzędzie analizuje zawartość strony internetowej i generuje sugestie, aby ta strona była szybsza niż wcześniej.

Search Console (raport Podstawowe wskaźniki internetowe)

Search Console pokazuje, jak działają Twoje strony na podstawie rzeczywistych danych o użytkowaniu (czasami nazywanych danymi pola).

Narzędzia laboratoryjne

W laboratorium: użycie narzędzi do symulacji ładowania strony w kontrolowanym środowisku można zmierzyć za pomocą następujących narzędzi laboratoryjnych:

Narzędzia programistyczne Chrome

Chrome DevTools może pomóc Ci edytować strony w locie i szybko diagnozować problemy, co ostatecznie umożliwia szybsze tworzenie lepszych stron internetowych.

Latarnia morska

LightHouse to zautomatyzowane narzędzie typu open source do poprawy jakości stron internetowych.

Możesz go uruchomić na dowolnej stronie internetowej, publicznej lub wymagającej uwierzytelnienia.

Posiada audyty wydajności, dostępności, progresywnych aplikacji internetowych, SEO i nie tylko.

Test strony internetowej

Przeprowadź bezpłatny test szybkości witryny z całego świata przy użyciu prawdziwych przeglądarek przy szybkości połączenia konsumenckiego ze szczegółowymi zaleceniami dotyczącymi optymalizacji.

Według web.dev ; Uwaga: narzędzia laboratoryjne zwykle ładują strony w środowisku syntetycznym i mierzą zmiany układu tylko podczas ładowania strony.

W rezultacie wartości CLS zgłaszane przez narzędzia laboratoryjne dla danej strony mogą być mniejsze niż rzeczywiste użytkownicy w tej dziedzinie.

Szybkie narzędzia do sprawdzania skumulowanego przesunięcia układu

1. CLS w formacie GIF od Defaced Tool autorstwa Chrisa Johnsona do identyfikacji problematycznego LS.

2. Kalkulator skumulowanego przesunięcia układu

Błąd w obliczeniach CLS

Google otrzymało informację zwrotną, że metryka CLS jest niewystarczająca do mierzenia stron internetowych, które są otwarte przez długi czas, co karze je niższymi wynikami.

Google sprawdził trzy rozwiązania dotyczące aktualizacji sposobu oceniania CLS, więc nie ma się czego obawiać, że wyniki CLS pogorszą się z powodu tej zmiany.

Okna sesji do pomiaru CLS

Google zdecydowało się na podejście do okna sesji, aby zmierzyć CLS.

Pomiar elementów strony jest mierzony w oknach sesji, które odpowiadają różnym częściom strony internetowej, do których użytkownik dociera podczas przewijania strony.

Całkowite wyniki dla każdego okna sesji to skumulowane przesunięcie układu, całkowite przesunięcie całej strony.

3% stron internetowych z nieskończonym przewijaniem lub z modułami obsługi interfejsu użytkownika, które wolno reagują na interakcję użytkownika, uzyska dobrą ocenę.

Aktualizacja sprawia, że ​​wyniki CLS są dokładniejsze

Jest to korzyść dla wydawców, ponieważ nowy system punktacji staje się bardziej sprawiedliwy, szczególnie w przypadku stron internetowych, które są otwarte przez długi czas lub wykorzystują nieskończone przewijanie i były z tego powodu niesprawiedliwie oceniane.

Ponieważ metryki Core Web Vitals staną się czynnikiem rankingowym w maju 2021 r., jest to ważna zmiana na ostatnią chwilę.

Wniosek

Zrozumienie skumulowanego przesunięcia układu (CLS) pomoże Ci zapewnić lepsze wrażenia użytkownika w nadchodzących dniach.

Ponieważ metryka jest częścią Core Web Vitals mających na celu poprawę UX i ma stać się sygnałem rankingowym w 2021 roku, ważne jest, aby zrozumieć ich znaczenie i wpływ na Twoją witrynę.