Jak wyeliminować cumulative layout shift (CLS) w WordPressie

W pierwszym artykule z serii dowiesz się czym jest CLS. Cumulative Layout Shift to jedna z metryk, które wchodzą w skład Core Web Vitals. Czym ona dokładnie jest i jak o nią dbać, gdy prowadzisz stronę na WordPressie? Tego dowiesz się w tym artykule.

Czym jest Cumulative Layout Shift?

Cumulative Layout Shift (Zbiorcze Przesunięcie Układu) mierzy stabilność wizualną strony. W tym celu uwzględnia, jak wiele wystąpiło na niej nieoczekiwanych (czyli takich, które nie zostały zainicjowane przez użytkownika) zmian układu.

Jak podaje Google, Cumulative Layout Shift powinien wedle załączonej skali osiągać wartość przynajmniej 0,1:

Niższy wynik nie jest jeszcze taki zły, o ile nie spadnie on poniżej wartości 0,25.

Do powstawania Zbiorczego Przesunięcia Układu przyczyniają się konkretne czynniki. Przyjrzyjmy się im bliżej. Jeśli odpowiednio je zaadresujesz, poprawisz dzięki temu wartość CLS.

Zdjęcia i materiały video bez określonych wymiarów

Obrazy i filmy bez wymiarów są częstą przyczyną przesunięcia układu strony. Jeśli samodzielnie nie określisz ich szerokości i wysokości, przeglądarka nie będzie wiedzieć, ile miejsca zarezerwować podczas ładowania takich elementów. Istnieje duża szansa, że owa przestrzeń nie będzie wystarczająca. W rezultacie, gdy takie pliki zostaną w pełni załadowane, zajmą więcej miejsca, niż przewidywała strona. Z tego powodu inna zawartość, która znajduje się w pobliżu, zostanie przesunięta.

Aby zaradzić temu problemowi wystarczy po prostu zawsze określać wymiary plików graficznych i video. W przypadku WordPressa na pewno znajdziesz wiele rozszerzeń, które ułatwią to zadanie, jak choćby Specify Missing Image Dimensions.

FOIT (Flash of Invisible Text) i FOUT (Flash of Unstyled Text)

Do zmiany układu strony internetowej często przyczyniają się zastosowane czcionki. Wiele zależy od tego, jak dojdzie do ich załadowania.

Flash of Invisible Text ma miejsce, gdy przeglądarka nie otrzymuje powiadomienia od serwera na temat zastosowanej czcionki. Jak sama nazwa zjawiska wskazuje, tekst jest wtedy niewidzialny. Gdy w końcu odpowiednie informacje zostaną załadowane, treści szybko zmienią swój rozmiar, co doprowadzi do przesunięcia zawartości.

Flash of Unstyled Text zachodzi z podobnych powodów. Zjawisko to przynosi mniej problemów, gdyż w jego przypadku tekst jest załadowany, jednak nie ma on właściwej stylistyki.

Aby zaradzić temu problemowi należy zastosować tzw. preloading czcionek. Funkcję taką można szybko zaimplementować za pomocą rozszerzenia WP Rocket.

Akcje oczekujące odpowiedzi od sieci przed zaktualizowaniem DOM-u (Document Object Model)

Animacje i dynamiczne treści jak banery, reklamy czy feedy również mogą powodować przesunięcie layoutu. Wynika to oczywiście z zarezerwowania niewystarczającej ilości miejsca.

W przypadku takich elementów warto dlatego z góry zaplanować, jaka przestrzeń będzie przez nie wymagana.

WordPress i Cumulative Layout Shift

Jeśli zadbasz o CLS na swojej stronie, bardzo poprawi to jej użyteczność. Na szczęście w przypadku WordPressa w tym zadaniu mogą Ci pomóc różne rozszerzenia, więc nie wahaj się z nich korzystać.

Artykuły, które mogą cię zainteresować

• First Input Delay (FID)
• Largest Contentful Paint (LCP)
• Core Web Vitals