Core Web Vitals – nowy czynnik rankingowy Google. Jak zoptymalizować serwis?

Nie od dziś wiadomo, że sygnały behawioralne związane z zachowaniem użytkownika w witrynie mają wpływ na jej ranking w wynikach wyszukiwania. Celem Google jest zapewnienie internautom przyjemnego korzystania z wyszukiwarki i dostarczenie w odpowiedzi na ich zapytanie jak najtrafniejszych stron wysokiej jakości. Potwierdzają to chociażby  liczne aktualizacje algorytmów Google. Na przestrzeni lat pojawiały się nowe kryteria wpływające na pozycję witryny w wynikach wyszukiwania związane m.in. z szybkością ładowania strony, czy dostosowaniem jej do urządzeń mobilnych. Wkrótce czekają nas kolejne zmiany. 

Sygnały związane z postrzeganiem strony przez użytkowników będą zyskiwały na znaczeniu. Zapowiadana w maju 2021 aktualizacja Google będzie uwzględniać podstawowe wskaźniki internetowe (Core Web Vitals) jako nowy czynnik rankingowy. 

Co dokładnie kryje się pod terminem Core Web Vitals? Jak zmierzyć jakość i wydajność serwisu? O tym w dalszej części artykułu. Zapraszam do lektury.

Dotychczasowe sygnały dotyczące jakości strony 

W kontekście nadchodzących zmian, jakość strony określana jest poprzez wrażenia użytkowników, jakie towarzyszą im podczas kontaktu z witryną internetową. Dotychczas jakość serwisu oceniana była na podstawie:

• dostosowania witryny pod kątem urządzeń mobilnych,
• obecności lub braku bezpiecznego protokołu HTTPS,
• występowania błędów związanych z bezpieczeństwem strony (szkodliwe treści, niebezpieczne oprogramowanie odnalezione w witrynie)
• występowania uciążliwych reklam pełnoekranowych.

W maju 2021 wśród tych wskaźników pojawią się także nowe metryki określone jako Core Web Vitals. Związane one będą z szybkością, responsywnością i stabilnością wizualną witryny. Jednocześnie Google informuje o nieustannych pracach nad pozyskiwaniem większej ilości danych dotyczących jakości strony. Celem tych działań jest uzyskanie dokładniejszego obrazu oczekiwań użytkowników związanych z korzystaniem z witryn internetowych. W przyszłości możemy spodziewać się zatem pojawienia nowych metryk związanych z jakością strony, których wartość będzie brana pod uwagę przez algorytm Google.

Zobacz też: Trendy w SEO w 2021 roku – na co zwrócić szczególną uwagę?

Czym jest Core Web Vitals?

Jak wspomniałam wcześniej, Core Web Vitals to zestaw podstawowych wskaźników internetowych zorientowanych na użytkownika, które pomagają w ocenie jakości korzystania z witryny. Obecny zestaw składa się z trzech wskaźników:

LCP (Largest Contentful Paint) –  metryka określająca czas ładowania głównego elementu strony. Mierzona jest od rozpoczęcia ładowania witryny do wyświetlenia największego elementu (np.: video, grafika, blok tekstu) znajdującego się w danym viewporcie. Aby zapewnić dobre wrażenia użytkownika, wartość tego wskaźnika powinna wynosić poniżej 2,5 sekundy.

FID (First Input Delay) – wskaźnik dotyczący interaktywności i szybkości reakcji serwisu. Wartość tej metryki wskazuje na czas, jaki upłynął od pierwszej interakcji użytkownika ze stroną (np: kliknięcie przycisku) do czasu, gdy przeglądarka jest w stanie odpowiedzieć na tę interakcję. Wartość tego wskaźnika nie powinna przekraczać 100 milisekund.

CLS  (Cumulative Layout Shift) – metryka służąca do pomiaru stabilności wizualnej, czyli zmian układu i przesunięcia treści podczas ładowania witryny. Przesunięcie treści może wywoływać doładowanie kolejnych elementów strony np. grafik lub też zmiana formatowania elementów strony np. fontów. W wyniku tego dochodzi do przesunięcia innych elementów strony. Takie nieoczekiwane zmiany układu mogą irytować użytkownika, dlatego warto się ich wystrzegać. Wartość wskaźnika CLS mierzona jest jako suma wszystkich zmian układu strony, które miały miejsce podczas jej użytkowania. Wskaźnik ten powinien wynosić poniżej 0.1.

Każda metryka mierzy inny aspekt doświadczenia użytkownika. Każdy wskaźnik ma także inne progi, które klasyfikują wydajność jako „dobrą”, „wymagającą poprawy” lub „słabą”. Dla Google priorytetem staje się zapewnienie użytkownikom doskonałych doświadczeń w sieci. Stąd właśnie inicjatywa Web Vitals, która dostarcza ujednolicone wskazówki dotyczące sygnałów jakości.

Narzędzia do mierzenia Core Web Vitals

Istnieje szereg narzędzi, które pozwalają zebrać dane na temat wartości wskaźników Core Web Vitals dla naszej witryny. Pomiar możemy wykonać przy wykorzystaniu narzędzi, które dostarczają dane pochodzące zarówno ze środowiska rzeczywistego, jak i laboratoryjnego. Narzędzia laboratoryjne umożliwiają sprawdzenie, jak potencjalny użytkownik prawdopodobnie będzie korzystał ze strony. Test strony w kontrolowanym środowisku laboratoryjnym możemy przeprowadzić wykorzystując np. narzędzie ChromeDevTools, o którym opowiem nieco więcej w dalszej części artykułu. 

Zobacz też: Analiza SEO strony – 25 przydatnych narzędzi w audycie SEO

Analizę jakości strony najlepiej jednak rozpocząć od zapoznania się z danymi pochodzącymi ze środowiska rzeczywistego, są to tak zwane dane terenowe rejestrujące wydajność serwisu podczas korzystania z niego przez rzeczywistych użytkowników. W poradniku web.dev odnajdziemy listę narzędzi, rekomendowanych przez Google.

• Chrome UX Report

Podstawowym źródłem, które pozwala sprawdzić, jak rzeczywisty użytkownik doświadcza witryny jest Chrome UX Report. Zawiera on dane na temat wartości kluczowych wskaźników internetowych zebrane od użytkowników, którzy zgodzili się na synchronizację historii przeglądania, nie skonfigurowali hasła synchronizacji i mają włączone raportowanie statystyk użytkowania. Jednym ze sposobów prezentacji i wglądu do tych danych jest skonfigurowanie dashboardu w Google Data Studio. Pozwala to na systematyczne monitorowanie wartości wskaźników Core Web Vitals. Informacje prezentowane w pulpicie GDS są automatycznie aktualizowane każdego miesiąca. Aby uzyskać najnowsze dane wystarczy odświeżyć pulpit nawigacyjny. Raport Chrome  wskazuje ogólną sytuację witryny. Nie znajdziemy tu jednak dokładnych danych dla poszczególnych podstron serwisu. Szczegółowe informacje możemy wyciągnąć z innych narzędzi, które są zasilane danymi z raportu Chrome UX np. Page Speed Insight, Google Search Console.

• Google Search Console 

Google Search Console jest pierwszym narzędziem, od którego warto rozpocząć analizę pod kątem optymalizacji wartości metryk Core Web Vitals. Dzięki raportom dostępnym w sekcji ulepszenia możemy sprawdzić skuteczność dla poszczególnych typów podstron w serwisie. Podstawowy widok raportu przedstawia dane z podziałem na urządzenia, z jakiego korzystają użytkownicy. Zarówno w sekcji dotyczącej urządzeń mobilnych, jak i urządzeń desktopowych prezentowana jest liczba odnalezionych podstron o słabej jakości, wymagającej poprawy oraz tych dobrej jakości. Dokonując głębszej analizy, możemy dotrzeć do informacji na temat poszczególnych adresów URL, które należy poprawić pod kątem określonej metryki Core Web Vitals.

• Lighthouse 

Lighthouse jest narzędziem open source stworzonym przez Google, które służy do wykonywania audytów  m.in. pod kątem wydajności i jakości stron oraz aplikacji internetowych. Jest dostępne jako jedna z funkcji Chrome DevTools lub jako wtyczka do przeglądarki Chrome. Po uruchomieniu narzędzia przeprowadzona jest seria testów na stronie i zostaje wygenerowany  raport. Przedstawia on wartości, jakie przyjmują poszczególne metryki Core Web Vitals dla testowanej podstrony. Dzięki Lighthouse otrzymamy  szereg rekomendacji dotyczących ulepszeń, jakie można wprowadzić na stronie, aby poprawić jej wydajność. 

• Page Speed Insight

Page Speed Insight to kolejne narzędzie Google, bardzo podobne do wcześniej omawianego narzędzia Lighthouse. Z PSI możemy zbadać dowolny adres URL dla wersji mobilnej lub desktop i sprawdzić, jakie wartości wskaźników Core Web Vitals otrzymuje. Po uruchomieniu analizy, podany adres URL wyszukiwany jest  w zbiorze danych Chrome User Experience Report (CrUX). Jeśli dane dla podanego adresu URL są dostępnie w raporcie CrUX, wówczas  zostają zaprezentowane w interfejsie narzędzia Page Speed Insight.

Oprócz danych terenowych z raportu CrUX, Page Speed Insight korzysta również z danych laboratoryjnych pochodzących z narzędzia Lighthouse. Na ich podstawie wygenerowana zostaje ogólna ocena wydajności oraz prezentowane są rekomendacje dotyczące jej poprawy.

•  Chrome Web Vitals Extension

Wtyczka Core Web Vitals Extension to proste rozszerzenie do przeglądarki Chrome, które pozwala na szybkie sprawdzenie parametrów dla wybranej podstrony. Mierzy trzy wskaźniki Core Web Vitals w czasie rzeczywistym. Bardzo minimalistyczna w swoich funkcjach  wtyczka może posłużyć do początkowej diagnostyki i szybkiego wychwycenia podstron o niskich parametrach wskaźników. W celu dokonania głębszej analizy i odnalezienia przyczyn niskich wartości dla metryk Core Web Vitals konieczne będzie posłużenie się dodatkowymi narzędziami.

• Panel Chrome DevTools

Chrome DevTools to zestaw narzędzi dostępny w przeglądarce Google Chrome, które są niezwykle pomocne w pracy deweloperów. Ułatwiają edycję kodu źródłowego i pozwalają szybko diagnozować problemy np. te związane z wydajnością. Panel Chrome DevTools umożliwia  szczegółową analizę pod kątem optymalizacji wskaźników Core Web Vitals. Udostępnione w konsoli Chrome funkcje pozwalają na przeprowadzanie testów wydajności witryny w środowisku kontrolowanym. Ustawiając dowolne wartości dla szybkości łącza, rozdzielczości ekranu oraz procesora możemy zasymulować dowolne środowisko i sprawdzić, jak zachowuje się wydajność witryny w różnych warunkach.  

Przygotowanie środowiska testowego w Chrome DevTools

Środowisko testowe możemy skonfigurować na podstawie danych dotyczących przeciętnego użytkownika biorąc pod uwagę najbardziej powszechne rozdzielczości ekranu, najpopularniejsze parametry sieci i CPU.

W pierwszej kolejności musimy zadbać, aby przeglądarka potraktowała nas jak nowego użytkownika. W tym celu możemy przeprowadzić test w trybie incognito lub wyczyścić ciasteczka w konsoli Chrome DevTools. Czyszczenie ciasteczek sprawi, że przeglądarka nie będzie posiadała o nas żadnych informacji, a wszystkie zasoby będą wyświetlanie, tak jakbyśmy pierwszy raz odwiedzali daną stronę.

Następnie za pomocą funkcji emulatora urządzeń wybieramy rozdzielczość ekranu, dla której chcemy przetestować wydajność witryny. W tym celu możemy skorzystać ze zdefiniowanych już urządzeń mobilnych dostępnych na liście rozwijanej lub też możemy ustawić własne wartości dla dowolnej rozdzielczości ekranu. 

Następnym krokiem jest ustawienie wartości sieci, dla jakiej chcemy przeprowadzić test. Użytkownicy przeglądają internet za pomocą różnych łączy, dla każdego parametry te mogą być różne. W zakładce Performance możemy skonfigurować własną sieć o dowolnych parametrach, symulując każde wybrane środowisko. 

W konsoli istnieje także możliwość spowolnienia procesora cztero lub sześciokrotnie. Mając tak skonfigurowane środowisko możemy rozpocząć test. Przed tym upewnijmy się czy na pewno zaznaczyliśmy opcję wyświetlania informacji o Core Web Vitals. Jeśli  wszystko jest w porządku możemy odświeżyć konsolę.

Po przejściu do zakładki Performance odnajdziemy interesujące nas wartości dla metryk Core Web Vitals. Na osi czasu pojawiają się markery odpowiednio oznaczone jako LCP oraz Layout Shift. Klikając w każdy z nich otrzymujemy szczegółowe informacje o metrykach. 

Wskaźnik CLS oznaczony jest na wykresie w konsoli jako Layout Shift. Jego kliknięcie spowoduje podświetlenie elementu, którego dotyczy. Na dole pod wykresem w sekcji Summary otrzymujemy także dokładne informacje m.in o wartości tego wskaźnika. 

Analogicznie możemy postąpić w przypadku wskaźnika LCP. Po najechaniu na niego kursorem podświetlony zostaje komponent, który jest głównym elementem strony. Szczegółowe informacje w sekcji Summary pozwalają poznać czas, jaki potrzebny jest do jego pełnego wyświetlenia.  

Zobacz też pozycjonowanie aplikacji.

Identyfikacja problemów związanych z wydajnością strony

W identyfikacji problemów wpływających negatywnie na wydajność strony i wartości Core Web Vitals pomocne są narzędzia takie jak: Page Speed Insight oraz Lighthouse. Dostarczają one szereg rekomendacji i wskazują na elementy strony, które wymagają poprawy. Nieocenionym narzędziem, które pozwala lepiej zrozumieć problem wydajności strony jest również Chrome DevTools. Liczne funkcjonalności konsoli pozwalają zagłębić się w analizę strony. 

W przypadku Chrome DevTools szczególnie warto zajrzeć do zakładki Network. Odnajdziemy tam zestawienie wszystkich zasobów, jakie otrzymujemy z serwera wraz z informacjami na temat kodu odpowiedzi, typu i rozmiaru przesyłanego pliku, czasu odpowiedzi i dostarczenia zasobu oraz wiele innych danych. Pozwala to zidetyfikować elementy, które są problematycznie i wydłużają czas ładowania strony. Wszystkie dane w tej sekcji możemy filtrować i sortować według określonych kryteriów. Sortując po statusie odpowiedzi serwera możemy szybko wyłapać, które zasoby są niedostępne. Filtrując po rozmiarze zweryfikujemy elementy o największej wadze. Natomiast kolumna Time pozwala sprawdzić, które pliki ładują się najdłużej. W Konsoli znajdziemy także Waterfall, który wizualnie przedstawia specyfikę ładowania poszczególnych zasobów. 

Kolejną niezwykle pomocną funkcje podczas analizy problemów związanych z wydajnością dostarcza opcja Coverage. Pozwala ona wykryć, które pliki lub fragmenty kodu ładowane są niepotrzebnie, gdyż nie są wykorzystywane na stronie. Aby skorzystać z tej funkcji, należy wejść w opcję konsoli, wybrać zakładkę More Tools i kliknąć Coverage.

W efekcie uzyskamy zestawienie  przedstawiające źródło, z którego pobierany jest kod, typ pliku oraz to, co nas najbardziej interesuje, czyli wielkość pliku i liczbę bajtów, które nie zostały wykorzystane na stronie. Po kliknięciu w konkretne źródło wyświetlona zostanie jego zawartość. Fragmenty kodu oznaczone na czerwono nie są używane na analizowanej podstronie. 

Kolejną przydatna zakładką w narzędziu Chrome DevTools jest wspomniana wcześniej zakładka Performance. Oprócz wartości wskaźników Core Web Vitals, znajdziemy w niej informacje o występowaniu nadmiarowego kodu JavaScript. Sytuacja ta występuje, gdy ładowanych i wykonywanych jest znacznie więcej zasobów JS niż użytkownik może w danym momencie potrzebować. Aby zidentyfikować taki nadmiarowy kod należy spojrzeć na tzw. długie zadania, oznaczone na wykresie jako Long Task. Są to okresy wykonywania JavaScript, podczas których użytkownicy mogą uznać, że interfejs użytkownika nie odpowiada. 

Jak zoptymalizować stronę pod Core Web Vitals?

Do procesu optymalizacji powinniśmy podejść w sposób holistyczny skupiając się na poprawie rzeczywistej wydajności witryny, a nie tylko poszczególnych metryk. Aby zapewnić jak najlepszą jakość strony warto mieć na uwadze kilka podstawowych zasad:

• elementy z przestrzeni above the fold powinny zostać załadowane w pierwszej kolejności,
• w danym momencie powinny być ładowane tylko te pliki, które są aktualnie potrzebne,
• należy zadbać o to, aby ładowane zasoby były skompresowane i zminifikowane, 
• w miarę możliwości warto unikać ładowania zasobów z zewnętrznych serwerów.

Na wartość podstawowych wskaźników internetowych wpływa wiele czynników, które często są ze sobą powiązane. Rozwiązanie jednego problemu z wydajnością strony może przyczynić się do poprawy więcej niż jednego wskaźnika Core Web Vitals.

Kompresja grafik i zasotosowanie nowych formatów

Jedne z najczęstszych problemów związane z wydajnością strony dotyczą nieodpowiedniej optymalizacji grafik lub jej braku. Zbyt duża waga zdjęcia często wynika z niedostosowania rozmiarów obrazów zamieszczonych na serwerze względem wymiarów, w jakich wyświetlane są na stronie. Kompresja zdjęć pozwoli zaoszczędzić znaczną liczbę KB szczególnie w przypadku serwisów, które bazują na grafikach. Warto pamiętać także o zastosowaniu nowych formatów zdjęcia np. format WebP, który zapewnia doskonałą bezstratną kompresję obrazów w Internecie. Grafiki w tym formacie są znacznie lżejsze niż format .jpg, czy .png.  

Zastosowanie Lazy Loading

Lazy Load lub inaczej leniwe ładowanie to technika, która pozwala na załadowanie zasobów (np. grafik lub filmów) w momencie, w którym są one potrzebne. Oznacza to, że po wejściu na stronę przeglądarka pobiera z serwera tylko te zasoby, które użytkownik powinien zobaczyć w pierwszym widoku. Kolejne elementy zostają załadowane podczas scrollowania strony. Pozwala to znacznie ograniczyć czas oczekiwania użytkownika, potrzebne zasoby są mu serwowane na bieżąco.

Skrócenie czasu odpowiedzi serwera

Optymalizacja czasu odpowiedzi serwera wpływa na poprawę szybkości ładowania strony, a co się z tym wiąże wartości metryki LCP. W przypadku, gdy po stronie serwera wykonywane są złożone operacje, zwrócenie zawartości strony będzie zajmowało dużo czasu. Aby  skrócić czas potrzebny przeglądarce na otrzymanie danych można:

• Poprawić wydajność kodu po stronie serwera. W tym celu można m.in. zweryfikować wykorzystywane biblioteki.
• Zoptymalizować zapytania do bazy danych np. wdrożenie indeksów, normalizacja, zmigrować  bazę na nowszych system. 
• Wzmocnić serwer poprzez zwiększenie jego zasobów pamięci, CPU.
• Wykorzystać Content Delivery Network.
• Serwować statyczny HTML.
• Zastosować mechanizmy cache np. w przypadku zapytań wysyłanych do bazy danych.

Minifikacja plików JS i CSS

Minifikacja plików JS i CSS polega na usunięciu wszystkich zbędnych znaków, spacji, enterów, tabulatorów oraz komentarzy, które nie wpływają na działanie kodu, a niepotrzebnie zwiększają rozmiar pliku. Dzięki minifikacji waga plików ulega zmniejszeniu. 

Ograniczanie skryptów JS i stylów CSS

Powszechnym problemem jest ładowanie i przetwarzanie przez przeglądarkę plików JS i CSS, które nie są nigdzie wykorzystywane. Dokładna analiza zawartości plików pozwoli zidentyfikować, które fragmenty kodu są zbędne na danej podstronie. Jeśli są nieużywane należy się ich pozbyć lub zmodyfikować w taki sposób, aby wczytywały się tylko na odpowiednich podstronach, na których jest to konieczne.

Optymalizacja sekcji above the fold 

Warto zadbać o to, by kluczowe zasoby widoczne w sekcji above the fold były wczytywane wcześniej niż pozostałe. Dotyczy to głównie fontów, obrazów, filmów oraz plików CSS i JS ścieżki krytycznej. Czasami zdarza się, że istotne zasoby umieszczone są głęboko w plikach i pobierane są zbyt późno. Dla takich priorytetowych elementów można zastosować tag  <link rel = “preload”>,.

W przypadku CSS można także wyodrębnić style, które są odpowiedzialne za oscylowanie sekcji strony above the fold i umieścić je bezpośrednio w kodzie strony (inline). Opcjonalnie wyodrębnić osobny plik, który będzie ładował się szybciej, niż reszta kodu (nie kluczowy kod można opóźnić). 

Optymalizacja “długich zadań” 

W przypadku optymalizacji metryki FID przydatnym może być rozbicie długo działającego kodu na mniejsze zadania. Zgodnie z informacjami Google udostępnionymi na stronie web.dev długie zadania to każdy fragment kodu, który blokuje główny wątek na 50 ms lub dłużej. Problemem często jest ładowanie i wykonywanie nadmiarowego kodu JS, który w danym momencie nie jest potrzebny. Dzielenie długich zadań może zmniejszyć opóźnienie wprowadzania danych w witrynie.

Optymalizacja third-party code

Third-party code jest to kod innej firmy, który obejmuje m.in. reklamy, narzędzia analityczne, platformy zarządzania danymi i biblioteki obrazów. Czasami skrypty te ładowane są wcześniej niż skrypty własne. Ograniczają w ten sposób przepustowość w głównym wątku, tym samym  opóźniając czas, w którym strona jest gotowa do interakcji. Należy nadać priorytet zasobom, które zapewniają użytkownikom największą wartość i powinny być ładowane w pierwszej kolejności. Możemy także rozważyć wdrożenie dla zewnętrznych zasobów <link rel = “preconnect”>, który poinformuje przeglądarkę o zamiarze połączenia się z danym źródłem tak szybko jak to będzie tylko możliwe.

Wskazanie rozmiarów grafik

Wskazanie rozmiarów grafik za pomocą atrybutów width i height w HTML pozwala uniknąć problemu związanego z przesunięciem Layoutu i pozytywnie wpływa na wartość wskaźnika CLS. Przeglądarki ustawiają domyślne wielkości obrazów na podstawie ich atrybutów szerokości i wysokości. Dzięki temu w witrynie zarezerwowana została odpowiednia ilość przestrzeni, która potrzebna jest dla obrazu, który jeszcze się nie załadował. Należy także pamiętać o responsywności grafik. Na różnych urządzeniach powinny być wykorzystywane grafiki o różnych rozmiarach. Obrazy wyświetlane na urządzeniach mobilnych powinny być proporcjonalnie mniejsze niż te wykorzystywane na urządzeniach desktopowych. 

Podsumowanie

Nadchodząca aktualizacja Core Web Vitals jest jednym z większych updatów algorytmu wprowadzanych przez Google. Na ten moment nie wiemy, w jakim stopniu wpłynie ona na pozycje stron w wynikach wyszukiwania. Możemy jednak dostrzec kierunek, w którym zmierza Google. Skoncentrowanie się na użytkowniku i jego potrzebach jest motywem przewodnim dokonywanych aktualizacji. Algorytm jest nieustannie rozwijany poprzez uwzględnianie coraz to nowszych sygnałów związanych z User Experience. Kluczem do osiągnięcia długoterminowego sukcesu każdej witryny w sieci będzie więc zadbanie o jak najlepsze doświadczenia użytkowników związane z korzystaniem ze strony.

Źródła:

• https://web.dev/learn-web-vitals/
• https://developers.google.com/search/docs/guides/page-experience
• https://developers.google.com/web/tools/chrome-user-experience-report
• https://developers.google.com/web/tools/chrome-devtools