Core Web Vitals – czym jest i jak zoptymalizować stronę?

Szybko działająca strona internetowa to bez wątpienia jeden z najważniejszych czynników, który ma bezpośredni wpływ na sprawną realizację celów jakie przed nią postawimy. Biorąc pod uwagę to, że z perspektywy przedsiębiorcy końcowym efektem jaki będzie go interesował podczas prowadzenia działań marketingowych w wyszukiwarce Google są konwersje, zdecydowanie należy przyjrzeć się tematowi szybkości ładowania strony bliżej.

Jednym z głównych celów Google jest zmniejszenie liczby zasobów serwerowych potrzebnych do przeanalizowania milionów stron internetowych. Jest to jeden z kluczowych kosztów jakie ponosi amerykańska firma dlatego też optymalizowanie tego procesu ma tak duży priorytet. Poprzez wprowadzanie kolejnych aktualizacji algorytmu jest w stanie poniekąd wymusić na właścicielach stron dostosowywanie się do ich wytycznych tak aby osiągali oni lepsze wyniki w wyszukiwarce. Analogiczna sytuacja miała miejsce w przypadku np. zabezpieczania stron za pomocą protokołu https, który wpływał na bezpieczeństwo jej użytkowania.

Dlaczego przyspieszenie strony jest ważne?

Szybsza strona to większa szansa na konwersję, niższy współczynnik porzuceń oraz dodatkowy czynnik wpływający na pozycję strony w wynikach wyszukiwania. Z perspektywy prowadzenia działań reklamowych w Google Ads możemy też liczyć na lepszy współczynnik jakości podczas oceniania naszej strony przez algorytm. Jak widać na poniższej grafice strona, która ładuje się średnio 5s powoduje zwiększenie prawdopodobieństwa opuszczenia użytkownika, który na niej przebywa aż o 90%.

Prawdopodobieństwo opuszczenia przez użytkownika strony ze względu na szybkość jej ładowania

Prawdopodobieństwo opuszczenia przez użytkownika strony ze względu na szybkość jej ładowania. Źródło: https://www.thinkwithgoogle.com/

Core Web Vitals – czym jest?

Na połowę roku 2021 zapowiedziana została aktualizacja algorytmu Core Web Vitals. Jest to następny update, który jest skupiony na elementach wpływających na doświadczenia użytkownika podczas korzystania z naszej strony internetowej. W przeszłości były to aktualizacje – “Mobile First Index”, która skoncentrowana była na prawidłowej obsłudze witryny na urządzeniach mobilnych oraz update dotyczący szybkości wczytywania serwisu.

Sygnały wpływające na odbieranie strony przez użytkownika wraz z Core Web Virtals

Sygnały wpływające na odbieranie strony przez użytkownika wraz z Core Web Virtals. Źródło: https://developers.google.com/

Web Vitals to elementy, które wpływają na wygodę korzystania z witryny przez użytkownika. Należą do nich:

  • LCP (Largest Contentful Paint) – jest to czas potrzebny na załadowanie największego elementu na stronie. Nie powinien być dłuższy niż 2,5 sekundy,
  • FID (First Input Delay) – jest to czas jaki potrzebuje przeglądarka na reakcję po akcji wykonanej przez użytkownika. Wartość ta powinna być jak najniższa, optymalnie ma mieścić się poniżej 0,1 sekundy,
  • CLS (Cumulative Layout Shift) – jest to miernik skumulowanych przesunięć treści na stronie, które nie są oczekiwane dla użytkownika. Wartość powinna wynosić mniej niż 0,1.

    Trzy najważniejsze współczynniki wpływające na wynik CWV

    Trzy najważniejsze współczynniki wpływające na wynik CWV. Źródło: https://web.dev/pl/vitals/

Jak mierzone są Core Web Vitals?

  • Dane laboratoryjne (lab data): pomiary, które są wykonywane za pomocą dedykowanych narzędzi informujących o tym, jakie mogą być doświadczenia użytkownika odwiedzającego naszą pojedynczą stronę. Dane laboratoryjne znajdziemy w narzędziach Page Speed Insight czy Lighthouse i mierzą one wskaźniki takie jak: FCP, SI, LCP, TTI, TBT, CLS. Oczywiście jest to pojedynczy pomiar w aktualnie występujących warunkach laboratoryjnych, dlatego analizę Core Web Vitals warto oprzeć dodatkowo o dane rzeczywiste (tzw. dane zgromadzone),

    Dane laboratoryjne pochodzące z PSI

    Dane laboratoryjne pochodzące z PSI

  • Dane zgromadzone (field data): dane pochodzą od realnych użytkowników korzystających z przeglądarki Chrome odwiedzających naszą stronę. Obrazują one średnią wskaźników Core Web Vitals z ostatnich 28 dni, które pochodzą z raportu Chrome User Experience Report (CrUX). Zgromadzone dane są mierzone z pomocą narzędzia Google Page Speed Insight oraz Google Search Console i mierzą  FCP, LCP, FID, CLS.

    Dane laboratoryjne pochodzące z PSI

    Dane laboratoryjne pochodzące z PSI

To w jaki sposób ważone są wyżej wymienione współczynniki możemy sprawdzić korzystając z dedykowanego kalkulatora. Pamiętać należy o tym, że jest on na bieżąco aktualizowany i dane na nim przedstawione mogą zmieniać się w czasie.

Lighthouse Scoring Calculator (ver. 8)

Lighthouse Scoring Calculator (ver. 8) : https://googlechrome.github.io/lighthouse/scorecalc/

Jak przetestować swoją stronę pod względem Core Web Vitals?

W tym artykule skupimy się na narzędziach dostarczonych przez Google takich jak Page Speed Insight, Lighthouse (wtyczka do przeglądarki Chrome) oraz danych pochodzących z tzw. CrUX (Chrome User Experience Report). Pamiętać należy o tym, że jest to spojrzenie na aspekt szybkości ładowania ze strony wyszukiwarki Google, która tworząc swoje raporty, często skupia się na mniej istotnych kwestiach z punktu widzenia realnego poprawienia szybkości ładowania witryny. Nie mówiąc już o samym Core Web Vitals opisywanym poniżej, które skupiają się na ułamku zagadnień z tym związanych. Dlatego też zachęcam do skorzystania z innych narzędzi typu gtmetrix.com, webpagetest.org czy narzędzia deweloperskiego w przeglądarce Chrome aby ocenić rzeczywiste parametry naszej witryny i na ich podstawie poprawić podstawowe wskaźniki. Polecam zapoznać się z poradnikiem z oficjalnego kanału Ahrefs:

Uwaga! Pamiętaj aby testom poddawać już docelowo stworzoną stronę ze wszystkimi grafikami, skryptami i innymi treściami.

Wyzwanie pojawia się w przypadku gdy chcemy sprawdzić globalną kondycję naszej witryny. Ponieważ pamiętać należy o tym, że powyższe narzędzia (w podstawowej formie) pozwalają na sprawdzenie jednego adresu url jednocześnie. Jeżeli chcielibyśmy spojrzeć na całościową sytuację możemy skorzystać z narzędzia Screaming Frog Spider oraz poradnika: https://www.screamingfrog.co.uk/scaling-pagespeed-insights/ – otrzymamy wtedy dane laboratoryjne dla wszystkich podstron naszego serwisu.

Dane w Google Search Console

Jeżeli interesują nas natomiast dane zgromadzone to należy skorzystać z narzędzia Google Search Console w zakładce “Podstawowe wskaźniki internetowe”. Informacje o adresach URL są zbierane niezależnie od tego, czy należą one do usługi w Search Console. Należy pamiętać o tym, że pojawienie się ekranu “Brak dostępnych danych” oznacza, że usługa jest nowa w Search Console lub, że w raporcie na temat użytkowania Chrome nie ma dostatecznej ilości danych o użytkownikach.

Uwaga! Po wdrożeniu optymalizacji musi upłynąć kilka dni aby Google był w stanie zebrać odpowiednią ilość nowych danych. Aby przyspieszyć proces warto skorzystać z opcji weryfikacji.

Dane dotyczące Core Web Vitals w Search Console

Dane dotyczące Core Web Vitals w Search Console

Dobrej jakości Wymagana poprawa Słabej jakości
LCP <= 2,5 s <= 4 s > 4 s
FID <= 100 ms <= 300 ms > 300 ms
CLS <= 0,1 <= 0,25 > 0,25

Mierzenie CWV w Google Analytics

W newsletterze Macieja Lewińskiego opublikowany został poradnik, w jaki sposób dodać pomiar Core Web Vitals do Google Analytics za pomocą zdarzeń. Cała operacja przeprowadzana jest poprzez Google Tag Manager według instrukcji (stworzonej przez Maciej Lewińskiego):

  1. W menu nawigacyjnym GTM kliknij Administracja (menu u góry).
  2. W sekcji Kontener (prawa kolumna) kliknij Import kontenerów.
  3. Kliknij przycisk Wybierz plik kontenera i wskaż plik core_web_vitals.json.
  4. Wybierz, czy chcesz dodać importowany plik do nowego lub istniejącego obszaru roboczego.
  5. Wybierz opcję Zastąp lub Scal. Wybranie opcji Zastąp spowoduje usunięcie wszystkich istniejących tagów, reguł oraz zmiennych i zastąpienie ich zawartością importowanego kontenera. W przypadku opcji Scal zawartość kontenerów zostanie połączona.
  6. Kliknij Potwierdź.
  7. Opublikuj kontener.
  8. Gotowe!

Jak poprawić wyniki Core Web Vitals dla WordPress?

Na rynku pojawiło się wiele narzędzi, które pomagają w poprawieniu wyników Page Speed Insight. Jednym z bardziej skutecznych jest NitroPack. Czy to narzędzie rozwiązuje wszystkie problemy związane szybkością ładowania strony? Otóż NIE. Pamiętać należy o tym, że zawsze pierwszym krokiem musi być skupienie się na realnych przyczynach szybkości ładowania strony a dopiero potem można zainteresować się NitroPack. Dlaczego? Ponieważ narzędzie to pozwoli nam polepszyć wyniki w badaniach laboratoryjnych natomiast jeżeli nie zadbamy o realną szybkość ładowania się strony dane zgromadzone ulegną jedynie niewielkiej poprawie (lub żadnej).

Jako przykład podam wdrożenie na WordPress natomiast jak podaje strona producenta narzędzia jesteśmy w stanie wdrożyć je także na:

Platformy obsługiwane przez Nitropack

Platformy obsługiwane przez Nitropack

Narzędzie jest darmowe do miesięcznego limitu 5000 odsłon lub 1Gb transferu. Dla większych stron warto zapoznać się z cennikiem.

Kroki instalacji:

    1. Przechodzimy na stronę nitropack.io i tworzymy konto,
    2. W panelu administracyjnym WP instalujemy wtyczkę: https://wordpress.org/plugins/nitropack/,
    3. Przechodzimy do ustawień: Ustawienia => NitroPack,
    4. Łączymy naszą stronę danymi ze strony narzędzia wpisując je w odpowiednie pola,
    5. Warto włączyć poniższą opcję aby NitroPack
    6. Dodatkowo w sekcji “Select what post/page types get optimized” warto wykluczyć mało istotne typy treści. Dla standardowego WordPressa będą to: archiwa, formaty, tagi, media. Organiczny to liczbę wykorzystywanych zasobów,
    7. Jeżeli wystąpią problemy na stronie skorzystaj z suwaka, który ograniczy liczbę wdrożonych zmian.

Pamiętajmy, że wielu użytkowników w Internecie korzysta z urządzeń starszego typu lub ich połączenie internetowe nie spełnia dzisiejszych standardów. Dlatego też nawet po wdrożeniu optymalizacji mogą pojawiać się czasowe błędy. Duży wpływ może mieć także stabilność serwera, na którym utrzymywana jest strona internetowa.

0 komentarzy:

Dodaj komentarz

Chcesz się przyłączyć do dyskusji?
Feel free to contribute!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *