Raport: Core Web Vitals w e-commerce

Jak branża e-commerce przygotowuje się
na przyjęcie nowego algorytmu Google?

Szybkość i wydajność serwisu online należą do kluczowych elementów mających wpływ na powodzenie w biznesie e-commerce. Zgodnie z zapowiedzią, począwszy od sierpnia 2021 r. Google będzie uwzględniał wskaźniki Core Web Vitals w swoich rankingach wyszukiwania.

Aby ułatwić branży e-commerce przygotowanie się do tych zmian, stworzyliśmy narzędzie monitorujące, które pozwala zweryfikować przygotowanie e-sklepów do nowych wytycznych Google.

Wykorzystując dane pochodzące z opublikowanego przez Senuto raportu  „E-COMMERCE W POLSCE 2021. Sklepy internetowe z najlepszym SEO” oraz narzędzia Chrome UX Report, przygotowaliśmy rozwiązanie, które analizuje poziom gotowości e-sklepów na przyjęcie nowego algorytmu, z uwzględnieniem poszczególnych wskaźników wchodzących w skład Core Web Vitals. Nasz monitoring bazuje na TOP 5000 sklepów z największymi poziomami widoczności w naturalnych wynikach wyszukiwania i spośród nich wyłania zarówno rankingowych liderów, jak i witryny z najsłabszymi wynikami. Rozwiązanie umożliwia także przeanalizowanie pod tym kątem własnej strony. 

Z poniższego materiału dowiesz się m.in.:

1. w jakim stopniu branża e-commerce przygotowuje się do nadchodzącej aktualizacji algorytmu Google,
2. jakie sklepy w danym miesiącu uzyskały najlepsze wyniki Core Web Vitals,
3. które ze sklepów internetowych wypadają najsłabiej w tym obszarze,
4. w jakiej kondycji jest Twój sklep i w jakich obszarach wymaga optymalizacji,
5. czym są wskaźniki Core Web Vitals i dlaczego są tak ważne dla branży e-commerce,
6. oraz w jaki sposób poprawić swoje wyniki. 

 

Raport dla branży e-commerce (n=5000)

*Liderzy = serwisy z największą widocznością w naturalnych wynikach wyszukiwania, z pominięciem zapytań brandowych

 

Top10 najszybszych e-sklepów

*Liderzy = serwisy z największą widocznością w naturalnych wynikach wyszukiwania, z pominięciem zapytań brandowych

 

10 najwolniejszych e-sklepów

*Liderzy = serwisy z największą widocznością w naturalnych wynikach wyszukiwania, z pominięciem zapytań brandowych

 

Twoja strona. Wpisz jej nazwę i sprawdź wyniki:

 

Potrzebujesz pomocy w poprawie szybkości swojego sklepu?

Zadzwoń do nas: +48 605 102 016 lub napisz.

Core Web Vitals w SEO już w sierpniu 2021. Czy Twoja strona jest gotowa?

Od jakiegoś czasu Google wprowadza do algorytmów wyszukiwania zmiany, których celem jest poprawa doświadczeń użytkowników i ulepszanie jakości prezentowanych wyników. W sierpniu br. wprowadzona zostanie kolejna ważna zmiana – na pozycję danej witryny w rankingu wyszukiwania wpływ będą miały Core Web Vitals, czyli wskaźniki jakości strony. Czym są Core Web Vitals? Jak przygotować swoją stronę na nowe wytyczne SEO Google? I jak radzą sobie z tym inni? Zapraszamy do lektury.

Historia wdrożenia Core Web Vitals do czynników decydujących o SEO danej witryny rozpoczęła się w maju 2020 roku. Wtedy to po raz pierwszy Google ogłosiło, że będzie uwzględniać w wynikach wyszukiwania wskaźniki dotyczące jakości danej strony[1]. Co dokładnie obejmują te wskaźniki i jaki jest cel tej zmiany?

 

Core Web Vitals w SEO. Cel: ulepszyć UX

Nie od dziś wiadomo, że głównym celem Google jest ciągłe polepszanie doświadczeń użytkowników i jakości prezentowanych wyników wyszukiwania. We wskaźnikach CWV chodzi dokładnie o to samo – aby kierować użytkowników do stron, które są stabilne i działają prawidłowo.

Dzięki temu użytkownicy Google rzadziej będą klikać linki stron, które mają niestabilną strukturę (Cumulative Layout Shift – CLS), długo się ładują (Largest Contentful Paint – LCP) lub wolno odpowiadają na interakcje (First Input Delay – FID), ponieważ takie witryny będą prezentowane niżej w stronie z wynikami wyszukiwania (Search Engine Results Page – SERP).

Chociaż nowe zalecenia Google odnoszą się do tak naprawdę wszystkich stron w sieci, to szczególnie poważnie powinna je potraktować branża e-commerce. Nie od dzisiaj wiadomo, że to właśnie w sklepach internetowych klienci oczekują nienagannego działania, sprawnego ładowania i doskonałej obsługi klienta. Core Web Vitals doskonale wpasowują się w te oczekiwania.

 

Czym są Core Web Vitals?

Gdybyśmy chcieli przetłumaczyć to określenie na język polski, najlepszym określeniem byłoby „podstawowe (lub główne) wskaźniki internetowe”. Samo Google na swoim blogu przyznaje, że lista CWV będzie się rozwijać w miarę upływu czasu. Jednak na te chwilę główną rolę odgrywają trzy – LCP, FID oraz CLS. Każdy wskaźnik Core Web Vitals klasyfikuje strony indeksowane przez robota Google, jako „dobrej jakości”, „wymagające poprawy” lub „słabej jakości”. Co się kryje pod tymi skrótami?

 

LCP (Largest Contentful Paint): czas ładowania

To wskaźnik, który mierzy czas ładowania największego pliku graficznego lub bloku tekstu widocznego w tzw. viewporcie, czyli podglądzie strony[2]. Google wskazuje, że czas ładowania LCP nie powinien przekroczyć 2,5 sekundy. Akceptowalny jest też czas między 2,5 a 4 sekundy, jednak Google sugeruje, że Twoją rolą, jako właściciela witryny, jest poprawienie tego czasu. Wyszukiwarka, dokonując analizy, bierze pod uwagę wszystkie elementy (także te wewnątrz ) oraz

 

FID (First Input Delay): przyspieszenie interakcji

Ten wskaźnik mierzy czas od momentu pierwszej interakcji z witryną do momentu, gdy przeglądarka jest w stanie rozpocząć przetwarzanie zdarzeń odpowiadających na tę interakcję. Mówiąc prościej: jest to czas, jaki jest potrzebny, aby Twoja witryna zaczęła przetwarzać daną interakcję. Taka interakcja to np. kliknięcie linku. Wskaźnik FID bierze pod uwagę w szczególności duże pliki JavaScript, które odpowiadają za blokowanie głównego wątku przeglądarki, a tym samym negatywnie wpływają na interaktywność.

Google sugeruje, że czas ten powinien wynosić optymalnie 100 milisekund[3]. Dopuszczalne są czasy do 300 milisekund, jednak z takim założeniem jak powyżej – wtedy wymagają one poprawy.

 

CLS (Cumulative Layout Shift): jakość wizualna

To wskaźnik mierzący jakość, a przede wszystkim stabilność wizualną Twojej witryny. Chodzi tutaj przede wszystkim o różnego rodzaju przesunięcia treści pojawiające się na stronie, na przykład w trakcie jej wczytywania. Warto dodać, że mówimy tutaj o niezamierzonych i niechcianych przesunięciach, czyli takich, które mogą negatywnie wpłynąć na doświadczenia użytkowników. Idealnie wskaźnik CLS nie powinien przekraczać poziomu 0,1. Dopuszczalny jest poziom do 0,25, ale wiadomo, że wymaga on wtedy dalszych prac.

Google na stronie poświęconej CLS dobrze pokazuje, o jakie przesunięcia może na przykład chodzić:

 

Źródło grafiki: https://webdev.imgix.net/cls/layout-shift-4.png

 

Na wspomnianej stronie znajdziesz też dokładne informacje, w jaki sposób te niezamierzone przesunięcia są weryfikowane. To, co należy zapamiętać to fakt, że im więcej niestabilnych elementów na Twojej stronie, im więcej niechcianych przesunięć treści czy grafik, tym wyższy będzie wskaźnik CLS.

 

W jaki sposób mierzyć poszczególne wskaźniki?

Google udostępnia ujednolicone wskazówki związane z Web Vitals dla wszystkich witryn. Dzięki temu wiemy, co jest istotne, aby roboty indeksujące uznały, że dana strona zapewnia użytkownikom doskonałe wrażenia podczas korzystania z niej. Obecnie wszystkie narzędzia Google dla programistów pozwalają mierzyć wskaźniki Core Web Vitals, przez co umożliwiają dokonanie szybkiej diagnozy strony, a następnie wprowadzenie zmian rozwiązujących problemy związane z wygodą korzystania przez internautów. Każde narzędzie powstało w innym celu, jednak pomiar metryk Core Web Vitals jest ich wspólnym mianownikiem.

Wyróżniamy dwa podstawowe rodzaje narzędzi:

  • narzędzia laboratoryjne – zapewniają wgląd w to, w jaki sposób potencjalny użytkownik prawdopodobnie będzie korzystał z Twojej witryny,
  • narzędzia terenowe – prezentują, w jaki sposób prawdziwi użytkownicy doświadczają witryny. Ten rodzaj pomiaru jest często nazywany monitorowaniem rzeczywistym użytkownika (z ang. Real User Monitoring – RUM).

Każde narzędzie laboratoryjne lub terenowe oferuje odrębną wartość w zakresie optymalizacji doświadczenia użytkownika, dlatego do analizy witryny pod kątem wskaźników Web Vitals warto korzystać ze wszystkich dostępnych narzędzi. Dzięki temu uzyskasz pełen wgląd w to, jak Twoja strona sobie radzi i jakie elementy na niej zamieszczone wymagają poprawy. Do mierzenia poszczególnych wskaźników można wykorzystać:

 

  • Lighthouse,
  • PageSpeed Insights,
  • Chrome DevTools,
  • Search Console,
  • Chrome UX Report,
  • WebVitails dla Chrome.

 

WAŻNE: Dla ułatwienia dodajmy, że Chrome UX Report, PageSpeed Insights i Search Console to narzędzia, które obecnie pozwalają sprawdzić wszystkie trzy Core Web Vitals.

 

Źródło grafiki: https://web.dev/vitals-tools/

 

Lighthouse

Lighthouse to zautomatyzowane narzędzie open source, służące do wykonywania audytu witryn internetowych. Pomaga programistom diagnozować problemy i identyfikować możliwości poprawy komfortu ich użytkowania. Dostępne jest jako jedna z funkcji Chrome DevTools lub jako wtyczka do przeglądarki Chrome. Lighthouse po uruchomieniu analizuje stronę i wykonuje szereg testów, na podstawie których generowany jest raport przedstawiający wartości dla poszczególnych wskaźników Core Web Vitals.

Lighthouse dostarcza ważnych informacji diagnostycznych, niezbędnych do optymalizacji doświadczeń użytkownika. Korzystając z tego narzędzia, otrzymasz wiele istotnych informacji dotyczących zmian, jakie możesz wprowadzić na stronie, w celu poprawy jej wydajności. Z pewnością wpłynie to pozytywnie na doświadczenia użytkowników odwiedzających Twoją witrynę.

 

Źródło grafiki: https://web.dev/vitals-tools/

 

Pagespeed insights

PageSpeed ​​Insights (PSI) to narzędzie, które działa w bardzo zbliżony sposób do Lighthouse. Za jego pomocą można zbadać dane terenowe dla dowolnego adresu URL, zarówno w wersji stacjonarnej, jak i mobilnej. Dzięki raportowi Chrome UX umożliwia zapoznanie się z informacjami o tym, w jaki sposób realni użytkownicy postrzegają Twoją stronę. PSI wykorzystuje również dane laboratoryjne, które importuje z Lighthouse (wyróżnione są niebieskim znacznikiem), a następnie na ich podstawie prezentuje zestaw praktycznych zaleceń, które jako właściciel witryny możesz wdrożyć, aby poprawić wrażenia użytkowników.

Podczas gdy Search Console wskazuje elementy na stronie wymagające poprawy, PSI pomaga zidentyfikować możliwości dla poszczególnych podstron, aby poprawić komfort użytkowników. W PSI można wyraźnie zobaczyć, czy Twoja strona zapewnia odpowiednie doświadczenie internautom we wszystkich podstawowych pomiarach Vitals.

 

 

Chrome DevTools

Chrome DevTools oferuje zestaw przydatnych narzędzi, z których można korzystać w przeglądarce, dlatego wielu deweloperów chętnie wykorzystuje go w codziennej pracy. Za pomocą Chrome DevTools można:

  • diagnozować problemy występujące na stronie,
  • przeanalizować poszczególne wskaźniki Core Web Vitals,
  • dokonać szybkiej edycji kodu źródłowego strony.

Jednocześnie dzięki konsoli Chrome możliwe jest przeprowadzenie testów wydajności witryny w kontrolowanym środowisku. Nowa sekcja panelu wydajności – „Performance”, pozwala zasymulować dowolne środowisko i zaobserwować, w jaki sposób kształtuje się w danych warunkach wydajność witryny. Można ustawić między innymi takie parametry jak: szybkość procesora, rozdzielczość ekranu oraz szybkość łącza. Jest to niezwykle przydatne do identyfikowania i naprawienia problemów z niestabilnością wizualną na stronie.

 

Źródło grafiki: https://web.dev/vitals-tools/

Źródło grafiki: https://web.dev/vitals-tools/

 

Uruchomienie środowiska Chrome DevTools

Aby uruchomić konsolę Chrome DevTools i przeprowadzić test należy otworzyć stronę internetową, która ma zostać poddana analizie, a następnie:

 

  • wcisnąć Control+Shift+J (dla urządzeń Mac: Command+Option+J), aby pojawiła się konsola:

 

  • wybrać zakładkę wydajność (z ang. Performance):

 

  • za pomocą funkcji emulatora urządzeń wybrać rozdzielczość ekranu, dla którego przeprowadzony będzie test wydajności:

 

  • wskazać wartości sieci, dla jakiej zostanie przeprowadzony test. W tym miejscu można również spowolnić procesor:

 

 

Tak przygotowane środowisko umożliwia wykonanie testu. W panelu Chrome DevTools, w zakładce Performance zaprezentowane zostaną wartości dla poszczególnych wskaźników Core Web Vitals. Na osi czasu zostaną one oznaczone odpowiednio jako LCP lub Layout Shift. Po kliknięciu w jeden z nich otrzymasz szczegółowe informacje o każdej z metryk.

 

Search Console

Nowy raport Core Web Vitals w Search Console pozwala zidentyfikować strony, które w danej witrynie wymagają poprawy. Wszystkie informacje, które generuje Search Console, opierają się o rzeczywiste dane importowane z CrUX (Chrome UX Report)

Podstawowy raport Search Console prezentuje informacje w oparciu o rzeczywiste dane z CrUX, z podziałem na poszczególne urządzenia, z których korzystają użytkownicy. Jeśli poświęcisz trochę więcej czasu i gruntownie przeanalizujesz raport, możesz dotrzeć do informacji dotyczących poszczególnych adresów URL Twojej witryny. Search Console zaprezentuje Ci, które z nich wymagają poprawy pod kątem poszczególnych wskaźników Core Web Vitals. Jeśli jakiś adres URL nie zawiera minimalnej liczby danych wymaganych do przeanalizowania dla tych metryk, jest pomijany w raporcie.

 

Źródło grafiki: https://web.dev/vitals-tools/

 

Po zidentyfikowaniu strony, na której występują problemy związane z Core Web Vitals, możesz następnie skorzystać z PageSpeed ​​Insights, aby poznać konkretne sugestie dotyczące optymalizacji dla reprezentatywnych stron.

 

Chrome UX Report

Jedynym sposobem, aby naprawdę dowiedzieć się, jak działa witryna, jest faktyczne zmierzenie jej wydajności w czasie, gdy użytkownicy ładują ją i wchodzą z nią w interakcje. Ten typ pomiaru jest powszechnie określany jako monitorowanie rzeczywistego użytkownika – lub w skrócie RUM. Chrome UX Report (CrUX) to podstawowe narzędzie, które pozwala zbadać, jakie doświadczenia towarzyszą internautom podczas korzystania z witryny.

 

CrUX korzysta z kluczowych wskaźników internetowych, pobranych od użytkowników, którzy na to wyrazili zgodę. Innymi słowy, Chrome UX Report to publiczny zbiór danych, który przedstawia rzeczywiste wrażenia użytkowników na milionach witryn. Umożliwia systematyczne monitorowanie wartości poszczególnych wskaźników Core Web Vitals. Interfejs API aktualizuje się codziennie i podsumowuje dane z ostatnich 28 dni (w przeciwieństwie do zbioru danych BigQuery, który jest agregowany co miesiąc). Aby uzyskać dostęp do najnowszych informacji wystarczy po prostu odświeżyć pulpit Google Data Studio, na którym prezentowany jest raport CrUX.

Warto zaznaczyć, że Chrome UX Report nie prezentuje szczegółowych danych. Wskazuje tylko ogólny stan witryny. Aby uzyskać dostęp do bardziej precyzyjnych danych warto skorzystać z Page Speed Insight lub Google Search Console.

 

Źródło grafiki: https://web.dev/vitals-tools/

 

Wtyczka Web Vitals

Rozszerzenie Web Vitals to bardzo minimalistyczne narzędzie, które mierzy trzy wskaźniki Core Web Vitals w czasie rzeczywistym dla (desktopowej) przeglądarki Google Chrome. Rozszerzenie to jest już dostępne do zainstalowania z Chrome Web Store i może być przydatne do wychwytywania problemów na wczesnym etapie przepływu pracy. Równie dobrze sprawdzi się jako podstawowe narzędzie diagnostyczne do oceny wydajności Core Web Vitals. Nie ulega jednak wątpliwości, że rzetelna analiza i identyfikacja przyczyn niskich wartości metryk, nie będzie możliwa bez skorzystania z bardziej rozbudowanych narzędzi.

 

Core Web Vitals. Od czego zacząć?

Ilość zaprezentowanych narzędzi i różnorodność ich zastosowania może wydawać się przytłaczająca. Przed rozpoczęciem pracy nad optymalizacją Core Web Vitals warto więc zastanowić się, w jakiej kolejności stosować poszczególne narzędzia. Aby wesprzeć Cię przy stawianiu pierwszych kroków proponujemy następującą kolejność działań:

 

  1. Użyj Lighthouse w DevTools, aby zoptymalizować doświadczenie użytkownika i upewnić się, że jesteś odpowiednio przygotowany do optymalizacji Core Web Vitals.
  2. Skorzystaj z PageSpeed ​​Insights, aby porównać wydajność strony zarówno w warunkach laboratoryjnych, jak i w rzeczywistości (w terenie).
  3. Wypróbuj nowy interfejs Chrome User Experience Report API aby sprawdzić, jak Twoja witryna i poszczególne adresy URL radziły sobie z Core Web Vitals w ciągu ostatnich 28 dni.
  4. Skorzystaj z sekcji Performance w panelu Wydajność DevTools, aby dokładnie przeanalizować i „zdebugować” występującą liczbę błędów i nieprawidłowości w zakresie określonych metryk.
  5. Zapoznaj się z raportem Search Console dotyczącym podstawowych funkcji Web Vitals, aby podsumować dotychczasowe wyniki Twojej witryny w zakresie Core Web Vitals.
  6. Użyj rozszerzenia Web Vitals, aby na bieżąco śledzić wydajność strony w czasie rzeczywistym.

 

Jak poprawić poszczególne wskaźniki Core Web Vitals?

Do procesu modyfikacji i optymalizacji strony pod kątem metryk Core Web Vitals warto podejść w sposób holistyczny. Skupienie uwagi na poszczególnych metrykach nie przyniesie oczekiwanych rezultatów. Należy skierować uwagę na poprawie rzeczywistej wydajności witryny, ponieważ często na wartość poszczególnych wskaźników Core Web Vitals wpływa wiele różnych czynników, które niejednokrotnie są ze sobą powiązane. Zatem rozwiązanie jednego z problemów dotyczących wydajności witryny może ostatecznie wpłynąć na poprawę więcej niż jednej metryki.

 

Jak poprawić wskaźnik LCP?

Na LCP największy wpływ mają cztery główne elementy:

  • długi czas odpowiedzi serwera,
  • elementy JavaScript i CSS blokujące renderowanie,
  • długi czas ładowania zasobów witryny,
  • renderowanie po stronie klienta.

Aby poprawić wskaźnik LCP warto rozpocząć od czynności optymalizujących skupionych wokół CSS, obrazów, fontów i elementów JavaScript. Korzystne okaże się również zastosowanie natychmiastowego ładowania za pomocą PRPL[4]. W przypadku wielu stron wskaźnik LCP ulega poprawie już po samym usunięciu kodu Google Analytics.

 

Jak poprawić wskaźnik FID?

Przede wszystkim warto wykorzystać wspomniane już narzędzie Lighthouse do przeprowadzenia audytu i wprowadzić otrzymane zalecenia. Warto też pomyśleć o minimalizacji wpływu kodu stron trzecich na Twojej witrynie i o skróceniu czasu wykonywania elementów JavaScript. Pamiętaj też, aby utrzymywać niską liczbę żądań i małe rozmiary transferów.

 

Jak poprawić wskaźnik CLS?

Są trzy najważniejsze zasady, którymi należy się kierować, aby obniżyć CLS:

  • Zawsze umieszczaj atrybuty rozmiaru na obrazach i elementach wideo. Chodzi o to, aby przeglądarka mogła „przydzielić” odpowiednią ilość miejsca na dany element podczas ładowania obrazu.
  • Nigdy nie wstawiaj nowej treści nad już istniejącą treścią, chyba że w odpowiedzi na interakcję ze strony użytkownika.
  • Animuj przejścia w sposób zapewniający kontekst i ciągłość między poszczególnymi stanami.

 

Jak wyglądają Core Web Vitals Twojej strony?

Do sierpnia zostało stosunkowo niewiele czasu. Zachęcamy, aby już teraz przyjrzeć się trzem omówionym przez nas wskaźnikom CWV. Może się okazać, że wdrożenie najnowszych zaleceń Google będzie wymagać dużych przeróbek na Twojej stronie. Dlatego zadbaj, abyś zdążył przed wprowadzeniem tych zmian do algorytmu.

 

Potrzebujesz pomocy z pomiarem Core Web Vitals?
Skontaktuj się z nami.
Dostosujemy Twoją witrynę do najnowszych wytycznych Google.

 

Zadzwoń do nas +48 605 102 016

lub zostaw kontakt do siebie:

 

Źródła:

[1] https://developers.google.com/search/blog/2020/11/timing-for-page-experience
[2] https://web.dev/lcp/
[3] https://web.dev/fid/
[4] https://web.dev/apply-instant-loading-with-prpl/

 

Mateusz Rzetecki, SEO&CM Director 
Chcesz dowiedzieć się więcej na temat aktualizacji? Napisz

Korzystamy z plików cookies oraz podobnych technologii, by móc jak najlepiej dostosować serwis do Twoich potrzeb oraz serwować Tobie interesujące Ciebie reklamy. Korzystając z naszego serwisu zgodnie z aktualnymi ustawieniami przeglądarki, wyrażasz zgodę na używanie plików cookies i podobnych technologii.

Więcej w Polityce Cookies 5