Chcesz zoptymalizować i poprawić wskaźniki Core Web Vitals dla swojej strony WordPress? A może nie wiesz co to takiego? W dzisiejszym tekście przyjrzymy się temu czym są wskaźniki Web Vitals, dlaczego są tak ważne i w jaki sposób można je poprawić.
Co to jest Core Web Vitals
Core Web Vitals, to inicjatywa Google, która pomaga właścicielom stron internetowych poprawić doświadczenia użytkowników trafiających na ich stronę. Trzy kluczowe wskaźniki Core Web Vitals są częścią kryteriów rankingu w wynikach wyszukiwania, co podkreśla ich znaczenie także dla optymalizacji SEO.
Prawda jest taka, że nikt nie lubi wolno ładującej się strony, włączając w to także Google. Nawet jeśli Twoja strona wczytuje się szybko, nie musi to oznaczać, że zalicza najważniejsze wskaźniki wydajności, które Google bierze od uwagę oceniając Twoją stronę. Warto więc je sprawdzić.
Podstawowe wskaźniki Web Vitals
Wskaźniki Web Vitals pomagają Ci zmierzyć to jak szybko Twoja strona się ładuje, staje się widoczna i jak szybko jest gotowa do działania dla użytkowników z niej korzystających. Trzy testy:
LCP – Mierzy wydajność ładowania
FID – Mierzy interaktywność, a od 24 marca 2024 roku ten wskaźnik zostanie zastąpiony innym wskaźnikiem INP
CLS – Mierzy stabilność wizualną
Nazwy tych testów mogą brzmieć nieco technicznie, ale to, co mierzą, jest całkiem łatwe do zrozumienia.
LCP (Largest Contentful Paint), sprawdza, jak szybko główna treść (np. obrazek, artykuł, opis) staje się widoczny dla użytkownika. Na przykład, Twoja strona może ładować się szybko, ale największa treść może nie pojawiać się na ekranie odwiedzającego tak szybko jak inne elementy strony.
FID (First Input Delay) mierzy czas, jaki potrzebuje przeglądarka użytkownika, aby rozpocząć przetwarzanie obsługi zdarzeń w odpowiedzi na interakcję.
Mówiąc prostym językiem, załóżmy, że użytkownik znajduje się na stronie z formularzem kontaktowym. Wypełnia formularz i klika na przycisk Wyślij. FID będzie mierzył, jak szybko twoja strona przetwarza tę interakcję. Jeszcze prostszym przykładem może być czas od momentu kliknięcia przez użytkownika na link do momentu, w którym jego przeglądarka zacznie przetwarzać następną sekwencję zdarzeń.
INP (Interaction to Next Paint) jak wspomniałem powyżej ten wskaźnik zastąpi FID w marcu 2024 roku. Jest wskaźnikiem oceniającym responsywność strony w odpowiedzi na działania użytkownika. Analizuje opóźnienia wynikające z kliknięć, dotknięć oraz interakcji z klawiaturą podczas całej wizyty na stronie. Końcowa wartość INP reprezentuje najdłuższy czas reakcji, pomijając wartości nietypowe.
Obrazowo jest to zaprezentowane na stronie: https://web.dev/inp/ skąd pochodzi poniższa animacja (jeśli nie działa, kliknij na niej).
Z lewej strony widać, że kliknięcie w obiekt akordeonu nie zawsze skutkuje natychmiastowym wyświetleniem treści, co więcej ta treść po kliknięciu potrafi się szybko schować. Użytkownik strony może więc odnieść wrażenie, że coś tu nie działa. Z prawej strony wszystko bez zastrzeżeń :)
CLS (Cumulative Layout Shift) mierzy czas, jaki jest potrzebny do tego, aby strona stała się wizualnie stabilna.
Kiedy strona się uruchamia, niektóre jej elementy potrzebują nieco więcej czasu na załadowanie niż inne. W tym czasie zawartość Twojej strony może przesuwać się na ekranie. Na pewno nie raz widziałeś taki efekt. Strona zachowuje się tak jakby jej elementy przeskakiwały z jednego miejsca na drugie.
Na przykład, jeśli użytkownik czyta akapit na urządzeniu mobilnym, a nad akapitem nagle załaduje się video, to cała treść którą czyta przesuwa się w dół. Może to być naprawdę frustrujące, jeśli użytkownik próbuje wykonać jakąś ważną dla niego czynność, np. dodać produkt do koszyka, gdzie przycisk przesuwa się w dół z powodu innych elementów ładujących się na stronie.
Jak przetestować wynik Core Web Vitals dla swojej strony?
Najłatwiejszym sposobem na przetestowanie wyniku Google Core Web Vitals jest użycie narzędzia PageSpeed Insights.
PageSpeed Insights
Po prostu wprowadź adres URL, który chcesz przetestować i kliknij na przycisk Analizuj. Otrzymasz wiele wyników, ale wśród nich pojawi się też informacja czy Twoja witryna spełnia podstawowe wskaźniki internetowe (Web Vitals).
Znajdują się tam dwa rodzaje danych:
- Dane pochodzące od realnych użytkowników korzystających z przeglądarki Chrome. Te dane pojawiają się tylko gdy Google dysponuje odpowiednio dużą ilością próbek aby zapewnić reprezentatywny wgląd w te informacje. Oznacza to, że przy stronach z niewielkim ruchem te dane nie będą dostępne.
- Dane laboratoryjne. Test wykonany w czasie rzeczywistym na żądanie. W sytuacji gdy nie masz danych podchodzących od użytkowników strony, to jedyny sposób na to aby sprawdzić wyniki, ale uwaga. Dane laboratoryjne wcale nie muszą się pokrywać z danymi rzeczywistymi. Znam wiele przypadków gdzie strona z zaliczonymi wynikami laboratornymi nie zaliczała ich w realu i odwrotnie.
Poniższy zrzut ekranu to dane pochodzące od realnych użytkowników strony. Jak widać podstawowe wskaźniki (Core Web Vitals) nie są zaliczone z uwagi na słaby CLS.
Z kolei obrazek poniżej, to dane dotyczące tego samego adresu URL, ale pochodzące z testu laboratoryjnego. W tym konkretnym wypadku widać wyraźnie różnicę. Niezaliczony test to FCP, a CLS jest OK.
Z czego wynikają takie różnice? Z faktu, że realni użytkownicy korzystają z różnych urządzeń. Powyższy test prezentuje dane dla urządzeń mobilnych. Pomyśl jak dużo różnych smartfonów jest na rynku. Ktoś ma najnowszego flagowca na którym wszystko śmiga w mgnieniu oka, a ktoś starszy sprzęt na którym można działać, ale jego wydajność mająca wpływ także na renderowanie danych w przeglądarce jest znacznie mniejsza. Oba te urządzenia wygenerują różne wyniki dla tego samego adresu URL.
Gdy użytkownicy Twojej strony to głównie osoby korzystające ze starszych, mniej wydajnych urządzeń, możesz liczyć na gorsze wyniki jakościowe. Jeśli do tego dojdą słabe łącza wynik będzie jeszcze gorszy. Oznacza to, że dane laboratoryjne należy traktować wyłącznie orientacyjnie, nie zawsze będą pokrywały się z rzeczywistością.
Google Search Console
Mając na stronie odpowiednio duży ruch w Google Search Console znajdziesz wiele przydatnych informacji na temat oceny jakościowej Twojej witryny przez Google. Przykład informujący o problemach:
Jak widzisz na powyższym przykładzie pojawił się wzrost ilości stron, które nie zaliczają jednego z trzech wskaźników (mowa o LCP) dla urządzeń mobilnych. Co się stało? W takiej sytuacji warto zastanowić się jakie zmiany ostatnio były wprowadzane na stronie. Może zmieniłeś motyw, może doinstalowałeś jakąś wtyczkę, albo pracowałeś nad szablonami z których korzystają Wpisy, Strony…? Czasem z pozoru drobna zmiana może negatywnie odbić się na wynikach i właśnie dlatego warto kontrolować jakość swojej strony w miarę regularnie.
WebPage Test
To kolejne narzędzie, które analizuje wskaźniki Web Vitals. Wejdź na stronę https://www.webpagetest.org, wybierz rodzaj testu, wpisz adres URL do sprawdzenia, dodatkowo możesz wskazać lokalizację skąd będzie przeprowadzony test i go uruchom:
Twoim oczom powinny po chwili ukazać się wyniki.
Przeglądarka stron
Analizę bazującą na danych pochodzących z tego samego narzędzia co w przypadku testu PageSpeed Insights możesz przeprowadzić za pomocą własnej przeglądarki.
Zobaczysz zapewne różnicę pomiędzy danymi jakie pokazało Ci narzędzie PageSpeed Insights, a danymi wygenerowanymi w przeglądarce na swoim komputerze. Dlaczego? Ponieważ środowisko testowe jest inne. Masz przecież inny komputer z łączem o określonej wydajności.
Jeśli zrobisz test u kolegi na jego sprzęcie i jego łączu internetowym zobaczysz być może jeszcze inne metryki. Google potem wszystkie te informacje zbiera “do kupy” i na tej podstawie wystawia Ci ocenę.
[membership show_noaccess=”true”]Jak dobrać się do analizy w przeglądarce? Uruchom przeglądarkę Chrome (zalecam w tym wypadku). Następnie uruchom narzędzia dla developerów.
Gdy to zrobisz odszukaj w nich narzędzia Lighthouse i je uruchom.
Teraz możesz zdecydować o parametrach testu. W naszym przypadku przeanalizujemy artykuł na blogu i porównamy jego wyniki lokalne go z wynikami uzyskanymi na stronie PageSpeed Insights gdzie rownież jest wykorzystywane narzędzie Lighthouse.
Nasza konfiguracja jest standardowa:
Po kliknięciu w przycisk Analyze page load po kilku, kilkunastu sekundach widzimy wynik, oto on:
Jeśli teraz tę samą stroną wykonamy test na PageSpeed Insights wynik będzie taki:
Widać znaczącą różnicę i nie patrz na punkty za wydajność tylko porównaj metryki widoczne poniżej. W moim przypadku wynik jest wyraźnie korzystniejszy co jednak nie znaczy, że u Ciebie też tak będzie. Może być podobny lub gorszy. Dużo zależy od Twojego sprzętu i jakości łącza w momencie testowania.
Jakie dane gromadzi Google na podstawie których dodaje lub odejmuje punkty mające wpływ na pozycje w wynikach wyszukiwania? Nie dane z testów laboratoryjnych na PageSpeed Insights ale dane pochodzące z przeglądarek osób odwiedzających Twoją stronę opartych na Chrome. W przypadku mojego sprzętu i łącza wynik lokalny jest lepszy co nie oznacza że u Ciebie będzie taki sam. Teraz to Wszystko Google sobie gromadzi po to by ostatecznie na tej podstawie dokonać oceny jakości i wydajności Twojej strony.[/membership]
Maksymalne dopuszczalne wartości dla wskaźników Core Web Vitals
Warto wiedzieć jakie maksymalne wartości są dopuszczalne dla poszczególnych wskaźników, aby zyskać status strony spełniającej wszystkie najważniejsze warunki. No właśnie wszystkie! Jak już wyczytałeś powyżej nie wystarczy zapewnić dobrych wyników dla jednego wskaźnika lub dwóch. Bezwzględnie wszystkie trzy muszą generować poziom satysfakcjonujący Google. Jakie to poziomy?
LCP – max 2.5 sekundy
FID – poniżej 100 milisekund
CLS – poniżej 0,1
Zbuduj stronę, a potem wykonaj testy. Prawdopodobnie nie będzie ona spełniała wszystkich powyższych kryteriów.
Jak śledzić zmiany bez ciągłego testowania
Najprostszym sposobem jest zerknięcie co pewien czas do statystyk gromadzonych w Google Search Console o czym wcześniej już pisałem. W tym miejscu możesz błyskawicznie sprawdzić czy Twoja strona spełnia podstawowe wskaźniki czy nie.
Oto co widać na powyższych wykresach z GSC. Pierwszy dotyczy urządzeń mobilnych. Widzimy, że mniej więcej do połowy stycznia strona spełniała ogólne wskaźniki, potem się to nieco pogorszyło i co prawda nie było tragedii, ale witryna wg Google wymagała optymalizacji.
Z kolei drugi wykres to komputery. Być może dziwisz się, że wypadały gorzej niż urządzenia mobilne, bo zazwyczaj jest na odwrót. W tym przypadku tak jednak było. Od początku roku witryna wyraźnie nie spełniała warunków, aby uznać ją za optymalną dla użytkowników. Gdy zostały wprowadzone zmiany, potrzeba było chwili czasu. Pamiętaj, że to nie dzieje się z dnia na dzień. Najpierw pojawił się kolor pomarańczowy, czyli coś zaczęło się zmieniać na lepsze, a potem większość stron witryny została pozytywnie zakwalifikowana jako odpowiednio zoptymalizowane. Do tego dążymy.
Dlaczego Wskaźniki Core Web Vitals są ważne?
Ponieważ odzwierciedlają to, jak Twoja strona działa gdy użytkownik z niej korzysta. Wskaźniki Web Vitals skupiają się nie tylko na szybkości ładowania strony, ale także na tym, jak szybko użytkownicy mogą zacząć z niej korzystać, co nie do końca jest tożsame.
Według badań StrangeLoop 1 sekunda opóźnienia w czasie ładowania strony może prowadzić do 7% spadku konwersji, 11% mniej odsłon i 16% spadku zadowolenia Klientów. To tylko jedna, niepozorna sekunda!
Szybka strona, ale z kiepskim doświadczeniem użytkownika wciąż będzie kosztowała Cię kolejne konwersje, mniejszą ilość odsłon i niską satysfakcję potencjalnego Klienta. Poprawa podstawowych wskaźników Web Vitals może temu zaradzić. Pytanie jak to zrobić?
Kilka sposobów na optymalizację wskaźników Web Vitalis
Z jednej strony można powiedzieć, że ich poprawa niekoniecznie jest trudna, z drugiej może się okazać zadaniem nie do przeskoczenia przez osobę początkującą. Dużo zależy od tego w jaki sposób zbudowałeś swoją stronę i jaka jest jej konstrukcja. Jakich wtyczek używasz, jakiego motywu, jak użyłeś bloków Gutenberga czy widgetów Elementora, jak przeprowadziłeś optymalizację obrazów… można jeszcze wymieniać.
Dlatego jeśli zabierasz się za samodzielną budowę strony lub sklepu internetowego (jak założyć sklep internetowy) powinieneś dobrze się do tego zadania przygotować. W tym celu stworzyłem Kurs WordPress i inne, do których serdecznie Cię zapraszam.
Zoptymalizuj swój Hosting WordPress
Hosting ma znaczenie jeśli chodzi o wyniki Twojej strony. To pierwszy element, na który powinieneś zwrócić uwagę, bo jeśli serwer będzie powolny, wówczas cała reszta działań może nie przynieść zamierzonych efektów.
Staraj się wybrać Hosting WordPress, a nie jego substytut. Owszem to usługi droższe, ale ta cena zazwyczaj z czegoś wynika.
Zapraszam do zapoznania się z ofertą na stronie Hosting WordPress, na którym jesteś w stanie tak jak ja oraz wielu moich Klientów osiągnąć wysokie wyniki.
Poprawa wskaźnika LCP – Largest Contentful Paint
Jeśli Twój serwer reaguje szybko, czas na analizę wskaźnika LCP i jego poprawę jeśli taka konieczność się pojawi.
Jak wspomniałem wcześniej, LCP (Largest Contentful Paint), to największa część treści widoczna w obszarze widoku przeglądarki w momencie gdy strona się ładuje. Dla przykładu, na blogu może to być wyróżniony obrazek. Na stronie głównej jakiś banner graficzny czy slider itd… Im szybciej ładuje się ta treść, tym lepszy będzie wynik dla wskaźnika LCP.
Skąd wiesz, która treść jest uznawana za największą do wyrenderowania? Jeśli korzystasz z testów Page Speed Insights przejdź na stronie wyników do szczegółów testu i rozwiń zakładkę “Największy wyrenderowany element”.
W powyższym przykładzie widzimy, że to nagłówek. Być może warto lepiej zoptymalizować grafikę, aby w ten prosty sposób poprawić wynik, a może całkiem pozbyć się grafiki w tle?
Poprawa wskaźnika FID
W przypadku tego wskaźnika niemałą rolę odgrywa Hosting. Dobry Hosting WordPress to fundament, natomiast bez względu na to jaki hosting dla swojej strony uruchomisz, nawet gdybyś zainwestował we własny, mocny serwer dedykowany, zapewne to nie wystarczy.
Wtyczki cache i wtyczki optymalizujące kod, to najlepszy sposób na to, aby poprawić FID. Polecam Ci wtyczkę WP Rocket lub Seraphinite Accelerator, dobrą robotę robi także Nitropack.
Po zainstalowaniu którejkolwiek z nich i oczywiście odpowiedniej konfiguracji powinieneś doświadczyć wyraźnej poprawy wyników i to nie tylko dla FID, ale także LCP, a także CLS.
Poprawa wskaźnika CLS
Wynik wskaźnika CLS jest zaburzony, gdy różne elementy na stronie internetowej ładują się powoli i powodują przesuwanie się innych obiektów na ekranie.
Możesz sprawdzić, które elementy mają największy wpływ na wynik CLS, rozwijając zakładkę “Unikaj dużych przesunięć układu” w wynikach PageSpeed Insights.
To pokaże ci obiekty, które mają największy wpływ na zmianę układu podczas ładowania strony.
Aby upewnić się, że wizualny układ Twojej witryny nie przesuwa się podczas ładowania innych elementów, musisz poinformować przeglądarkę o ich wymiarach (szerokość i wysokość). Chodzi tu np. o obrazy, osadzone wideo, reklamy i inne.
WordPress automatycznie dodaje atrybuty wysokości i szerokości do obrazów, które umieszczasz na stronie, ale nie w każdym przypadku zadziała tak jakbyś tego chciał. Wtyczka WP Rocket, o której wspomniałem wcześniej ma również funkcję, która pozwala na automatyczne dodanie wysokości i szerokości obiektu jeśli ich zabraknie, co może przyczynić się do poprawy wyniku CLS. Sprawdź tę drogę.
Użyj sieci CDN
To może być CloudFlare lub inny sprawdzony operator jak BunnyNET, który oferuje świetną jakość w świetnej cenie. Co więcej BunnyNET możesz także wykorzystać jako narzędzie do optymalizacji obrazków i na tym polu również sprawdzi się doskonale.
Podsumowanie
Wskaźniki Web Vitals są najważniejszymi parametrami jakości i wydajności strony, które Google bierze pod uwagę, decydując o rankingach poszczególnych stron w wynikach wyszukiwania. Ważne jest jednak to, abyś miał świadomość że jest to jeden z kilkuset czynników rankingowych wyszukiwarki, a nie jedyny.
Nie popadaj w obsesję na temat osiągnięcia jak najwyższych wskaźników, bo owszem możesz osiągnąć najlepszy możliwy wynik, co jednak nie koniecznie będzie oznaczało, że wybijesz się w wynikach wyszukiwania.
Proponuję żebyś przed podjęciem decyzji przeanalizował pod tym kątem strony swoich konkurentów w wynikach wyszukiwania. Porównaj ich ze swoją witryną, a następnie zastanów się nad tym co zrobić żeby od nich nie odstawać, a może nawet nieco lepiej zoptymalizować swój projekt.
