Core Web Vitals a sklep internetowy. Jesteśmy gotowi na nowe zmiany w Google.

Google zapowiedział aktualizację swojego algorytmu na maj 2021, a polegać ona będzie na uwzględnianiu w wynikach wyświetlania w wyszukiwarce tzw. Core Web Vitals, czyli tzw. Podstawowych wskaźników internetowych. Temat bardzo świeży i niezwykle aktualny, dlatego trzymamy rękę na pulsie:)

W tym artykule odpowiemy na pytania czym są Core Web Vitals oraz dlaczego są ważne, w jaki sposób uwzględniamy je w pracy nad sklepami zbudowanymi na naszej platformie, a także jakie zmiany należy wprowadzać już teraz, a jakie w przyszłości. 

Google już od 2010 roku promuje strony spełniające warunek szybkości ładowania. Dodatkowo brane pod uwagę były także czytelność prezentowanych treści, bezpieczeństwo użytkowników oraz właściwie działające strony w wersji mobile. Teraz Google kładzie nacisk na doświadczenie użytkowników na stronie, a jednocześnie daje bardzo jasne wytyczne jaka powinna być dobra strona internetowa:)

  1. strona powinna szybko wyświetlać najważniejsze, najbardziej widoczne po wejściu, elementy
  2. strona powinna umożliwiać szybką interakcję z jej zasobami
  3. strona powinna być stabilna w trakcie ładowania

Powyższe 3 cechy to jednocześnie 3 Podstawowe wskaźniki internetowe, czyli wspomniane już Core Web Vitals.

Google oficjalnie potwierdziło, że Core Web Vitals będą miały wpływ na pozycjonowanie (SEO) stron internetowych, jednak jak wiadomo nie będzie to jedyny czynnik rankingowy.

Ponadto niskie wyniki Web Vitals to problemy związane głównie z wydajnością frontendu strony – ze względu na różnice w warstwie prezentacyjnej sklepów opartych o platformę EC dla każdego z nich należy przeprowadzić odrębną analizę oraz zastosować odmienne techniki optymalizacyjne. Dla każdego sklepu opartego o platformę EC wdrażamy moduł konwersji obrazów do formatu WebP. Jest to format nowej generacji, który pozwala zachować świetną jakość wyświetlanych zdjęć przy jednoczesnym (nawet dwukrotnym) zmniejszeniu rozmiaru pliku. Moduł WebP dostępny będzie od wersji 2.28.

Czym są Core Web Vitals?

Web Vitals są zaproponowanymi przez Google metrykami doświadczenia płynącego z używania strony, wpływającymi istotnie na wynik Lighthouse, PageSpeed insights i SEO. Pokazują różnorakie wady stron, które wcześniej nie były mierzalne.

Celem nadrzędnym serwisów oraz sklepów powinna być więc optymalizacja frontendu, a więc postrzeganej przez Użytkowników wydajności stron. Wskaźniki są tylko sugestiami i należy patrzeć na nie holistycznie, gdyż poprawienie jednego, może powodować spadki drugiego.

Optymalizacja frontendu sklepu to inwestycja, która się zwraca. Od maja 2021 roku strony dostosowane do wytycznych Web Vitals są faworyzowane w wynikach wyszukiwania. Użytkownicy częściej także wracają do serwisów przyjaznych w obsłudze – dzięki korzystaniu z nowoczesnych narzędzi pomiarowych możemy zidentyfikować problemy optymalizacyjne, na temat których wcześniej mogliśmy wyłącznie spekulować.

Krystian Derdziński
Developer w Best.net

Podział Web Citals:

  • core – 3 najważniejsze z nich
  • other – pozostałe, które pomagają oszacować problemy jakie pojawiają się w podstawowych. Na przykład LCP wynika z TTFB oraz FCP, a FID może być zależny od TBT oraz TTI. Szczegóły poniżej:)
Źródło: https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Core web vitals:

Largest Contentful Paint (LCP)

Największe wyrenderowanie treści, które oznacza postrzegalną wydajność ładowania. Jest to czas załadowania największego elementu, który Użytkownik widzi po wejściu na stronę, a więc wszystko to co widzimy na stronie przed rozpoczęciem scrollowania, np. bannery i inne grafiki, video lub elementy blokowe, fragment tekstu.

Źródło: https://seo-hacker.com/core-web-vitals-optimization-guide/

Optymalny wynik LCP to 2,5 sekundy – innymi słowy: największy element postrzegany w polu widzenia Użytkownika po załadowaniu strony (obraz, zdjęcie, tekst lub film) powinien zostać wyświetlony szybciej niż 2,5 sekundy. Wyświetlenie największego elementu w widzianej przez użytkownika części strony jest dla niego istotną wskazówką, że strona jest już załadowana i można podejmować z nią interakcję.

Platforma Extreme Commerce optymalizuje metrykę Largest Contentful Paint poprzez:

  • priorytetyzację ładowania zasobów
  • wyświetlanie obrazów nowej generacji w formacie webp (funkcjonalność dostępna od wersji 2.28)
  • optymalizację rozmiarów wykorzystywanych obrazów
  • używanie mechanizmu cache
  • stosowanie technik optymalizacyjnych dla skryptów JS oraz arkuszy styli CSS

PS. Wersji 2.28 jeszcze nie mamy w pełni ukończonej – coming soon 🙂

First Input Delay (FID)

Wskaźnik, który mierzy opóźnienie w interakcji jaka zachodzi między użytkownikiem a stroną, tj. jak długo użytkownik musi czekać od momentu wykonania pierwszej akcji po wejściu na stronę (kliknięcia w link, kliknięcia w banner lub przycisk) do momentu wyświetlenia się poszukiwanej treści. FID to inaczej postrzegalny poziom interaktywności strony i jest on szczególnie istotny właśnie na tych serwisach, gdzie interakcja jest podstawą poruszania się po stronie. Aby strona oferowana użytkownikowi dobre doświadczenia, wskażnik FID powinien wżynosić maksymalnie 100 milisekund.

Źródło: https://seo-hacker.com/core-web-vitals-optimization-guide/

Platforma Extreme Commerce optymalizuje metrykę First Input Delay poprzez:

  • priorytetyzację ładowania skryptów
  • stosowanie technik optymalizacyjnych dla skryptów JS
  • ładowanie modułów sklepowych zależnie od potrzeb użytkownika
  • redukowanie ilości zapytań o zasoby zewnętrzne w przeglądarce
  • dbanie o jak najszybszą odpowiedź z serwera na działania użytkowników
  • stosowanie w razie potrzeby tzw. resource hint – informowanie przeglądarki o zasobach, które powinny zostać załadowane jako pierwsze
  • doładowywanie elementów niewidocznych dla użytkownika dopiero w przypadku potrzeby ich wyświetlenia – modale, popupy
  • stosowanie mechanizmu lady loading

PS. Ostatnie 3 (resource hint, doładowywanie w razie potrzeby, lazy loading) są zależne od specyfiki danego sklepu – to należy wdrażać indywidualnie zależnie od tego, jak jest urządzony front serwisu. U jednego może być już wdrożone, u innych nie, u jednego klienta może być dla danego elementu wdrożone, dla innych nie – front zawsze customizujemy pod potrzeby biznesowe i projekt graficzny, jest to bardzo indywidualna kwestia.

Cumulative Layout Shift (CLS)

Wskaźnik, który mierzy postrzegalną wizualną stabilność. Oznacza to, że wszystkie elementy na stronie pozostają stabilne, żaden z nich nie przesuwa się, layout strony “nie rozsypuje się”, nie pojawiają się żadne dodatkowe elementy na stronie np. reklamy.

Ten wskaźnik może mieć wartość od 0 (brak przesunięć na stronie) do 1 (duże przesunięcia). Żeby można było powiedzieć o stronie, że zapewnia użytkownikom dobre wrażenia z poruszania się po niej, wynik CLS musi być nie większy niż 0,1, a gdy użytkownik wchodzi na stronę i próbuje wykonać jakąś akcję, np. kliknąć w któryś z elementów menu głównego, nie ma nic gorszego niż przesunięcie, które powoduje, że ostatecznie użytkownik ląduje w innym miejscu strony.

Źródło: https://seo-hacker.com/core-web-vitals-optimization-guide/

Wskaźnik Cumulative Layout Shift dotyczy graficznej warstwy serwisu – czynniki generujące niepoprawny wynik mogą różnić się w zależności od layoutu, ułożenia interfejsu oraz elementów widocznych na stronie. Optymalizacji należy dokonywać w sposób indywidualny – stąd też nie wprowadzamy żadnych zmian ogólnosklepowych (w całej platformie).

W celu osiągnięcia zadowalającego wyniku proponujemy wdrożenie następujących zmian:

  • Wyodrębnienie tzw. krytycznego CSS (odpowiadającego za wymiary elementów na różnych rozmiarach ekranów) i ładowanie go w pierwszej kolejności, przed innymi regułami styli
  • Interfejsy nowych funkcjonalności projektujemy z dużym naciskiem na osiągnięcie najlepszego możliwego wyniku metryki CLS
  • czcionki ładujemy poprzez font-swap – zanim zostanie załadowana rzeczywista czcionka widoczna na stronie, wyświetlana jest czcionka systemowa, po załadowaniu właściwego fonta jest on podmieniany. Użytkownik z gorszym łączem internetowym jest w stanie rozpocząć zapoznawanie się z treścią przed doładowaniem się czcionki, w przypadku lepszego łącza zmiana jest tak błyskawiczna, że jest niewidoczna. Czcionkę systemową dobieramy w taki sposób, by krojem przypominała czcionkę właściwą – dzięki temu nie występuje przesunięcie elementów.
  • To jest niezwykle indywidualna kwestia – praktycznie dla każdego sklepu należy dokonać odrębnej analizy i wykonać innego rodzaju pracę.
Źródło: https://web.dev/optimize-cls/

Po co się tym w ogóle zajmować?

Google zwraca na to dużą uwagę – przeważnie o wprowadzonych zmianach informuje dopiero po ich wdrożeniu. Tym razem jest inaczej, co tym bardziej świadczy o wadze zmian oraz o tym, że Google faktycznie będzie brał pod uwagę wyniki Web Vitals w wynikach wyświetlania stron.

  • zmiany są zapowiedziane z dużym wyprzedzeniem
  • mają istotny wpływ na wynik Lighthouse
  • Google utworzył pokaźną stronę stronę z kompendium wiedzy, w którym opisane są wszystkie wskaźniki i ich wzajemny wpływ
  • Google stworzył narzędzia dla developerów

Powody biznesowe dla przedsiębiorców:

  • Wg analizy Chromium źle zoptymalizowane Web Vitals podnoszą prawdopodobieństwo opuszczenia strony o 24%, co oznacza, że o ¼ zwiększamy szansę, że Użytkownik kupi u konkurencji zamiast w naszym sklepie.
  • Web Vitals są nowym pomysłem – wytyczne i wagi wskaźników będą z czasem się zmieniać. Jeśli będziemy optymalizować efektywnie i będziemy cały czas na bieżąco z kolejnymi zmianami, to z pewnością klienci to docenią.
  • Lepsze wyniki Web Vitals to lepsze SEO, a przecież dzięki temu sklepy zyskują nowych klientów

Optymalizacja Core Web Vitals to lepsze wyniki sprzedaży, zwiększenie poziomu zadowolenia użytkowników końcowych, więcej powracających klientów, wyższa pozycja w wynikach wyszukiwania. W Best Net kładziemy nacisk na kulturę optymalizacji – dokładamy wszelkich starań, aby nasze rozwiązania były nie tylko funkcjonalne, elastyczne oraz bezpieczne, lecz także wydajne.

Avatar
Lidia Palusińska

Dodaj komentarz

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