Przewodnik dla początkujących: Naprawianie skumulowanego przesunięcia układu w WordPress

Masz problemy z skumulowanym przesunięciem układu w WordPressie?

Cumulative Layout Shift, w skrócie CLS, to wskaźnik zorientowany na wrażenia użytkownika, który jest częścią nowej inicjatywy Google Core Web Vitals.

Jeśli kiedykolwiek przeglądałeś stronę, która przeskakuje podczas ładowania, doświadczyłeś zmiany układu, a także wiesz, jak irytujące może być skumulowane przesunięcie układu w WordPressie. Ale poza denerwowaniem odwiedzających, CLS może również wpływać na rankingi w wyszukiwarkach, dlatego ważne jest, aby naprawić wszelkie problemy, które ma Twoja witryna.

Na szczęście nie musisz być znawcą technologii, aby identyfikować i rozwiązywać problemy związane ze skumulowanym przesunięciem układu. Rozumiejąc jego przyczyny i wiedząc, jak je naprawić, możesz zmniejszyć liczbę nieoczekiwanych zmian na swojej stronie.

W tym artykule przedstawimy Ci dane dotyczące zbiorczego przesunięcia układu Google i pokażemy, jak wykrywać problemy z CLS w Twojej witrynie. Następnie przedstawimy Ci trzy proste sposoby rozwiązania problemów i obniżenia wyniku CLS Twojej witryny.

Spis treści:

• Co to jest skumulowane przesunięcie układu?
• Jak zidentyfikować problemy ze skumulowanym przesunięciem układu
• Jak naprawić skumulowane przesunięcie układu

Wprowadzenie do skumulowanej zmiany układu w WordPress

Zmiana układu występuje, gdy zawartość strony porusza się bez interakcji użytkownika.

Jednym z typowych przykładów są reklamy ładujące się z opóźnieniem, których prawdopodobnie doświadczyłeś w witrynach multimedialnych. Być może zacząłeś czytać tekst na stronie tylko po to, aby tekst został „zepchnięty” w dół przez reklamę wyświetlaną po załadowaniu strony.

Oto pomocna grafika od ludzi z web.dev – użytkownik chciał kliknąć „Nie, wróć”, ale przypadkowo kliknął „Tak, złóż zamówienie”, ponieważ zmiana układu spowodowała przesunięcie przycisku po początkowym załadowaniu strony:

Skumulowane przesunięcie układu to metryka, która mierzy wszystkie zmiany układu, które występują na Twojej stronie i umieszcza je w jednym wyniku. Porozmawiamy o punktacji za sekundę. Ogólnie jednak wysoki wynik wskazuje na wiele przesunięć układu (zły), podczas gdy niski wynik wskazuje na kilka przesunięć układu (dobry). A wynik zero oznacza, że ​​Twoja witryna nie ma problemów z przesunięciem układu, co jest idealne.

Jak możesz sobie wyobrazić, przesuwanie elementów może przysporzyć użytkownikom bólu głowy. Może to spowodować nieumyślne kliknięcie jakiejś części Twojej strony lub nawet przypadkowe dokonanie zakupu, jak pokazuje powyższy przykład.

Nawet jeśli nie ma bezpośrednich konsekwencji, wiele zmian w układzie może być wizualnie irytujące. W połączeniu z faktem, że może spowolnić czas ładowania, ten pozornie mały problem może mieć poważny wpływ na wrażenia użytkownika (UX).

Niestety problemy z wysokim wynikiem skumulowanego przesunięcia układu nie kończą się na tym. Cumulative Layout Shift jest również częścią nowej inicjatywy Google Core Web Vitals. Od czasu aktualizacji Google Page Experience wyniki Core Web Vitals Twojej witryny są teraz niewielkim czynnikiem w rankingu SEO, co oznacza, że ​​problemy z CLS mogą wpływać na rankingi Twojej witryny.

Jak zidentyfikować problemy z skumulowanym przesunięciem układu w WordPressie

Aby znaleźć skumulowany wynik zmiany układu witryny i zidentyfikować problemy, zalecamy skorzystanie z PageSpeed ​​Insights. Daje to ogólny wynik CLS Twojej witryny, ale także zagłębi się i oznaczy konkretne problemy z przesunięciem układu, które powodują problemy.

Aby rozpocząć, wpisz swój adres URL w polu i kliknij Analizuj . Proces powinien zająć tylko kilka chwil. Po otrzymaniu wyników przewiń w dół do sekcji Dane laboratoryjne lub Dane pola i poszukaj wyniku skumulowanego przesunięcia układu witryny:

W tym miejscu możesz określić, jak dobrze Twoja witryna działa w tym obszarze. Zgodnie z ogólną zasadą istnieją trzy potencjalne zakresy, w których może mieścić się Twój wynik CLS:

• Dobra , która jest równa lub mniejsza niż 0,1
• OK , czyli od 0,1 do 0,25
• Źle , czyli 0,25 lub więcej

Ponieważ ten wskaźnik ma bezpośredni wpływ na optymalizację Twoich kluczowych wskaźników internetowych, powinieneś starać się dążyć do jak najniższego wyniku. Aby uzyskać bardziej szczegółowe wskazówki, jak to zrobić, przewiń w dół do sekcji Diagnostyka i przejrzyj temat Unikaj dużych przesunięć układu . Ta sekcja zawiera listę poszczególnych zmian układu w Twojej witrynie:

Te informacje mogą pomóc w wskazaniu konkretnych obszarów Twojej witryny, które wymagają trochę pracy. Po zidentyfikowaniu problemu możesz zastosować kilka prostych metod, aby go rozwiązać.

Jak naprawić zbiorcze przesunięcie układu w WordPressie (3 sposoby)

Przyjrzyjmy się trzem skutecznym sposobom rozwiązywania problemów z CLS. Te metody są najpotężniejsze, gdy są używane razem, dlatego zachęcamy do wypróbowania każdego podejścia.

1. Dodaj wymiary do swoich obrazów, filmów i reklam

Jeśli masz dużo multimediów w swojej witrynie, prawdopodobnie każdy obraz i film mają inne wymiary. Jest to prawdopodobnie nieuniknione bez względu na rodzaj witryny, którą prowadzisz.

Zasadniczo ta wariancja nie wpływa bezpośrednio na wynik CLS. Mimo to nadal stanowi zagrożenie – jeśli nie określisz wymiarów przedmiotu, możesz zacząć mieć problemy.

Dodanie wymiarów jest niezbędne, ponieważ dostarcza przeglądarkom ważnych instrukcji ładowania. Informacje o wymiarach pomagają przeglądarkom zarezerwować odpowiednią ilość miejsca dla tego zasobu.

Jeśli przeglądarka nie może tego zrobić, może przewidzieć niewłaściwą ilość miejsca. W rezultacie po załadowaniu strony mogą wystąpić poprawki, które prowadzą do zmiany układu. Ta sama zasada dotyczy reklam i wszelkich materiałów osadzonych w Twojej witrynie.

Na szczęście ostatnie wersje WordPressa w dużej mierze rozwiązują ten problem. Jeśli wstawisz obraz za pomocą edytora WordPress, WordPress automatycznie zajmie się definiowaniem jego wymiarów. Możesz zobaczyć wyniki, wybierając dowolny kawałek nośnika:

Jeśli jednak kiedykolwiek dodasz obrazy ręcznie za pomocą kodu lub wtyczki, upewnij się, że są tam podane wymiary obrazu.

Dużo większym problemem z CLS na WordPressie są reklamy. Jeśli umieszczasz reklamy w swoich treściach, upewnij się, że rezerwujesz miejsce na te reklamy, aby uniknąć CLS.

Jednym ze sposobów, aby to zrobić, jest zastosowanie właściwości CSS min-height i min-width do kontenera <div> zawierającego Twoją reklamę – Google ma dobry przewodnik, jak to zrobić.

Na przykład, jeśli wyświetlasz reklamę o wymiarach 300 x 250 pikseli wewnątrz elementu div o identyfikatorze in-content-ad , możesz zarezerwować miejsce, używając tego kodu:

 <div>TUTAJ WSTAW KOD REKLAMY</div>

Niektóre narzędzia reklamowe mogą również oferować narzędzia, które pomogą Ci to osiągnąć. Na przykład, jeśli korzystasz z Google Ads, Google udostępnia Edytor reklam, który może w tym pomóc.

2. Wstępnie załaduj swoje czcionki

Podobnie jak w przypadku fragmentów multimediów, Twoja witryna prawdopodobnie używa wielu różnych czcionek. Oznacza to, że mogą również zajmować zmienną ilość miejsca. Jednak w przeciwieństwie do mediów nie można dokładnie ustawić wymiarów czcionek.

Rozwiązaniem jest wstępne wczytanie tych zasobów. Wstępne ładowanie czcionek sygnalizuje przeglądarkom, że powinna to być jedna z pierwszych rzeczy, jakie generuje dla danej strony. Uwzględniając przede wszystkim czcionki, eliminujesz potrzebę korekty po fakcie.

Ta metoda może być szczególnie krytyczna, jeśli używasz wielu niestandardowych czcionek WordPress. Mogą one znacznie różnić się rozmiarem od zwykłych czcionek, co oznacza, że ​​ta prosta zmiana może mieć duży wpływ. Jednak nawet witryny mniej zależne od czcionek prawdopodobnie odnotują co najmniej niewielką poprawę wyniku CLS.

Wiele wtyczek wydajnościowych WordPress zawiera opcje wstępnego ładowania czcionek. Na przykład Autoptimize, Asset CleanUp, Perfmatters i WP Rocket.

Dla większości osób użycie jednej z tych wtyczek jest najprostszym rozwiązaniem do wstępnego ładowania czcionek WordPress.

Jednak w przypadku bardziej zaawansowanych użytkowników możesz również wstępnie załadować czcionki za pomocą własnego niestandardowego fragmentu kodu. Aby dodać ten fragment kodu, musisz edytować plik header.php motywu potomnego. Możesz edytować ten plik, przechodząc do Wygląd > Edytor motywów > Nagłówek motywu w witrynie WordPress:

Po edycji pliku header.php w motywie potomnym przewiń do dołu strony, a następnie skopiuj i wklej następujący wiersz kodu, upewniając się, że przykładowy link do czcionki – w tym przykładzie roboto.woff2 – został zastąpiony rzeczywisty link do pliku czcionki, którego używasz w swojej witrynie:

 <link rel="preload" href="roboto.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

Kiedy będziesz gotowy, kliknij Aktualizuj plik , aby zapisać zmiany. To wszystko, co musisz zrobić — czcionki Twojej witryny będą teraz miały priorytet wczytywania w przeglądarkach.

3. Zoptymalizuj swoją dynamiczną zawartość

Na koniec porozmawiajmy o dynamicznej zawartości Twojej witryny. Treści dynamiczne, takie jak formularze zapisu do biuletynu, monity o instalację aplikacji, powiadomienia o RODO itd., mogą powodować zmiany układu, powodując ponowne dostosowanie się przeglądarki, gdy strona jest już w większości załadowana.

Dotyczy to jednak tylko treści dynamicznych, które nie są wyzwalane przez interakcję użytkownika. Na przykład, jeśli ładujesz automatyczny pasek powiadomień, aby powitać osoby na swojej stronie głównej, może to zaszkodzić Twojemu wynikowi CLS.

Można to naprawić na dwa sposoby:

1. Uruchamiaj zawartość dynamiczną dopiero po interakcji użytkownika, co nie ma wpływu na Twój wynik CLS. Na przykład zamiast od razu wyświetlać formularz zgody na pocztę e-mail, być może uruchamiasz go, gdy użytkownik kliknie przycisk, aby utworzyć dwuetapową zgodę.
2. Użyj CSS, aby zarezerwować miejsce dla elementów dynamicznych, podobnie jak omówiliśmy powyżej. Na przykład, jeśli używasz CSS do zarezerwowania miejsca na pasek powiadomień u góry strony, nadal możesz załadować ten pasek bez powodowania zmiany układu.

Napraw na dobre skumulowane przesunięcie układu w WordPressie

W tym artykule omówiliśmy trzy sposoby naprawienia i zmniejszenia skumulowanego przesunięcia układu w WordPress:

1. Upewnij się, że wszystkie Twoje media i reklamy mają jasno określone wymiary. WordPress automatycznie obsłuży obrazy, które osadzasz w edytorze, ale może być konieczne ręczne zdefiniowanie wymiarów reklam i wszelkich obrazów dodawanych poza edytorem.
2. Wstępnie załaduj czcionki, aby uniknąć korekt w ostatniej chwili.
3. Zwróć uwagę na sposób implementacji treści dynamicznych — wymagając interakcji użytkownika lub rezerwując miejsce na dowolne elementy dynamiczne.

Czy nadal masz pytania dotyczące ulepszenia zbiorczego przesunięcia układu w WordPressie? Daj nam znać w komentarzach!