Skumulowana zmiana układu (CLS) w WordPress: jak to wyeliminować

Tym rozdziałem dotyczącym skumulowanej zmiany układu zbliżamy się do końca naszej miniserii poświęconej podstawowym wskaźnikom internetowym dla użytkowników WordPress. We wcześniejszych rozdziałach poświęconych największej zawartości i opóźnieniu pierwszego wejścia mówiliśmy już o tym, co dokładnie oznaczają te terminy i jak zoptymalizować witrynę pod kątem każdego z nich. Teraz chcemy zrobić to samo dla CLS.

Poniżej omówimy, czym dokładnie jest skumulowana zmiana układu, jak jest obliczana, jak przetestować witrynę internetową pod kątem jej wydajności w tym obszarze i jaka jest dobra wartość, do której należy dążyć. Następnie podajemy instrukcje krok po kroku dotyczące rozwiązywania wszelkich problemów CLS, które mogą występować w Twojej witrynie WordPress, w celu ich ulepszenia.

Mamy nadzieję, że kiedy skończysz, wraz z dwoma pozostałymi postami z tej serii, uznasz, że Twoja witryna jest gotowa do zatwierdzenia przez Google.

Jakie jest znaczenie skumulowanej zmiany układu?

Jak zwykle zacznijmy od definicji. W jednym zdaniu CLS mierzy, kiedy coś zmienia się na stronie internetowej, co powoduje, że elementy na niej się poruszają (lub przesuwają, jeśli wolisz) bez interakcji użytkownika.

Może się zdarzyć, że formularz lub reklama w artykule, który czytasz, ładuje się z opóźnieniem i przesuwa się w dół czytanego akapitu, więc musisz przewinąć, aby ponownie znaleźć swoje miejsce. Albo, co gorsza, zmienia pozycję przycisku lub linku w nieodpowiednim momencie, więc klikasz coś, czego nie chciałeś.

W związku z tym może to być wszystko, od lekko irytującego do wręcz irytującego. Skumulowana zmiana układu to metryka, która rejestruje to zachowanie, aby zrozumieć problem i go naprawić.

Dlaczego to jest ważne?

Podskakująca witryna całkowicie zakłóca to, co aktualnie robisz, a nawet może mieć irytujące konsekwencje w życiu codziennym. Jak możesz sobie wyobrazić, jest to bardzo niekorzystne dla wygody użytkownika i może spowodować, że odwiedzający opuszczą witrynę. Dotyczy to zwłaszcza smartfonów, gdzie ze względu na rozmiar ekranu małe zmiany mają większy wpływ niż na komputerach stacjonarnych.

Ponieważ jest to tak destrukcyjne, Google kładzie duży nacisk na te dane, czyniąc je jedną z podstawowych wartości, według których ocenia strony internetowe. Jeśli więc chcesz zadowolić zarówno odwiedzających, jak i ludzi (mam na myśli roboty), którzy decydują o tym, gdzie pojawisz się w wynikach wyszukiwania, zrób wszystko, co w Twojej mocy, aby wyeliminować Skumulowaną zmianę układu strony na swojej stronie.

Co powoduje CLS?

Przyczyną przesunięcia elementów witryny jest zwykle to, że pliki strony internetowej ładują się z różną szybkością. Kolejnym czynnikiem są elementy strony, które są dodawane dynamicznie w trakcie lub po załadowaniu strony. Typowe przykłady obejmują:

• Wizualizacje takie jak obrazy lub filmy bez poprawnie zdefiniowanych wymiarów
• Treści osób trzecich, takie jak reklamy, banery, elementy do osadzenia lub elementy iframe
• Czcionki internetowe, które są mniejsze lub większe niż początkowo wyświetlane czcionki zastępcze

Innym źródłem CLS mogą być sprzeczne znaczniki CSS i JavaScript. Kiedy się blokują, zatrzymuje się proces ładowania stron internetowych.

Jak obliczane jest skumulowane przesunięcie układu?

W przeciwieństwie do swoich poprzedników, obliczenie skumulowanego przesunięcia układu jest nieco bardziej skomplikowane. Aby to zrozumieć, musimy najpierw ustalić kilka warunków:

• Przesunięcie układu — wtedy element już widoczny na stronie przesuwa się z pozycji początkowej po już wyrenderowaniu. Tego rodzaju elementy nazywane są elementami niestabilnymi (twórczymi, wiem).
• Oczekiwane i nieoczekiwane zmiany układu — zmiany układu są ujemne tylko wtedy, gdy użytkownik się ich nie spodziewa. Istnieją również oczekiwane i mile widziane zmiany układu, na przykład po interakcji ze stroną internetową (np. przesłaniu formularza). Animacje CSS i przejścia to inne przykłady oczekiwanych zmian układu. Aby to uwzględnić, CLS uważa, że ​​wszystkie zmiany układu, które mają miejsce w ciągu 500 ms od interakcji użytkownika, są oczekiwane.
• Ułamek wpływu — procent widocznego obszaru (widocznej części witryny na ekranie), na który ruchomy element wpływa jako liczba dziesiętna (np. 0,5, jeśli wpływa na 50% ekranu).
• Ułamek odległości — Odległość jako procent ekranu, o który porusza się niestabilny element podczas zmiany. Podawana również jako liczba dziesiętna.
• Wynik przesunięcia układu — oblicza się go, mnożąc ułamek uderzenia przez ułamek odległości (np. 0,4 x 0,15 = 0,06). W konsekwencji duże elementy, które poruszają się na dużą odległość, dają wyższy wynik niż małe elementy poruszające się na niewielką odległość.

CLS rejestruje największą liczbę przypadków nieoczekiwanych zmian układu w pięciosekundowym przedziale czasu. Wiadomo, że im niżej tym lepiej.

W końcu nie musisz znać szczegółów. Wszystko, co musisz wiedzieć, to jak mierzyć CLS i do jakiej wartości powinna dążyć Twoja witryna.

Co to jest dobry wynik zmiany układu?

Dobry wynik to mieć wartość CLS równą 0,1 lub mniej. Do 0,25 wymaga poprawy, wszystko powyżej jest złe i prawdopodobnie spowoduje zmniejszenie wydajności wyszukiwania.

Jak przetestować skumulowaną zmianę układu

Aby móc poprawić wynik CLS na swojej stronie, musisz najpierw wiedzieć, na czym stoisz. Trudno stwierdzić, czy tak się dzieje, ponieważ strony internetowe nie zawsze zachowują się tak samo na różnych urządzeniach. W związku z tym możesz nie widzieć go w witrynie programistycznej, ale odwiedzający nadal mogą go napotkać. Z tego powodu najlepiej go przetestować.

Istnieje kilka sposobów sprawdzenia, czy skumulowana zmiana układu jest problemem w Twojej witrynie WordPress. Są one prawie takie same jak w przypadku innych wskaźników Core Web Vitals. Pierwszym portem, do którego należy się udać, zawsze powinien być PageSpeed ​​Insights, który pokazuje dane na swojej stronie wyników.

Pamiętaj, że wykorzystuje zarówno wyniki laboratoryjne, jak i rzeczywiste dane z raportu Chrome User Experience Report. Pokazuje nawet obrazy zmian układu i elementu źródłowego. W ten sposób masz lepsze pojęcie o tym, na czym polega problem i gdzie występuje.

Dodatkowo PageSpeed ​​Insights podaje stosunek, w jakim stopniu każdy element przyczynia się do wyniku CLS. Pozwala to ustalić priorytety tego, co ma największy negatywny wpływ.

Oprócz tego możesz również użyć następujących:

• Raport Core Web Vitals w Google Search Console
• Narzędzia programistyczne przeglądarki Chrome
• Latarnia morska
• biblioteka web-vitals JavaScript

Istnieje również rozszerzenie Chrome o nazwie CLS Visualizer. Podkreśla przesuwające się elementy na twoich stronach internetowych. W przypadku przeglądarki Firefox wypróbuj SpeedVitals.

Jak zmniejszyć skumulowaną zmianę układu w witrynie WordPress

Jeśli zauważysz, że CLS jest problemem w Twojej witrynie WordPress, prawdopodobnie chcesz to naprawić. O tym jest cała reszta tego artykułu.

Podaj wymiary mediów

Wiele rozwiązań staje się już jasnych, gdy przyjrzysz się przyczynom skumulowanej zmiany układu powyżej. Jak wspomniano, częstym winowajcą CLS są obrazy i inne media bez zdefiniowanych wartości width i height . Bez stałych wymiarów przeglądarka nie wie, ile miejsca na nie zarezerwować. Dotyczy to zwłaszcza mediów, które pojawiają się na stronie później, na przykład podczas leniwego ładowania.

Niestety, powszechną praktyką projektowania responsywnego jest nie podawanie określonych wymiarów obrazu. Najczęściej obrazy są ustawione na width lub max-width: 100%; i height: auto; . Następnie przeglądarka musi dowiedzieć się, jakie są rzeczywiste wymiary podczas pobierania obrazu.

W przeszłości często prowadziło to do zachowań, których staramy się unikać. Obrazy nagle pojawiły się, poruszając wszystko dookoła. Dlatego zawsze powinieneś podawać wymiary swoich elementów wizualnych lub przynajmniej współczynnik proporcji CSS.

Na szczęście, jeśli korzystasz z WordPressa, Twoja witryna automatycznie ustawia wymiary obrazu. Dlatego problem zwykle nie wchodzi w grę.

Jeśli tak nie jest w przypadku konkretnego obrazu, możesz to poprawić w edytorze Gutenberga.

Radzenie sobie z reklamami, osadzonymi treściami i podobnymi treściami

Treści stron trzecich ładowane na strony są często jednym z największych źródeł CLS. Są to przypadki, w których niekoniecznie masz kontrolę nad rozmiarem produktu końcowego. Jego wydawcy również nie wiedzą z góry, ile miejsca jest dostępne w witrynie, na której się pojawia. Dlatego musisz zadeklarować jego rozmiar w taki sam sposób, jak w przypadku obrazów.

Na szczęście ponownie dla użytkowników WordPress, gdy używasz edytora Gutenberg do automatycznego osadzania treści z sieci społecznościowych, portali wideo lub podobnych dostawców w swoich treściach, edytor automatycznie dodaje odpowiednie deklaracje width i height .

W ten sposób, nawet jeśli ładowanie treści trwa dłużej niż reszta strony, ma już zarezerwowany prawidłowy rozmiar. W rezultacie układ nie zmienia się, gdy się pojawia.

W przypadku innych rodzajów treści, które dodajesz ręcznie, pamiętaj o ręcznym dodaniu width i height . Jeśli nie znasz dokładnej wysokości, jaką zajmie reklama lub inny element, przynajmniej dodaj do niej właściwość min-height . To nadal pozwala na większe elementy, ale rezerwuje trochę miejsca i może wyeliminować lub przynajmniej zmniejszyć CLS na stronie.

Inną techniką minimalizowania skumulowanej zmiany układu w WordPress dla treści stron trzecich jest unikanie umieszczania ich wysoko na stronie. Im wyżej, tym więcej treści poniżej może przesunąć w dół i tym wyższy jest Twój wynik CLS. Dlatego jeśli możesz, umieść go na środku lub na dole.

Optymalizuj zawartość dynamiczną

Treść dynamiczna to elementy strony, które są dodawane do strony po jej załadowaniu. Wcześniejszy przykład dotyczył leniwie ładowanych obrazów, ale zazwyczaj zawiera również elementy takie jak banery, formularze, a nawet powiązane produkty, które pojawiają się na przewijaniu.

Oczywiście, jeśli nie zaplanujesz ich odpowiednio, może to również prowadzić do zmian w układzie. Oto kilka sposobów, aby tego uniknąć:

• Zarezerwuj miejsce z wyprzedzeniem — podobnie jak powyżej, jeśli masz kontener o stałym rozmiarze, do którego możesz załadować zawartość, zachowa on stały układ, nawet jeśli pojawi się później. Stałym pojemnikiem może być również karuzela lub coś podobnego.
• Połącz to z interakcją użytkownika — jeśli treść ładuje się dynamicznie po akcji użytkownika, nie powoduje to żadnych kar dla CLS, nawet jeśli zmieni się układ. Pamiętaj jednak o odcięciu 500 ms.
• Załaduj zawartość poza ekran — jeśli załadujesz zawartość poza widocznym obszarem, a następnie podasz użytkownikowi powiadomienie, że jest ona dostępna i opcję przewinięcia do niej, CLS również nie istnieje. Platformy mediów społecznościowych lubią to robić w przypadku nowych aktualizacji.

Popraw obsługę czcionek internetowych

Czcionki internetowe mogą również powodować zmianę układu. Dwie powszechne formy polegają na tym, że najpierw widzisz niestylizowany tekst, zanim pojawi się czcionka internetowa (Flash of Unstyled Text lub FOUT), albo nie widzisz na początku żadnego tekstu, a następnie pojawia się on razem z czcionką internetową (Flash of Invisible Text lub stopa).

Oba mogą prowadzić do zmian w układzie, a oto, co możesz z tym zrobić:

• Użyj odpowiedniego formatu czcionki — jeśli ładujesz niestandardowe czcionki do swojej witryny WordPress, pamiętaj, aby użyć formatu WOFF2 lub WOFF. Te zajmują najmniej miejsca, ładują się najszybciej i pomagają uniknąć powyższych problemów.
• Użyj właściwej czcionki zastępczej — jeśli używasz czcionki zastępczej, która bardzo różni się od rzeczywistej czcionki, moment przełączenia prawdopodobnie doprowadzi do przesunięcia układu. Możesz tego uniknąć, używając czcionki Fallout, która jest zbliżona do produktu końcowego. Funkcja dopasowywania stylów czcionek może pomóc w znalezieniu odpowiedniego.
• Wstępnie ładuj czcionki — umieść zasoby czcionek internetowych na wczesnym etapie dokumentu i dodaj do nich rel=preload . W ten sposób przeglądarki będą traktować je priorytetowo.

Pomaga również hostować czcionki lokalnie lub przynajmniej korzystać z CDN, aby jak najszybciej udostępnić je użytkownikom. W ten sposób zmniejszasz prawdopodobieństwo późnego przełączania czcionek podczas ładowania i powodowania przesunięć układu.

Nie pozwól, aby skumulowana zmiana układu zrzuciła Twoją witrynę WordPress

Skumulowana zmiana układu to jeden z trzech wskaźników, które Google uważa za kluczowe i ostatni w tej szczegółowej serii. Jest to ważny wskaźnik doświadczenia użytkownika, ponieważ mierzy stabilność układu strony podczas ładowania, a nawet po jego załadowaniu.

Podobnie jak inne wskaźniki w Core Web Vitals, ma to znaczenie nie tylko dla użytkowników, ale także liczy się w rankingu wyszukiwania i dlatego jest ważne dla sukcesu Twojej witryny.

Do tej pory wiesz, co to jest, jak jest obliczane, co jest przyczyną i jak to testować i sobie z tym radzić. Niech twój układ będzie zawsze solidny, przyjacielu.

Czy masz dodatkowe wskazówki, jak zapobiegać skumulowanej zmianie układu w WordPress? Daj nam znać w komentarzach poniżej!