Google zapowiedział aktualizację swojego algorytmu na maj 2021. Polegać ona będzie na uwzględnianiu w wynikach wyświetlania w wyszukiwarce Core Web Vitals, czyli Podstawowych wskaźników internetowych. Temat bardzo świeży i niezwykle aktualny, dlatego trzymamy rękę na pulsie:)
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 – dobra strona internetowa powinna:
- szybko wyświetlać najważniejsze, najbardziej widoczne po wejściu, elementy
- umożliwiać szybką interakcję z jej zasobami
- być stabilna w trakcie ładowania
Powyższe 3 cechy to jednocześnie 3 Podstawowe wskaźniki internetowe, czyli Core Web Vitals.
Google oficjalnie potwierdziło, że Core Web Vitals będą miały wpływ na pozycjonowanie (SEO) stron internetowych. Nie będzie to oczywiście 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 będziemy przeprowadzać odrębną analizę. Zastosujemy także odmienne techniki optymalizacyjne oraz wdrożymy 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ą one 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:)
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ę. Zazwyczaj sią to bannery i inne grafiki, video lub elementy blokowe, fragmenty tekstu.
Optymalny wynik LCP to 2,5 sekundy. Innymi słowy – największy element w polu widzenia Użytkownika po załadowaniu strony (obraz, zdjęcie, tekst lub film) wyświetla się szybciej niż 2,5 sekundy. Dla Użytkownika jest to istotna 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ą. Oznacza to jak długo Użytkownik musi czekać od momentu wykonania pierwszej akcji np. kliknięcia w link, do momentu wyświetlenia się poszukiwanej treści. FID to inaczej postrzegalny poziom interaktywności strony. Jest on szczególnie istotny 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.
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. Należy je wdrażać indywidualnie zależnie od tego, jak jest urządzony front serwisu. 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ą nieruchome. Nikt przecież nie lubi, gdy coś się przesuwa, layout strony „rozsypuje się” albo pojawiają się jakieś dodatkowe elementy 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 nie może być wyższy niż 0,1. Nie ma nic gorszego, gdy klikamy w jakiś element, np. banner, a ostatecznie lądujemy w innym miejscu.
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ę.
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. Świadczy to 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.
Pozdrawiamy
Best.net Team
