Core Web Vitals – czym są i jak je poprawić w sklepie Magento?

12.08.2022 Angelika Siczek
grafika do tekstu core web witals

Celem Google jest zapewnianie użytkownikom bezbłędnych i wartościowych wyników wyszukiwania. To właśnie to podejście sprawia, że wyszukiwarka od czasu do czasu przedstawia nowe wytyczne dla właścicieli stron internetowych. Niedawno pojawił się nowy zestaw takich wytycznych, znany jako Core Web Vitals (CWV). Odnosi się on do tego, jak działa Twoja strona. Co musisz wiedzieć o Core Web Vitals? I jak możesz wprowadzić te zalecenia, jeśli prowadzisz sklep na Magento?

Obecnie są trzy główne CWV – LCP, FID i CLS. Każdy wskaźnik klasyfikuje strony indeksowane przez boty Google jako „dobra”, „wymaga poprawek” lub „słaba”. Oczywiście powinno Ci zależeć na tym, aby każdy miernik wskazywał wynik „dobra”. Ale co one tak właściwie oznaczają? Przyjrzyjmy się podstawowym Core Web Vitals.

LCP – Largest Contentful Paint

Pierwszy wskaźnik odnosi się do szybkości ładowania Twojej strony. Im szybciej się wczytuje, tym lepiej. Google określa LCP jako miernik, który „raportuje czas renderowania największego bloku obrazu lub tekstu widocznego w widocznym obszarze w stosunku do momentu, w którym strona zaczęła się wczytywać po raz pierwszy.

wykres lcp

Źródło: web.dev/vitals/

Nie jest to zbyt prosta definicja, więc nieco ją uprośćmy i powiedzmy, że LCP mierzy, jak szybko ładuje się Twoja strona. Idealny wynik to mniej niż 2,5 sekundy. Oczywiście obejmuje to zarówno stronę desktopową, jak i mobilną.

FID – First Input Delay

Drugi wskaźnik skupia się na interaktywności. FID to, zgodnie z definicją Google, wskaźnik, który „mierzy czas od pierwszej interakcji użytkownika ze stroną do momentu, w którym przeglądarka jest w stanie faktycznie rozpocząć przetwarzanie zdarzeń w odpowiedzi na tę interakcję”. Znowu warto pokusić się o prostsze wyjaśnienie – ile czasu zajmuje Twojej witrynie zareagowanie na pierwszą czynność podjętą przez użytkownika. Im krótszy jest ten czas, tym bardziej interaktywna i responsywna jest Twoja strona.

wykres fid

Źródło: web.dev/vitals/

Tutaj ważna uwaga – FID mierzy opóźnienie (delay) w procesowaniu czynności użytkownika, a nie całkowity czas, jaki jest potrzebny, żeby ją wykonać.

CLS – Cumulative Layout Shift

Próbowałeś kiedyś kliknąć link na stronie, która jeszcze się nie wczytała? Ile razy taki link nagle zniknął lub przeniósł się gdzieś indziej? To bardzo frustrujące doświadczenie, prawda? Nieoczekiwany ruch treści na stronie nigdy nie jest pozytywnym doświadczeniem i na ogół wynika z asynchronicznego ładowania się zasobów strony. Dlatego pojawiła się potrzeba wprowadzenia miernika, jakim jest CLS. Pokazuje on, jak stabilna wizualnie jest Twoja witryna.

cls wykres

Źródło: web.dev/vitals/

W idealnej sytuacji CLS nie powinien przekroczyć 0,1. Wynik do 0,25 jest akceptowalny, ale warto wtedy podjąć dalsze działania, aby go jeszcze obniżyć.

Jak możesz poprawić swoje wyniki CWV?

Cel jest prosty – powinieneś celować w same zielone wyniki w Core Web Vitals. Pierwszym krokiem jest zmierzenie rezultatów, które osiągasz aktualnie. Możesz wykorzystać w tym celu trzy różne narzędzia, wszystkie dostarczane przez Google:

cwv tabelka

Źródło: web.dev/vitals

PageSpeed Insights to zdecydowanie najprostszy wybór. Nie musisz się nigdzie logować; wystarczy, że podasz adres domeny i poczekasz na wyniki. A skoro o nich mowa – otrzymasz gotową listę zaleceń, które warto wdrożyć, aby poprawić otrzymany rezultat.

Załóżmy, że prowadzisz sklep na Magento i chcesz poprawić swoje wyniki. Co możesz zrobić? Niestety nie ma gotowych narzędzi, które umożliwią automatyczne wprowadzenie wytycznych Google. Musisz zrobić to ręcznie, zalecenie po zaleceniu. A jeśli chodzi o sklepy internetowe, typowe kwestie do rozważenia obejmują:

  • Niewykorzystywany kod/CSS: jeśli na Twojej stronie jest coś, co już nie jest w użyciu – pozbądź się tego. Im więcej kodu, tym wolniejsza strona.
  • Niezoptymalizowane zdjęcia: sklepy internetowe mają tysiące zdjęć produktów. Jeśli nie są zoptymalizowane (zbyt ciężkie lub w złym formacie) to mogą poważnie obciążyć stronę.
  • Zewnętrzny kod: jeśli masz dużo zewnętrznego kodu na stronie, to będzie się ona ładować i reagować wolniej. Usuń cały zbędny kod zewnętrzny.
  • Zbyt wiele wtyczek: wtyczki są z pewnością kuszące, bo znacznie ułatwiają prowadzenie sklepu, ale zbyt duża ich liczba także spowalnia sklep. Przyjrzyj się wtyczkom i rozszerzeniom, z których korzystasz. Czy na pewno wszystkie są potrzebne?
  • Zbyt wiele przekierowań: to częsty problem witryn mobilnych. Jeśli Twoje przekierowania wyglądają w ten sposób: TwojSklep.pl [taki adres wpisuje użytkownik] -> m.TwojSklep.pl -> m.TwojSklep.pl/home [właściwy adres strony mobilnej], to Twoja witryna mobilna nigdy nie będzie tak efektywna, jak to możliwe.

Podsumowanie: pracuj nad Core Web Vitals!

Jeśli chcesz być dobrze widoczny w Google, to po prostu musisz dopasowywać swoją stronę do zaleceń wyszukiwarki, w tym do CWV. Jeśli potrzebujesz z tym pomocy, jesteśmy do Twojej dyspozycji. Global4Net specjalizuje się w tworzeniu i ulepszaniu sklepów zbudowanych na Magento. Jeśli prowadzisz e-sklep na tej platformie, po prostu się z nami skontaktuj. My zajmiemy się resztą!

Cyfrowe newsy / Bądź na bieżąco

Od początku 2022 roku wchodzimy w skład Unity Group. Teraz zapisując się do naszego newslettera, będziesz na bieżąco z informacjami całej naszej organizacji.

    Wypełniając formularz wyrażasz zgodę na wysyłkę newslettera przez Unity S.A. z siedzibą we Wrocławiu. Zgodę możesz wycofać w każdej chwili. Więcej informacji na ten temat znajdziesz w naszej polityce prywatności.

    *Wymagane

    Andrzej-kurs-programowania

    Andrzej Szylar

    Chief Executive Officer

    E-mail:

    andrzej.szylar@unitygroup.com
    Magda2

    Magdalena Paczyńska-Kamienik

    HR Manager

    E-mail:

    magdalena.paczynska@unitygroup.com
    Aleksandra

    Aleksandra Bielawska-Clegg

    HR Business Partner

    E-mail:

    Michal

    Michał Duława

    New Business Developer

    E-mail:

    Katarzyna

    Katarzyna Zajchowska

    Marketing Partner

    E-mail: