Optymalizacja Core Web Vitals strony na WordPress’ie?
Wkrótce nowe kryteria pozycjonowania stron internetowych przez Google wejdą w życie (Timing for bringing page experience to Google Search). Zaktualizowany okres wprowadzania zmian to czas od połowy czerwca do sierpnia 2021 r. Podczas, gdy wszyscy możemy się zgodzić, że tzw. page experience (wrażenia użytkownika strony) zdefiniowane przez Google (Understanding page experience in Google Search results), jest zestawem czynników, o których dobrą realizację warto się starać, aby uczynić wrażenia użytkownika korzystającego ze strony jak najprzyjemniejszymi, jednocześnie jednak możemy zauważyć, że nasz własne strony nie są dość dobrze przygotowane, aby spełnić wymagane progi oceny i nie stracić swoich innych zalet sprzyjających dobremu pozycjonowaniu. Czy nasze strony zbudowane na WordPress’ie są gotowe na wdrożenie Core Web Vitals, czy potrzebują optymalizacji?
Aby dowiedzieć się, czy są, musimy sprawdzić jaką ocenę uzyskują w odniesieniu do czynników składających sie na page experience:
- Core Web Vitals
- Mobile-friendly
- Safe-browsing
- Https
- No intrusive interstitials (Brak inwazyjnych popup’ów przesłaniających ekran)
W kolejnych postach będziemy się odnosić do każdego z tych elementów, zaczniemy od najbardziej złożonego i najbardziej istotnego w tym kontekście elementu – a raczej grupy elementów – Core Web Vitals.
Spróbujmy krótko zdefiniować Core Web Vitals. Jest to zestaw trzech miar:
- (LCP) Largest Contentful Paint – mierzy „loading performance” – wydajność ładowania strony, aby uzyskać ocenę Good wskaźnika LCP, załadowanie głównej zawartości strony nie może przekroczyć 2.5s, każda wartość pomiaru powyżej 2.5s wymaga wprowadzenia poprawek do strony, a jeśli ładowanie głównej zawartości strony trwa 4s lub dłużej, strona otrzyma ocenę Poor.
- (FID) First Input Delay – mierzy „interactivity” – interaktywność strony, ocenę Good wskaźnika FID otrzymamy, jeśli strona zacznie reagować na działanie użytkownika w ciągu 100ms. Jeśli strona zareaguje w czasie 300ms lub więcej, otrzymamy ocenę Poor. Ponieważ wskaźnik FID jest mierzony przez Google podczas rzeczywistych interakcji użytkowników ze stroną, nie może być on zmierzony na poczekaniu z wykorzystaniem narzędzi programowych. Dlatego wskaźnik ten może być oszacowany w przybliżeniu przez łatwiejszy w pomiarze wskaźnik Total Blocking Time (TBT).
- (CLS) Cumulative Layout Shift – mierzy visual stability – stabilność obrazu, wynik Good wskaźnika CLS to 0.1 (im mniej, tym lepiej), wartość CLS w wysokości 0.25 lub więcej zostanie oceniona jako Poor. Metoda obliczania CLS jest złożona, ale aby ją sobie przybliżyć, wystarczy wiedzieć, że wskaźnik ten mierzy jak bardzo widoczna zawartość strony porusza się „samoczynnie”, tj. bez wpływu akcji ze strony użytkownika. Gdy widzimy zdjęcia lub tekst tańczące nam przed oczami podczas ładowania strony, to obserwujemy przesunięcia w układzie strony, które mierzy CLS.
Dobrze, jak możemy się więc dowiedzieć, jak pozycjonuje się nasza strona internetowa w ocenie Core Web Vitals?
Dane rzeczywiste zbierane na podstawie rzeczywistych interakcji użytkowników ze stroną są prezentowane przez Google w Google Search Console pod pozycją menu Core Web Vitals. Pojawiają się one tam po co najmniej 28 dniach ruchu na stronie w ilości co najmniej kilkudziesięciu użytkowników dziennie (Google nie ujawnia ile danych potrzebuje aby pokazać statystyki Core Web Vitals, podana przed chwilą przez nas liczba może być niedokładna).
Niezależnie od tego, czy widzimy rzeczywiste Core Web Vitals w Google Search Console, czy nie, gdy pracujemy nad optymalizacją strony nie chcemy czekać, aż upłynie 28 dni rolowanego okresu raportowania Google aby poznać wpływ właśnie wprowadzonych zmian.
Podczas pracy nad optymalizacją strony możemy szybko sprawdzić, jakie rezultaty osiągamy używając narzędzia Google PageSpeed, które mierzy wszystkie trzy najważniejsze wskaźniki: LCP, TBT i CLS, a także kilka innych, w środowisku laboratoryjnym i ponadto podaje syntetyczny, łatwy w interpretacji i do porówania wskaźnik PageSpeed, który przyjmuje wartości od 0 do 100. Wskaźnik PageSpeed jest mierzony osobno dla przeglądarki mobilnej (na smartfonie) i przeglądarki na komputerze stacjonarnym. Aby otrzymać ocenę Good wskaźnika PageSpeed musimy uzyskać wartość wskaźnika w wysokości 90 lub więcej. Ale naszym zdaniem dobra strona internetowa powinna w sposób powtarzalny uzyskiwać w testach ocenę 95+ w obu pomiarach, zarówno dla przeglądarki mobilnej jak i na komputerze stacjonarnym. Będzie to oznaczać, że wszystkie trzy składniki Core Web Vitals (mierzone laboratoryjnie) uzyskały „zielone” oceny.
Jak przekonaliśmy się na własnym przykładzie, możemy uzyskać bardzo dobry wynik Core Web Vitals i wskaźnika PageSpeed dla strony opartej na WordPress’ie przy często spotykanym scenariuszu, w którym budowę strony rozpoczynamy od szablonu (w tym konkretnym przypadku był to szablon CorpoNotch Consultant, ale podobne rezultaty optymalizacji osiągnęliśmy także z szablonami WP Ocean, czy Hello Elementora), używamy fontów Google, dodajemy funkcjonalność sklepu internetowego z WooCommerce i modyfikujemy i dodajemy elementy strony korzystając z pary Elementor/Elementor Pro). Dodajemy także tag śledzący z Google Analytics. Oto z jakiego miejsca zaczynaliśmy optymalizację https://procadena.com:
A oto gdzie udało nam się wylądować po starannej optymalizacji, sprawdźcie sami przez PageSpeed:
Google nie ujawnia jak dokładnie Core Web Vitals wpłyną na algorytm pozycjonowania stron od połowy czerwca, ale jasno mówi, że strony, które nie przekroczą progów oceny „page experience” spotkają się z obniżką pozycji. Możecie spokojnie założyć, że zanim rozpoczniecie inne działania z zakresu SEO, potrzebujecie zadbać o nowe podstawowe czynniki, a wśród nich Core Web Vitals. To może być – przynajmniej przez jakiś czas – Wasza nowa przewaga konkurencyjna.
Uwaga: Od czasu powstania tego artykuły witryna procadena.com została przebudowana z wykorzystaniem edytora Gutenberg w zastępstwie Elementora. Treść artykułu nadal jest ważna, jednak preferujemy teraz optymalizację stron przy użyciu wbudowanego w WordPress edytora blokowego (Gutenberga) zamiast pozostawania przy starszych technikach wykorzystania niezintegrowanych kreatorów stron.
Zobacz następny post w serii 'Page experience’ ’Czy moja strona na WordPress’ie jest mobile-friendly?’
