Core Web Vitals: czym są i jak je optymalizować

Czym są Core Web Vitals?

Core Web Vitals to metryki stworzone przez Google w celu poprawy doświadczenia użytkownika na stronach internetowych. Szeroka różnorodność narzędzi dostępnych do analizy szybkości ładowania była jednym z czynników, który Google wzięło pod uwagę, ujednolicając wszystkie te metryki, by nieco uprościć złożoność optymalizacji czasów ładowania. Inicjatywa ta ma na celu sprawić, byśmy skupili się na tych „sygnałach jakości", które są tak ważne dla osiągnięcia optymalnego doświadczenia użytkownika.

Google streszcza w kilku słowach, na czym skupiają się Core Web Vitals:

• ›

  Doświadczenie ładowania

• ›

  Interaktywność

• ›

  Stabilność wizualna treści strony

Largest Contentful Paint (LCP)

LCP, czyli Largest Contentful Paint, to metryka informująca nas o czasie ładowania „największej" treści widocznej dla użytkownika, by była dostępna i użyteczna. Innymi słowy, Google mówi, że elementy umieszczone w tzw. „Above the Fold" muszą ładować się szybko i być czytelne, by były dostępne dla użytkownika, by mógł z nimi wchodzić w interakcję.

Trzeba doprecyzować, że elementy pojawiające się, gdy użytkownik kliknie ekran lub przewinie, nie wpływają na LCP. Największą treścią może być blok tekstu, wideo, obraz itp.

Klasyfikacja stanu LCP według czasów. Obraz © web.dev

Jaki czas Google uważa za optymalny?

Jak widzimy na wykresie, Google uważa, że maksymalny czas załadowania LCP zapewniający dobre doświadczenie użytkownika to poniżej 2,5 sekundy. Warto zauważyć, że podczas ładowania element LCP może się zmieniać.

Jak sprawdzić LCP danego URL-a?

W samej przeglądarce Chrome, przez uruchomienie audytu Lighthouse, mamy opcję sprawdzenia, co Google uważa za największą treść do załadowania. Oto jak:

Jakie czynniki mogą wpływać na ładowanie LCP?

Kilka działań wpływa na to, że czas ładowania LCP jest wyższy niż oczekiwany. Te elementy lub działania to:

• ›

  Odpowiedź serwera

• ›

  Zapytania do bazy danych

• ›

  Odpowiedzi API, które długo się rozwiązują

• ›

  CSS lub JS blokujące renderowanie

• ›

  Powolność w ładowaniu innych zasobów

• ›

  Niezoptymalizowane obrazy

• ›

  Itp.

First Input Delay (FID)

FID, czyli First Input Delay, to metryka wskazująca, jak długo strona reaguje, gdy użytkownik wchodzi w interakcję z którymkolwiek z elementów.

Metryki pobrane z Pagespeed

W narzędziu Pagespeed, które Google udostępniło wszystkim jakiś czas temu, możemy zobaczyć odniesienie do tej metryki. Wartości uznawane za dobre powinny być poniżej 100 ms.

Klasyfikacja stanu First Input Delay (FID) według czasów. Obraz © web.dev

Główne przyczyny problemów z tą metryką (FID) wynikają z wykonywania JavaScript, więc trzeba zidentyfikować, która część kodu sprawia, że strona długo reaguje na interakcję. Osobiście doświadczyłem tego problemu z ładowaniami JS od reklam.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift to metryka, która ustala granice ładowania elementów modyfikujących wyświetlanie podczas ich ładowania. Mówimy o zapewnieniu stabilności elementom na ekranie, by widok nie przesuwał się w miarę ładowania innych zasobów.

Google uważa (cóż, Google i każdy użytkownik), że bardzo irytujące jest, gdy zaczęliśmy interakcję ze stroną (czytanie, scrollowanie itp.) i element ładujący się później przesuwa pozycję użytkownika względem treści, zmuszając go do korekty przez przewinięcie.

Ten przykład pomaga lepiej wyjaśnić, jak działa ta metryka. Najpierw widzimy treść załadowaną po lewej stronie. Gdy Google mówi o stabilności, ma na myśli, że ładowanie trzeciego elementu nie przesuwa wcześniej załadowanych. Jak widzimy na obrazie po prawej, załadowanie filmu YouTube przesunęło dwa bloki, które zostały załadowane wcześniej.

Dlaczego Core Web Vitals są ważne?

Odkąd współistniejemy z wyszukiwarkami, a konkretnie z Google, wprowadza ono obowiązki dla każdego, kto ma stronę i chce, by była jedną z opcji w wynikach wyszukiwania.

Poprawa dostępności na wszystkich urządzeniach, sprzyjanie bezpiecznemu przeglądaniu pod protokołem bezpieczeństwa lub karanie witryn, które używały inwazyjnych reklam (interstitials), to były niektóre z bitew technologicznego giganta.

Te metryki to wskaźniki, które Google nam daje, by wskazać, które części witryny mogą być problemem dla użytkownika, ale... Czy to oznacza, że są ważne?

Czy patrzymy na strony z perspektywy „robotów", czy z perspektywy „użytkowników", te metryki są wskaźnikami, że nasze strony nie działają tak dobrze, jak powinny. Widzieliśmy już w kilku badaniach, jak wpływowy jest czas ładowania na konwersję i na cierpliwość użytkownika. Obecnie nie wpływają na pozycje, ale czy mamy zignorować te metryki?

Z naszej strony — z pewnością weźmiemy je pod uwagę.

Czy Core Web Vitals wpływają na pozycje?

Na dzień dzisiejszy wszystko, co wiemy, to to, że metryki poprawiające doświadczenie użytkownika stają się coraz ważniejsze, a niektóre z nich już są brane pod uwagę w wynikach wyszukiwania. W artykule z 28 maja na blogu Google ogłoszono, że w 2021 roku ma zostać wdrożona nowa Aktualizacja, by włączyć kilka metryk związanych z doświadczeniem użytkownika.

Wystarczy przypomnieć sobie, jak poradziło sobie z Mobile First Index i wcześniejszymi powiadomieniami. W tym przypadku, odwołując się ponownie do artykułu z maja, ostrzega, że nastąpi wcześniejsze powiadomienie z co najmniej 6-miesięcznym wyprzedzeniem, więc... Czy będzie aktualizacja pod koniec przyszłego roku?

Narzędzia do optymalizacji Core Web Vitals

Skoro już mówiliśmy o tym, czym są Core Web Vitals i jakie znaczenie będą miały w nadchodzących miesiącach, czas zacząć pracować nad optymalizacją tych metryk. Dzięki różnym narzędziom będziemy w stanie zająć się problemami, które zostaną wykryte, i osiągnąć poprawę wydajności.

Lighthouse

Lighthouse to potężne narzędzie open-source, które znajdziemy w Chrome. Dzięki Lighthouse możemy przeprowadzić audyt naszej strony, uruchamiając różne testy, by uzyskać wyniki dotyczące braków lub części strony, które wymagają optymalizacji. Wśród tych części są metryki Core Web Vitals.

Obraz pobrany z wyników audytu Lighthouse

Page Speed Insights

Page Speed Insights to kolejna opcja, którą Google nam udostępnia, by uzyskać dane wydajnościowe naszej strony. To narzędzie pokazuje nam nawet wykresy najważniejszych metryk i ich stan. Page Speed Insights opiera się na raporcie doświadczenia użytkownika, którego celem jest uzyskanie danych w porównaniu z innymi stronami.

Metryki oferowane przez Page Speed Insights

Chrome UX

Chrome User Experience Report to zestaw danych, które Google udostępnia o zachowaniu użytkowników na całym świecie przez Chrome. Aby uzyskać dostęp do tych danych, trzeba używać Big Query, a także mieć konto Google Cloud.

Przez Google Data Studio ułatwili dostęp i mają wszystko prawie gotowe dla nas w tym Dashboardzie

Chrome Dev Tools

Możemy analizować metryki Core Web Vitals nie tylko z Lighthouse; jeśli zagłębimy się w narzędzia deweloperskie Chrome, możemy dojść do tych samych wniosków. Na przykład, w zakładce „Performance", jeśli zrobimy nagranie lub nowe ładowanie, możemy uzyskać wartościowe informacje o tym, jak zachowuje się nasz URL.

Zrzut ekranu z opcji Performance w Chrome Dev Tools

Web.Dev

Zawsze jest łatwiejszy sposób na zrobienie pewnych rzeczy, przynajmniej jeśli chodzi o poznanie naszych Core Web Vitals. Na oficjalnej stronie mamy stronę szczegółowo opisującą każdą metrykę i dającą nam wyjaśnienie, czym jest, oraz praktyki, by ją poprawić.

Dodatkowo, w Chrome Store mamy rozszerzenie, które daje nam te informacje przy wejściu na każdy URL:

Z czerwonym lub zielonym oznaczeniem możemy zobaczyć stan naszego URL-a w odniesieniu do tych metryk:

Zrzut ekranu wyników podawanych przez rozszerzenie Web Vitals

Search Console

Search Console to niezbędne narzędzie dla każdego webmastera. Dodano funkcjonalność, która pomaga nam zobaczyć, które URL-e mają problemy z tymi 3 metrykami (LCP, FID i CLS). W menu po lewej stronie mamy opcję „Core Web Vitals". Gdy wybieramy tę opcję, pojawiają się dwa wykresy pokazujące wyniki URL-i według urządzenia. Jeśli wybierzemy urządzenie (desktop lub mobile), zobaczymy szczegółowo, które URL-e mają problemy.

Nie alarmuj się, jeśli zobaczysz wysoką liczbę URL-i po prawej; to jest stosunkowo normalne, ponieważ problemy zwykle występują według typów stron (np. wpisy na blogu) i praca nad jednym z nich da nam poprawę we wszystkich.

Wnioski

Ta podróż przez Core Web Vitals ma na celu wprowadzić nas w metryki, które będą zyskiwać coraz większe znaczenie, a my, czy to SEO-wcy, czy webmasterzy, będziemy z nimi żyć. Z SEOcrawl chcemy zarekomendować, byś korzystał ze wszystkich narzędzi, które Ci dostarczyliśmy, które bez wątpienia pomogą Ci poprawić wydajność WPO Twojej strony.

*Przyjmujesz wyzwanie poprawy szybkości swojej strony? Wykonaj test którymkolwiek z wymienionych narzędzi i wyślij nam wiadomość ze zrzutem ekranu. Damy Ci wskazówkę, jak ją poprawić, całkowicie za darmo! *