Optymalizacja CLS o 0,2 spowodowała wzrost liczby wyświetleń strony o 15%, wydłużenie czasu trwania sesji o 13% i spadek współczynnika odrzuceń o 1,72 punktu procentowego.
Centrum pomocy Yahoo! JAPAN to jedna z największych firm medialnych w Japonii, która generuje ponad 79 miliardów wyświetleń stron miesięcznie. Platforma wiadomości Yahoo! JAPAN News odnotowuje ponad 22 miliardy wyświetleń stron miesięcznie. Zespół inżynierów zajmuje się tym, by użytkownicy byli zadowoleni z ich wrażeń.
Dzięki ciągłemu monitorowaniu podstawowych wskaźników internetowych firma skorelowała poprawiony wynik skumulowanego przesunięcia układu (CLS) w witrynie z 15-procentowym wzrostem liczby wyświetleń strony na sesję i 13% dłuższym czasem trwania sesji.
0,2
Poprawa CLS
15,1%
Więcej wyświetleń strony na sesję
13,3%
Dłuższy czas trwania sesji
Niespodziewane poruszanie się zawartości stron powoduje przypadkowe kliknięcia, dezorientację użytkowników, a w rezultacie frustrację użytkowników. Sfrustrowani użytkownicy zwykle nie zostają w witrynie zbyt długo. Aby zadbać o zadowolenie użytkowników, układ strony powinien być taki sam przez cały cykl życia użytkownika. W przypadku usługi Yahoo! JAPAN. Ta zmiana miała istotny pozytywny wpływ na kluczowe wskaźniki zaangażowania biznesowe.
Szczegóły techniczne dotyczące udoskonaleń CLS znajdziesz w Centrum pomocy Yahoo! JAPAN.
Identyfikowanie problemu
Monitorowanie podstawowych wskaźników internetowych, w tym CLS, ma kluczowe znaczenie w wykrywaniu problemów i identyfikowaniu ich źródeł. Na stronie Yahoo! JAPAN News w Search Console zawiera obszerny przegląd grup stron z problemami z wydajnością, a narzędzie Lighthouse pomogło znaleźć możliwości poprawy jakości stron na poszczególnych stronach. Korzystając z tych narzędzi, odkryła, że strona z informacjami o artykule ma niską wartość CLS.
Pamiętaj o skumulowanej części skumulowanego przesunięcia układu – wynik jest określany przez cały cykl życia strony. W świecie rzeczywistym wynik może obejmować zmiany wynikające z interakcji użytkownika, takich jak przewijanie strony czy kliknięcie przycisku. Aby zebrać wyniki CLS z danych pól, zespół zintegrował raportowanie biblioteki JavaScript web-vitals.
Zespół skorzystał z Narzędzi deweloperskich w Chrome, aby określić, które elementy zmieniały układ strony. Regiony przesunięcia układu w Narzędziach deweloperskich wizualizują elementy, które mają wpływ na CLS, podświetlając je niebieskim prostokątem po każdym przesunięciu układu.
Okazało się, że zmiana układu nastąpiła po wczytaniu banera głównego u góry artykułu przed pierwszym wyświetleniem.
W powyższym przykładzie po zakończeniu ładowania obrazu tekst jest przesuwany w dół (zmiana pozycji jest oznaczona czerwoną linią).
Poprawianie CLS obrazów
W przypadku obrazów o stałym rozmiarze można zapobiec przesunięciu układu, określając atrybuty width i height w elemencie img oraz używając właściwości CSS aspect-ratio dostępnej w nowoczesnych przeglądarkach. Pamiętaj jednak, że Yahoo! JAPAN News.
Zespół wykorzystał pudełka współczynnika proporcji, czyli metodę, która wykorzystuje znaczniki do rezerwowania miejsca na stronie przed wczytaniem obrazu. Ta metoda wymaga wcześniejszego znajomości współczynnika proporcji obrazu, który udało się uzyskać z interfejsu API backendu.
Wyniki
Liczba adresów URL o niskiej skuteczności w Search Console spadła o 98%, a CLS w danych laboratoryjnych zmalał z około 0,2 do 0. Co ważniejsze, odnotowaliśmy kilka skorelowanych poprawy wskaźników biznesowych.
Gdy Yahoo! JAPAN News porównał wskaźniki zaangażowania użytkowników przed optymalizacją CLS i po jej zakończeniu:
15,1%
Więcej wyświetleń strony na sesję
13,3%
Dłuższy czas trwania sesji
1,72%*
Niższy współczynnik odrzuceń (*punkty procentowe)
Dzięki poprawie CLS i innych podstawowych wskaźników internetowych Yahoo! JAPAN News ma też etykietę „Szybka strona” w menu kontekstowym Chrome na Androida.
Zmiany układu są frustrujące i zniechęcają użytkowników do czytania kolejnych stron, ale można to poprawić, używając odpowiednich narzędzi, identyfikując problemy i stosując sprawdzone metody. Poprawa CLS to szansa na poprawę wyników firmy.
Więcej informacji znajdziesz w Centrum pomocy Yahoo! Japan.