Szybkość działania strony od lat jest kluczowym elementem wpływającym na efektywność kampanii digitalowych. W przypadku użytkownika, który posiada wybór i nie jest zdeterminowany na konkretną markę wolno ładująca się strona to bardzo często powód na powrót do Google i wybranie innego wyniku wyszukiwania. To zjawisko jest o tyle ciekawe, że w wielu przypadkach nie zmierzymy go nawet za pomocą Google Analytics, ponieważ część prób otworzenia naszej strony zostanie zaniechanych zanim załaduje się sam kod Analytics. Wiemy również, że szybkość ładowania się strony zyskuje na wadze w przypadku ruchu mobilnego, gdzie dodatkowo szybkość działania sieci sama w sobie może spowodować wolne ładowanie się np.: przeładowanych ciężkimi zdjęciami stron.
Google od lat prezentowało dane na temat spadku szansy na konwersję, a sam wynik jakości jako narzędzie diagnostyczne do oceny optymalizacji kampanii jasno pokazuje niskie wyniki dla wolno ładujących się stron. Narzędzia takie jak PageSpeed Insights były również ciekawą podpowiedzią do raportów GTMetrix czy Pingdom, które pokazywały jakie elementy mogą wpływać negatywnie na czas ładowania się strony. Wreszcie Google postanowiło powiedzieć jasno, że czas ładowania się strony jest ważny, ale w kontekście wrażenia ładowania się strony przez użytkownika. Po pierwsze, jeśli założymy, że na przykład wszyscy dealerzy samochodowi mają ciężkie i wolno ładujące się strony, to czynnik ten nie będzie tak ważny dla końcowej konwersji jak np.: w e-commerce. Po drugie strona może ładować się długo w tle, ale póki nie przeszkadza to użytkownikowi, to nie mamy większego problemu, a wszelkie optymalizacje czasu ładowania się to kosmetyka.
Core Web Vitals opisują właśnie to wrażenie ładowania się strony skupiając się na trzech ważnych aspektach:
LCP czyli Largest Contentful Paint mówi o czasie ładowania się największego elementu na danej stronie, a dokładniej w viewport, czyli tym co widzimy na ekranie. Łatwo domyślić się, że np.: zarządzanie kolejnością ładowania się elementów może mieć pozytywny wpływ na ten parametr, podobnie jak optymalizacja obrazków poprzez zastosowanie nowoczesnych formatów. W ocenie Google mamy 2.5 sekundy, aby załadować najważniejszą treść.
Aby ocenić CWV w ramach tego artykułu będę korzystał z narzędzia web.dev, alternatywnie możesz skorzystać z Lighthouse wbudowanego w Twoją przeglądarkę Chrome w narzędziach dla deweloperów. Pamiętaj o możliwości testowania stron zarówno w wersji mobile jak i klasycznej.
Przykład: https://www.zalando.pl/ecco/
Mimo, że pierwsze treści pojawiają się po 2.7 sekundach (First Contentful Paint) to LCP wynosi aż 14.1 sekundy. To słaby wynik, a w połączeniu z innymi elementami ocenianymi algorytmicznie przez Google, daje mało efektowne 10/100 w ocenie szybkości działania (Performance). Problem w tym, że jeśli przyglądniemy się dokładnemu raportowi to zauważymy, że jako LCP potraktowano najpewniej komunikat o cookies i prywatności. Aby to zweryfikować uruchomiłem test w Lighthouse, które jest elementem Chrome, czyli miałem możliwość już wcześniej zaakceptowania i pominięcia tego komunikatu. W efekcie wynik zmienił się na 5.9 sekundy, a punktacja na 37/100. Przed nami pozostaje pytanie jak możemy ulepszyć komunikat, aby miał minimalny wpływ na użyteczność tej strony.
CLS czyli Cumulative Layout Shift to ciekawy parametr, który mówi o przesuwającej się treści w trakcie ładowania się strony. Jeśli front-end developer nie zarezerwował miejsca na ładujące się nowe elementy, to cała strona będzie wyglądała jak wielka układanka tetrisa i przez nawet kilka sekund jej elementy mogą zmieniać swoje pozycje. Często utrudnia to poruszanie się po stronie i może być niezwykle irytujące dla użytkownika.
W poprzednim przykładzie CLS z załadowanym komunikatem o cookies wyniósł aż 0.489 co stanowi słaby wynik (pożądanym wynikiem jest maksymalnie 0.1). Natomiast test bez wyskakującego komunikatu pokazał, że sama strona nie jest źle zakodowana, wynik 0.185 jest już bliski idealnemu. Wystarczy rzut oka na kroki ładowania się strony poniżej, aby odkryć, że za słabszy wynik odpowiada komunikat reklamujący aplikację, który przesuwa całą stronę w dół.
Ostatnim elementem CWV jest FID, czyli First Input Delay. Parametr opisuje ile musi upłynąć czasu, aby strona była dla użytkownika interaktywna. Źle zakodowana strona pokaże elementy takie jak menu, wyszukiwarka czy przyciski, ale nie będą one przez jakiś czas aktywne, np.: czas potrzebny do załadowania bibliotek JS. W efekcie mamy stronę, z której nie możemy chwilę korzystać co wpływa na naszą percepcję i ocenę wolnego ładowania. W ocenie Google dobrze działająca strona powinna być interaktywna w mniej niż 100 milisekund.
Ten parametr zbadamy dla strony https://www.x-kom.pl/g-6/c/15-monitory.html ale już za pomocą narzędzia PageSpeed Insights.
Mimo części wyników poza zakresami sugerowanymi przez Google pamiętajmy, że mówimy znów o ogromnym systemie e-commerce i wynik w przypadku tak skomplikowanego serwisu i tak jest imponujący. Co ciekawe, podobnie jak w Zalando niższa ocena CLS może wynikać z pojawiającego się komunikatu reklamowego aplikacji mobilnej. Niestety w przypadku FID całość wymaga większej analizy: aktywność głównego wątku, czas oczekiwania na załadowanie się JavaScript, czy fakt, że spora część bibliotek jest na tej podstronie w ocenie Google nieużywana.
Jak widzisz na tych przykładach, wskaźniki są łatwe w zrozumieniu, ale ich interpretacja, a w szczególności poprawa to zadanie dla osoby pracującej bezpośrednio z kodem. Na koniec weź ze sobą te kilka podpowiedzi:
- używaj wymiennie narzędzi Google, zauważysz drobne różnice w danych i zdobędziesz pełny obraz raportów
- zaufaj swoim front-endom, część zmian sugerowanych przez narzędzia nie wpłynie na realny odbiór strony przez użytkownika i będzie tylko stratą zasobów
- zanim kupisz gotowy layout, np.: do WordPressa przetestuj go za pomocą narzędzi lub poproś o to specjalistę, oszczędzisz sporo nerwów przy próbach optymalizacji
- wyniki sprawdzaj dla każdego ważnego typu stron: strony głównej, produktu, kategorii, wpisu blogowego, kategorii na blogu czy wyników wyszukiwania
- śledź wyniki stałe za pomocą Google Search Console i wracaj do nich przynajmniej raz na kwartał: Google ulepszając narzędzia potrafi mocno podnieść poprzeczkę, a Twoja strona otrzymując łatki i poprawki może zostać przypadkiem mocno uszkodzona pod kątem CVW.
Krzysztof Marzec – CEO w DevaGroup, agencji z tytułem Partner Google Premier i Google Rising Star. Trener SEO, Google Ads & Analytics, szkolił najlepsze agencje i domy mediowe bezpośrednio na zlecenie Google, szkolił w Akademii Google Partners. Autor dwóch książek z wyprzedanymi nakładami, ponad setki artykułów i wysoko ocenianych kursów on-line. Wykładowca m.in. Uniwersytetu Jagiellońskiego oraz Wyższej Szkoły Europejskiej im. Józefa Tischnera. Gościł na scenie kilkudziesięciu konferencji (m.in. MobileTrends, I love Marketing, SEM Camp, Targi E Handlu, Internet BETA), zdobywając wysokie miejsca i nagrody publiczności w tym pierwsze miejsce na Ads & Analytics Day na I love Marketing 2020 – największej branżowej konferencji w Polsce. Pomysłodawca i organizator semKRK skupiającego ponad 500 uczestników barcampu branży SEM oraz gali nagród semKRK Awards. Pracował dla takich marek, jak: Allegro.pl, Neo24, Shoper.pl, Conrad.pl, Interia.pl, Grupa RMF czy Wydawnictwo Bauer. Sędzia (Head Judge Poland) konkursu European Search Awards.
