Core Web Vitals

Core Web Vitals – czym są te czynniki, jak je mierzyć?

Google nieprzerwanie informuje webmasterów, że podstawowym celem działań przy wyszukiwarce jest ułatwienie i usprawnienie użyteczności. Firmie zależy, by użytkownicy w jak najkrótszym okresie znaleźli dokładnie tego, czego szukają. Z jednej strony brzmi to górnolotnie, z drugiej jednak możemy dostrzec działanie na rzecz rozwoju wartości Google, a nie zadowolenia userów. Im szybsza i bardziej praktyczna wyszukiwarka, tym łatwiej gigantowi z USA monetyzować inwestycje. Dążąc do udoskonalania wyszukowarki – część działań jest przerzucanych na webmasterów. Jednym z nich jest dbanie o prędkość i użyteczność serwisu internetowego.

Page Experience Signals

Google w ostatnim czasie coraz mocniej interesuje się poprawą użyteczności – wprowadzając oficjalne czynniki Page Experience Signals. Czy są te czynniki? Jest to zestaw czynników (niezwiązanych z jakością treści) służących Google do ewaluacji serwisów internetowych pod kątem UX.

Core Web Vitals

Są to następujące czynniki:

  • Wczytywanie strony (Loading)
  • Interaktywność w serwisie (Interactivity)
  • Stabilność wizualna (Visual stability)
  • Przyjazność dla urządzeń mobilnych (Mobile friendliness)
  • Bezpieczeństwo surfowania (Safe browsing)
  • Szyfrowane i bezpieczne połączenie (HTTPS)
  • Brak inwazyjnych reklam zasłaniających treści (No Intrusive Interstitials).

Pierwsze trzy spośród wyżej wymienionych czynników stanowią filat ogłoszonych w tamtym roku Core Web Vitals i dołączą do pozostałych czterech (stosowanych już obecnie), stając się czynnikami rankingowymi już niedługo – dokładnie w maju 2021.

Czym są dokładnie Core Web Vitals?

Core Web Vitals nie jest tylko ogólną definicją czynników UX, które Google zaraz zacznie analizować przy ocenie rankingowej stron. Jest to głównie zbiór jasno określonych czynników – wzbogaconych o szczegółowe wytyczne do mierzenia ich i oczekiwane wartości. Jakie czynniki znajdują się w w/w Core Web Vitals?

Wczytywanie: Largest Contentful Paint (LCP)

Google w celu ustalenia wartości oceny tempa wczytywania strony (w kontekście użyteczności dla internautów) wybrać mierzalną wartość w postaci czasu wczytania największego elementu graficznego lub bloku tekstowego wewnątrz widocznego fragmentu strony (AboveTheFold).

Czynnik LCP

Sposób oceny wyniku LCP:

  • Dobry wynik LCP: mniejszy niż 2,5 sekundy
  • Wynik LCP wymagający poprawy: czas pomiędzy 2,5 a 4 sekundy
  • Zły wynik LCP: powyżej 4 sekund.

Co wpływa na poprawę wyniku LCP:

  • poprawa czasu odpowiedzi serwera
  • optymalizacja plików graficznych
  • optymalizacja plików CSS i JS

Więcej na ten temat w dokumentacji Google: https://web.dev/optimize-lcp/

Interaktywność serwisu: First Input Delay (FID)

Nie tylko wczytanie strony jest istotne. Istotna jest też gotowość do działania. Aby oceniać interaktywność – wdrożono czynnik FID, czyli czas reakcji strony na działania użytkownika.

Czynnik FID

Sposób oceny wyniku FID:

  • Dobry wynik FID: mniejszy niż 100 milisekund
  • Wynik FID wymagający poprawy: czas pomiędzy 100 a 300 milisekund
  • Zły wynik FID: powyżej 300 milisekund.

Co wpływa na poprawę wyniku FID:

  • zmniejszenie wpływu zewnętrznych zasobów
  • skrócenie okresu wczytywania JS
  • redukcja liczby zapytań do serwera

Więcej na ten temat w dokumentacji Google: https://web.dev/fid/ a na temat optymalizacji przeczytasz pod adresem https://web.dev/optimize-fid/ .

Stabilność wizualna: Cumulative Layout Shift (CLS)

Kolejnym aspektem utrudniającym życie internatów jest sytuacji, gdy chcemy kliknąć link lub przycisk, a strona doładowuje treści i przesuwa elementy. Chyba każdy w ten sposób kliknął nie ten przycisk, który zamierzał.

Właśnie z tego powodu Google wprowadziło CLS – pomiar całkowitej wartości (liczby oraz wielkości) przesunięć elementów strony w czasie jej wczytywania i wyświetlania.

Czynnik CLS

Sposób oceny wyniku CLS:

  • Dobry wynik FID: mniejszy niż 0.1
  • Wynik FID wymagający poprawy: wartość przesunięcia pomiędzy 0.1 a 0.25
  • Zły wynik FID: przesunięcie powyżej 0.25.

Jak ograniczyć CLS:

  • uwzględnianie wymiarów obiektów graficznych i video w HTMLu
  • unikanie implementacji treści nad istniejącą zawartością
  • blokowanie przestrzeni dla elementów strony (z użyciem CSS)
  • unikanie animacji, które zmieniają pozycje obiektów na stronie.

Więcej na ten temat w dokumentacji Google: https://web.dev/optimize-cls/

Jak mierzyć Core Web Vitals swojej strony?

Opisaliśmy wyżej wszelkie czynniki, które wpływają na ocenę strony przez Google. Do każdego z nich mamy dokumentację Google – opisującą znaczenie czynników i sposoby na optymalizację. Coraz częściej webmasterzy zadają pytanie – w jaki sposób można sprawdzić ocenę Google w kontekście Core Web Vitals?

Google Page Speed Insights

Page Speed Insights od Google

Link: https://developers.google.com/speed/pagespeed/insights/

Web.dev

web dev od Google

Link: https://web.dev/pl/measure/

Chrome Web Vitals (wtyczka do przeglądarki Chrome)

Chrome Web Vitals (wtyczka do przeglądarki Chrome)

Link: https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

Zapraszamy do testowania swoich stron i naprawiania ich – najlepiej przed majem 2021 🙂

Sprawdź również video content od Google: