W ciągu kilku miesięcy wiodąca brytyjska witryna z wiadomościami poprawiła CLS 75. percentyl o 250% (z 0,25 do 0,1).
Wyzwanie dotyczące stabilności wizualnej
Przesunięcia układu mogą być bardzo uciążliwe. W Telegraph Media Group (TMG) stabilność wizualna jest szczególnie ważna, ponieważ czytelnicy przeważnie korzystają z naszych aplikacji. Jeśli układ strony zmieni się podczas czytania artykułu, czytelnik prawdopodobnie straci swoje miejsce. Takie doświadczenia mogą być frustrujące i rozpraszające.
Z perspektywy inżynierii zadbanie o to, aby strony nie przesuwały się i nie zakłócały czytnika, może być trudne, zwłaszcza gdy obszary aplikacji są wczytywane asynchronicznie i dynamiczne dodawane do strony.
W TMG kilka zespołów udostępnia kod po stronie klienta:
- Inżynieria podstawowa. Wdrażanie rozwiązań innych firm w obszarach takich jak polecanie treści i komentowanie.
- Marketing. Przeprowadzanie testów A/B w celu oceny sposobu interakcji czytelników z nowymi funkcjami lub zmianami.
- Reklamy. Zarządzanie żądaniami reklam i wstępnym ustalaniem stawek.
- Wymagania redakcyjne. Osadzanie kodu w artykułach, takich jak tweety czy filmy, oraz niestandardowe widżety (np. narzędzie do śledzenia przypadków koronawirusa).
Dopilnowanie, aby żaden z tych zespołów nie powodował szarpania układu strony, może być trudne. Korzystając z danych Skumulowane przesunięcie układu, aby zmierzyć, jak często występują one na kontach naszych czytelników, zespoły miały lepszy wgląd w wygodę użytkowników i określiły jasny cel. W rezultacie nasza 75-percentylowa wartość CLS wzrosła z 0,25 do 0,1, a wskaźnik z 57% do 72% zwiększył się z 57% do 72%.
250%
75. percentyl poprawy CLS
15%
Więcej użytkowników z dobrym wynikiem CLS
Pierwsze kroki
Dzięki panelom CrUX udało nam się ustalić, że nasze strony zmieniają się bardziej, niż oczekiwaliśmy.

Chcieliśmy, aby co najmniej 75% czytelników było pozytywnych, więc zaczęliśmy określać przyczyny niestabilności układu.
Jak mierzyliśmy przesunięcia układu
Użyliśmy kombinacji narzędzi Chrome DevTools i WebPageTest, aby pomóc nam zidentyfikować przyczynę zmiany układu. W Narzędziach deweloperskich użyliśmy sekcji „Jakość” na karcie Skuteczność, aby wyróżnić poszczególne przypadki zmiany układu i ich udział w ogólnym wyniku.

Narzędzie WebPageTest wskazuje, gdzie w widoku osi czasu następuje przesunięcie układu, gdy wybrana jest opcja „Podświetl przesunięcia układu”.

Po przejrzeniu każdej zmiany w naszych najczęściej odwiedzanych szablonach opracowaliśmy listę pomysłów na usprawnienia,
Ograniczenie przesunięć układu
Skupiliśmy się na 4 obszarach, w których możemy ograniczyć przesunięcia układu: – reklam, – obrazów, – nagłówków, – umieszczonych elementów
Reklamy
Reklamy wczytują się po pierwszym wyrenderowaniu przez JavaScript. Niektóre wczytane kontenery nie miały żadnej zarezerwowanej wysokości.

Chociaż nie znamy dokładnej wysokości, możemy zarezerwować przestrzeń, używając najpopularniejszego rozmiaru reklamy wczytanego w boksie.

W niektórych przypadkach popełniliśmy błąd dotyczący średniej wysokości reklamy. W przypadku czytników tabletów gniazdo zwijało się.

Sprawdziliśmy ponownie boks i dostosowaliśmy jego wysokość, tak aby korzystał z najpopularniejszego rozmiaru.

zdjęcia;
Wiele obrazów w witrynie jest leniwie ładowanych i ma zarezerwowaną dla nich przestrzeń.

Jednak obrazy w tekście u góry artykułów nie miały zarezerwowanego miejsca w kontenerze ani powiązane z tagami atrybuty szerokości i wysokości. Spowodowało to przesunięcie układu podczas wczytywania.

Wystarczyło dodać do obrazów atrybuty szerokości i wysokości, aby zapewnić, że układ się nie zmieni.

Nagłówek
Nagłówek znajdował się pod treścią w znacznikach i był u góry za pomocą CSS. Początkowo chcieliśmy potraktować priorytetowo wczytywanie treści przed rozpoczęciem nawigacji, ale spowodowało to chwilowe przesunięcie strony.

Przeniesienie nagłówka na górę znacznika umożliwiło wyrenderowanie strony bez tego przesunięcia.

Umieszczanie na stronie
Niektóre elementy często umieszczone na stronie mają zdefiniowany współczynnik proporcji. np. filmy w YouTube. Podczas ładowania odtwarzacza pobieramy z YouTube miniaturę i używamy jej jako obiektu zastępczego na czas wczytywania filmu.

Pomiar wpływu
Mogliśmy dość łatwo zmierzyć wpływ na poziom funkcji, korzystając z narzędzi wspomnianych na początku artykułu. Chcieliśmy jednak mierzyć CLS zarówno na poziomie szablonu, jak i na poziomie witryny. Syntetycznie zastosowaliśmy technologię SpeedCurve do weryfikacji zmian zarówno na etapie przedprodukcyjnym, jak i produkcyjnym.

Możemy wtedy zweryfikować wyniki w naszych danych RUM (dostarczanych przez mPulse), gdy kod osiągnie produkcję.

Sprawdzanie danych RUM daje nam pewność, że wprowadzane zmiany mają pozytywny wpływ na naszych czytelników.
Ostatnie analizy dotyczą danych RUM zbieranych przez Google. Jest to szczególnie ważne, ponieważ wkrótce będą wpływać na ranking strony. Na początek użyliśmy raportu na temat użytkowania Chrome, który zawiera miesięczne dane na poziomie źródła dostępne w panelu CrUX oraz wysyłanie zapytań do BigQuery w celu pobrania historycznych danych P75. Dzięki temu z łatwością zauważyliśmy, że w przypadku całego ruchu mierzonego przez CrUX nasza wartość CLS w przypadku 75 centyla wzrosła o 250% z 0,25 do 0,1, a wskaźnik przekazywania wzrósł z 57% do 72%.


Możemy też skorzystać z interfejsu Chrome UX Report API i utworzyć kilka paneli wewnętrznych podzielonych na szablony.

Unikanie regresji CLS
Ważnym aspektem poprawiania skuteczności jest unikanie spadków wydajności. Utworzyliśmy podstawowe budżety skuteczności dla naszych kluczowych danych i uwzględniliśmy w nich CLS.

Jeśli test przekroczy budżet, wyśle wiadomość na kanał Slacka, aby umożliwić nam zbadanie przyczyny. Konfigurujemy też raporty tygodniowe, dzięki którym nawet jeśli szablony pozostaną w budżecie, będziemy wiedzieć o wszelkich zmianach, które miały negatywny wpływ.
Planujemy też rozszerzyć budżety, aby wykorzystywały dane RUM oraz dane syntetyczne. mPulse będzie używać mPulse zarówno do ustawiania alertów statycznych, jak i potencjalnie wykrywania anomalii, co uświadomi nas o nietypowych zmianach.
Dlatego ważne jest, aby podchodzić do nowych funkcji z myślą o CLS. Wiele zmian, o których wspomniałem, dotyczy tych, które musieliśmy poprawić po udostępnieniu czytelnikom. Stabilność układu będzie uwzględniana podczas projektowania rozwiązań wszystkich nowych funkcji, dzięki czemu unikniesz nieoczekiwanych przesunięć układu już od samego początku.
Podsumowanie
Wprowadzone do tej pory ulepszenia były dość łatwe do wdrożenia i miały znaczny wpływ. Wprowadzenie wielu zmian opisanych w tym artykule nie zajęło dużo czasu. Zastosowano je we wszystkich najczęściej używanych szablonach. Dzięki temu miały one bardzo pozytywny wpływ na naszych czytelników.
Są jeszcze obszary witryny, które wymagają ulepszenia. Szukamy sposobów, w jakie moglibyśmy zrobić więcej funkcji logiki po stronie klienta po stronie serwera, co pozwoli nam jeszcze bardziej ulepszyć CLS. Będziemy śledzić i monitorować nasze dane, by stale je ulepszać i zapewniać użytkownikom jak najlepsze wrażenia.