Jak poprawić skumulowane przesunięcie układu (CLS) dla WordPress?

Większość stron internetowych jest budowana tak, aby można było uzyskać do nich dostęp z różnych urządzeń o różnych rozmiarach ekranu i rozdzielczościach. Dlatego utrzymanie tego samego doświadczenia na wielu platformach może być trudne. WordPress ułatwia wieloplatformowe projektowanie stron internetowych. Jednak w każdej formie tworzenia oprogramowania budowanie uniwersalnego rozwiązania może być skomplikowane.

W przypadku tworzenia stron internetowych użytkownicy przechodzący od strony do strony w witrynie mogą czasami doświadczać tzw. skumulowanego przesunięcia układu (CLS). To sytuacja, w której elementy wizualne strony ulegają nagłej zmianie lub ładują się nieprawidłowo. Nagle tekst staje się większy lub mniejszy, obrazy zmieniają swoje położenie lub zmienia się cały układ strony.

Dlaczego tak się dzieje i jak możemy to naprawić? W tym przewodniku dowiemy się, czym jest CLS i jak możesz temu zapobiec w swojej witrynie.

Co to jest skumulowane przesunięcie układu?

Najczęstszą dostrzegalną formą CLS jest opóźnienie w ładowaniu obrazów. Na złożonych witrynach internetowych, które zawierają dużo elementów wizualnych, często można zauważyć, że tekst ładuje się przed elementami multimedialnymi. Ponadto układ strony internetowej zmienia się, gdy wszystkie elementy wizualne zostaną ostatecznie załadowane. Te incydenty zdarzają się niezależnie od tego, czy przewijasz, czy nie.

Gdy strona internetowa ma wysoki wynik CLS, trudno jest określić, kiedy została w pełni załadowana. Im bardziej skomplikowana i ciężka medialnie strona internetowa, tym większe prawdopodobieństwo zmiany układu strony.

Na przykład proste strony internetowe w wyszukiwarkach z bardzo małą liczbą elementów wizualnych mają niewielki lub żaden CLS. Nie oznacza to jednak, że wszystkie złożone lub bogate w funkcje witryny internetowe mają wysokie wyniki CLS. Na przykład sklep internetowy Amazon jest pełen widżetów, obrazów i linków, ale ładuje się szybko, bez widocznych zmian.

Co powoduje skumulowane przesunięcie układu?

CLS występuje zwykle, ponieważ przeglądarki internetowe ładują elementy sekwencyjnie w różnym czasie. Dodatkowo możesz mieć w swojej witrynie elementy multimedialne o nieznanych właściwościach (takich jak wymiary).

W przypadkach, gdy nie określisz szerokości lub wysokości elementu multimedialnego (takiego jak obraz), Twoja przeglądarka internetowa nie będzie wiedziała, ile miejsca przydzielić, dopóki strona internetowa nie załaduje się całkowicie. Stąd drastyczna zmiana układu. Podsumowując, głównym powodem większości CLS jest nieefektywne ładowanie.

Ważne jest, aby pamiętać, że nawet jeśli nie zauważysz zmiany układu w czasie rzeczywistym, niekoniecznie oznacza to, że nie ma żadnych zmian. Przeglądarki internetowe często buforują dane witryn internetowych, dzięki czemu łatwiej jest wczytać strony internetowe, gdy je ponownie odwiedzasz. Mierzenie wyniku CLS to najlepszy sposób na ustalenie, czy Twoja witryna ulega znacznej zmianie układu.

Jak zmierzyć wynik CLS swojej witryny?

Wynik CLS oznacza liczbę przesunięć układu strony internetowej przez cały okres jej życia. Wynik CLS możemy uzyskać z tzw. okna sesji. Okno sesji opisuje liczbę przesunięć układu, które występują w ciągu pięciu sekund. Aby obliczyć wynik CLS, musimy pomnożyć ułamek odległości przez ułamek wpływu:

 Wynik CLS = udział odległości x udział uderzenia

Frakcja uderzenia opisuje, jak bardzo niestabilny element wpływa na dostrzegalny obszar między dwiema klatkami. Ułamek odległości opisuje wielkość przesunięcia elementu między klatkami. Wynik CLS wynoszący 0,10 i mniej (0,0–0,10) jest świetny. Wynik CLS powyżej 0,10, ale poniżej 0,25 (0,10-0,25) jest umiarkowany i wymaga poprawy, podczas gdy wynik CLS powyżej 0,25 (0,25<) jest słaby.

Te koncepcje mogą być trochę trudne do zrozumienia. Na szczęście nie musisz ręcznie obliczać CLS swojej witryny. Istnieje wiele narzędzi online (i offline), które mogą obliczyć dla Ciebie wynik CLS.

Obecnie najpopularniejszym sposobem mierzenia CLS Twojej strony internetowej jest Google PageSpeed ​​Insights. Pozwala ustalić statystyki dotyczące komfortu użytkowania witryny zarówno w wersji mobilnej, jak i stacjonarnej.

Inne narzędzia CLS obejmują:

• GT Metrix
• Debuger CLS Google Web Vitals
• Rozszerzenie Google Chrome Web Vitals
• Latarnia Google
• Test strony internetowej

Ponieważ Google PageSpeed ​​Insights jest najbardziej znany, użyjemy go w naszym przykładzie.

Aby zmierzyć swój wynik CLS, przejdź do strony głównej analizy PageSpeed, wstaw adres URL swojej strony internetowej w górnym polu tekstowym, a następnie kliknij przycisk Analizuj . W zależności od popularności Twojej witryny i szybkości internetu, PageSpeed ​​Insights powinien dostarczyć Ci raport w ciągu kilku sekund.

Aby znaleźć swój wynik CLS, przewiń w dół do sekcji Core Web Vitals Assessment.

Jeśli użyjemy strony głównej Amazona jako przykładu, bardziej niż prawdopodobne jest, że uzyskamy wynik CLS poniżej 0,10. Podczas naszych testów stwierdziliśmy, że witryna mobilna uzyskała wynik CLS równy 0,01, podczas gdy wersja komputerowa miała wynik 0,05.

Ale jak to robią, gdy ich witryna jest tak obciążona zasobami? Przyjrzyjmy się, jak możesz również uzyskać wynik CLS podobny do Amazona.

Jak zoptymalizować CLS

Najlepszym sposobem sprawdzenia, które elementy powodują wysoki wynik CLS, jest skorzystanie z debugera CLS Google Web Vitals. Pokazuje GIF wszystkich zmieniających się funkcji w Twojej witrynie. Reklamy i pliki multimedialne są najczęstszymi winowajcami wysokich wyników CLS. Inne przyczyny mogą obejmować czcionki, asynchroniczny CSS, animacje i elementy iframe. Aby poprawić swój wynik CLS, musisz zoptymalizować te elementy.

Zapewnienie, że Twoja witryna ma godny szacunku CLS, jest tak samo ważne, jak zapewnienie silnego lokalnego SEO i odpowiedniej treści. Wyszukiwarka Google ma tendencję do preferowania witryn, które zapewniają doskonałe wrażenia użytkownika i są dobrze zoptymalizowane.

Aby to zrobić, oto kilka kroków, aby poprawić wynik CLS Twojej witryny:

Dodaj właściwości wymiarów do wszystkich plików multimedialnych

Jeśli prześlesz pliki multimedialne o nieznanych właściwościach, zwiększy to ryzyko zmiany układu, ponieważ Twoja przeglądarka będzie musiała określić rozmiar obrazu i określić orientację układu po załadowaniu. Takie sytuacje mają większą szansę na wystąpienie w przypadku dużych obrazów i plików o wysokiej rozdzielczości.

Przesyłając pliki multimedialne z brakującymi właściwościami rozmiaru, włożyłeś zbyt dużo pracy w ręce przeglądarki internetowej. Musisz dodać właściwości wysokości i szerokości dla każdego przesłanego pliku multimediów wizualnych. Możesz to zrobić, wyświetlając kod źródłowy i ręcznie dodając właściwości szerokości i wysokości.

Upewnij się, że czcionki są ładowane lokalnie

Tekst musi być widoczny podczas ładowania czcionek. Pierwszym krokiem do osiągnięcia tego celu jest upewnienie się, że czcionki są ładowane lokalnie, a nie pobierane z witryn z czcionkami innych firm.

Jeśli zauważysz, że twoje czcionki są pobierane z witryny innej firmy, możesz użyć wtyczki, takiej jak OMGF, aby hostować je lokalnie i ładować je szybciej. Nie tylko poprawi to Twój wynik CLS, ale jest także krokiem w kierunku projektowania przyjaznego dla środowiska.

Unikaj FOIT i FOUT

Błysk niewidocznego tekstu (FOIT) występuje, gdy nie określisz czcionki zastępczej. Podczas gdy Twoja przeglądarka internetowa próbuje załadować Twoją czcionkę lub znaleźć alternatywę, użytkownikom zostanie wyświetlona pusta przestrzeń, w której powinien znajdować się tekst.

Podczas flashowania tekstu bez stylu (FOUT) będzie wyświetlana domyślna czcionka zastępcza przeglądarki internetowej, dopóki nie będzie można załadować określonej czcionki. Aby to naprawić, możesz dodać wyświetlanie czcionki właściwości: swap .

Jeśli kiedykolwiek pobierałeś czcionki z Google, zauważysz, że dodaje ten tag na końcu każdego adresu URL. Najłatwiejszym sposobem samodzielnego dodania tej właściwości jest użycie wtyczki Swap Google Fonts Display na WP.

Należy jednak pamiętać, że ta wtyczka działa tylko z czcionkami Google i automatycznie dołącza właściwość wymiany wyświetlania do tych adresów URL. Jeśli przechowujesz czcionki lokalnie, możesz użyć wtyczki String Locator, aby znaleźć wszystkie pliki czcionek i je zmienić. Będziesz musiał otworzyć arkusz stylów czcionek w WP i zmodyfikować go.

Alternatywnie możesz użyć wtyczek buforujących, na przykład takich, które automatycznie zoptymalizują czcionki, dodając właściwość zamiany czcionek.

Wstępnie ładuj czcionki

Aby upewnić się, że przechowujesz czcionki lokalnie, możesz je wstępnie załadować za pomocą wtyczek, takich jak:

• Rakieta WP
• Wskazówki dotyczące zasobów przed*
• Sprawy

Jeśli nie możesz sobie pozwolić na korzystanie z tych wtyczek, możesz wstępnie załadować czcionki, edytując plik header.php. Tylko upewnij się, że dokładnie przetestowałeś swoją witrynę po wstępnym załadowaniu czcionek. Wstępne ładowanie zbyt wielu czcionek może zaszkodzić Twojej witrynie. Tak jak w przypadku wszelkich większych możliwości backendowych, sugerujemy wcześniejsze wykonanie kopii zapasowej witryny WordPress.

Wyłącz optymalizację dostarczania CSS

Jeśli używasz WP Rocket do optymalizacji dostarczania CSS lub ładowania CSS asynchronicznie za pomocą LiteSpeed ​​Cache, może to spowodować błysk niestylowanej treści (FOUC). Jeśli chcesz poprawić swój wynik CLS, zalecamy wyłączenie tych opcji w odpowiednich wtyczkach.

Alternatywnie możesz ustawić tak zwany awaryjny krytyczny CSS. Wiąże się to z wygenerowaniem krytycznego skryptu awaryjnego za pomocą narzędzia takiego jak Critical Path CSS Generator.

Usunięcie skryptów blokujących renderowanie może również obniżyć wynik CLS. Zalecamy, aby najpierw przetestować CLS z włączoną optymalizacją dostarczania CSS, a następnie przetestować go, gdy jest wyłączony, aby porównać.

Wyłącz animacje

Jeśli korzystasz z animacji, zalecamy wyłączenie ich w mobilnej wersji swojej witryny, ponieważ animacje mogą spowalniać czas ładowania witryny. Jeśli nalegasz na animacje dla swojej witryny, sugerujemy skorzystanie z opcji transformacji i tłumaczenia CSS.

Alternatywnie możesz użyć wtyczki Happy Addons Elementor. Pozwala to animować elementy bez powodowania przesunięć układu.

Najlepszym sposobem na wyeliminowanie większości zmian w układzie jest zmiana sposobu ładowania strony internetowej. Z kolei możesz zwiększyć szybkość i wydajność swojej witryny WordPress. Jak zawsze chodzi o poprawę doświadczenia użytkownika. Im bardziej responsywna jest Twoja witryna, tym większe prawdopodobieństwo, że użytkownicy dodadzą ją do zakładek i ponownie ją odwiedzą.