Skumulowane przesunięcie układu (CLS)

Kumulatywne przesunięcie układu mierzy niestabilność wizualną, określając, ile widocznej treści niespodziewanie przesuwa się w trakcie życia strony. Jest to jeden z podstawowych wskaźników internetowych Google i, w przeciwieństwie do wskaźników ładowania i responsywności, jest to wynik bezjednostkowy, a nie czas trwania, obliczany na podstawie proporcji obszaru widoku, na który przesunięcie miało wpływ, oraz odległości, na jaką przesunięta została treść. Opublikowany przez Google próg uznaje wartość 0.1 lub mniej za dobrą w siedemdziesiątym piątym percentylu rzeczywistych doświadczeń użytkownika.

Rejestrowane przez nią zachowanie jest znane każdemu, kto próbował kliknąć link, a nad nim wyświetlała się reklama, która przesuwała stronę w dół, lub zaczął czytać akapit, który przeskakiwał po zmianie czcionki internetowej. Poza irytacją, praktyczną konsekwencją są błędne kliknięcia: treść przesuwająca się między momentem, w którym użytkownik decyduje się kliknąć, a momentem, w którym to robi, prowadzi do niewłaściwej akcji, co w interfejsie handlowym lub bankowym może oznaczać błędny zakup, błędne usunięcie lub niezamierzoną nawigację.

Przyczyny są dobrze udokumentowane i zazwyczaj łatwo im zapobiec. Obrazy i filmy bez określonych wymiarów powodują reflow po załadowaniu, ponieważ przeglądarka nie może z wyprzedzeniem zarezerwować odpowiedniej przestrzeni. Reklamy, osadzone elementy i ramki iframe wstawione do przepływu bez zarezerwowanego kontenera spychają treść w dół. Czcionki internetowe zamieniające się z zapasowego na inne metryki reflowują tekst. Treści wstrzykiwane dynamicznie nad istniejącą treść, takie jak banery, powiadomienia i powiadomienia o zgodzie, przesuwają wszystko poniżej. Animacje, które zmieniają właściwości układu zamiast transformacji i krycia, wyzwalają reflow w każdej klatce.

Odpowiednie poprawki należą do najtańszych dostępnych w branży wydajnościowej. Ustawienie atrybutów szerokości i wysokości lub proporcji obrazu na nośniku rezerwuje miejsce przed załadowaniem. Przydzielenie stałych kontenerów dla reklam i elementów osadzonych zapobiega przemieszczaniu treści podczas wstawiania. Dopasowanie metryk czcionek zapasowych do czcionki internetowej oraz stosowanie odpowiednich strategii ładowania czcionek zmniejsza częstotliwość reflowu podczas zamiany. Wstawianie dynamicznej zawartości poniżej linii zagięcia lub w nakładkach, a nie nad istniejącą treścią, pozwala uniknąć najbardziej uciążliwej kategorii. Animowanie tylko transformacji i krycia zapobiega ruchowi poza ścieżką układu.

Pomiar wymaga skupienia się na sesji, a nie tylko na ładowaniu strony. Metryka kumuluje się przez cały cykl życia strony, uwzględniając przesunięcia występujące podczas przewijania i interakcji. Oznacza to, że strona, która dobrze wypada na początku ładowania, może nadal uzyskać niską ocenę ogólną z powodu treści ładowanych leniwie, które pojawiają się bez zarezerwowanego miejsca. Przesunięcia występujące w krótkim czasie po interakcji użytkownika są pomijane, ponieważ oczekiwane jest, że treść będzie się poruszać w odpowiedzi na celowe działanie, a nie będzie to uciążliwe.

Powiadomienia o zgodach i banery promocyjne zasługują na szczególną uwagę, ponieważ są wstawiane późno, zazwyczaj zarządzane poza głównym procesem rozwoju i często zastępują treść. Baner, który pojawia się u góry dokumentu po renderowaniu, przesuwa wszystko w dół dokładnie w momencie, gdy użytkownik zaczyna czytać lub sięga po link. Prezentowanie takich elementów jako nakładek, które nie biorą udziału w układzie, lub rezerwowanie dla nich miejsca przed renderowaniem, rozwiązuje problem bez ich usuwania. Ponieważ te komponenty są często konfigurowane przez zespoły marketingowe lub prawne za pomocą narzędzi innych firm, rozwiązanie zazwyczaj wymaga konsultacji między funkcjami, a nie tylko zmiany kodu.

Ponieważ przyczyny zazwyczaj tkwią w szablonach, integracjach reklamowych i osadzeniach stron trzecich, a nie w pojedynczym komponencie, naprawa zazwyczaj wymaga koordynacji między zespołami odpowiedzialnymi za każdy z nich. W praktyce jest to standard. wydajność sieci praca i jest to jeden z obszarów, w którym połączenie z wynikami komercyjnymi jest najbardziej bezpośrednie, ponieważ niestabilność układu na stronie produktu lub płatności powoduje błędne kliknięcia i porzucenia, co Audyt UX ujawnią się jako błędy w użytkowaniu, bez konieczności identyfikowania ich technicznej przyczyny.