UX, czyli User Experience jest ważny dla Google’a już nie tylko w teorii, ale także w praktyce – stanie się bowiem czynnikiem rankingowym. Będzie tak dzięki algorytmowi Page Experience Signals, a do jego zmierzenia służą właśnie między innymi wskaźniki Core Web Vitals (podstawowe wskaźniki internetowe). Co ciekawe, niektóre z nich są obecne w analizach PageSpeed Insights już od dawna – ale teraz będą nie już tylko zaleceniem, ale czynnikiem rankingowym. Dlatego warto je lepiej poznać i zoptymalizować stronę według ich wytycznych.

Czym są Core Web Vitals?

Całe to przedsięwzięcie ma na celu uczynienie sieci WWW jeszcze przyjaźniejszą dla użytkowników, bowiem nowe parametry są związane bezpośrednio z jakością – ale nie od strony merytorycznej, tylko technicznej. Jednak w zamyśle algorytmu działanie strony będzie teraz tak samo ważne, jak jej zawartość, czyli np. wysokiej jakości teksty i walory informacyjne. Strony powinny dawać odbiorcy nie tylko wiedzę lub rozrywkę, ale także działać szybko i bezproblemowo.

Na PES składa się szereg wskaźników analizujących użyteczność strony WWW (między innymi szybkość wczytywania stron, brak reklam i pop-upów zasłaniających treść czy obecność SSL), a Core Web Vitals są jego kolejną częścią, wprowadzającą dodatkowe parametry: CLS, LCP i FID.

Parametry Core Web Vitals

CLS – Cumulative Layout Shift

Cumulative Layout Shift analizuje stabilność layoutu strony (visual stability). Czasami zdarza się, że w trakcie ładowania niektóre elementy strony zmieniają swoje miejsce, przez co klikamy w inny element, niż zamierzaliśmy (bo w ciągu ułamka sekundy pod kursorem zmienił się wygląd strony). Niestabilność układu strony objawia się też wtedy, gdy czytamy tekst, a pole tekstowe niespodziewanie przesuwa się w dół lub w górę wraz z ładowaniem kolejnych elementów graficznych, które „spychają” element z tekstem. Przeszkadza to w sprawnym korzystaniu ze strony i bywa irytujące – na tyle mocno, że Google postanowiło zrobić z tym porządek.

Powody mogą być różne – od niezoptymalizowanego kodu layoutu, przez niewspółpracujące ze sobą wtyczki (i ich zbyt dużą liczbę) aż po ładowanie elementów strony z zewnętrznych źródeł. Co ważne, Google gromadzi dane o przesunięciach podczas korzystania ze strony różnych użytkowników – może się więc zdarzyć, że u web dewelopera wszystko będzie dobrze działało, ale na innych kombinacjach przeglądarek, urządzeń czy systemów operacyjnych już nie.

Jednostką CLS nie jest czas, ale stosunek odległości między pierwszym a drugim miejscem elementu. Im większe przesunięcie obiektu, tym gorzej dla wyniku. W założeniu elementy layoutu nie powinny bowiem przesuwać się wcale.

LCP – Largest Contentful Paint

Largest Contentful Paint analizuje szybkość ładowania największych elementów strony, którą widać podczas pierwszego renderingu (czyli wszystko to, co zobaczymy przed scrollowaniem ekranu). Najczęściej będzie to grafika lub wideo. W założeniu elementy te powinny się ładować szybciej niż pozostała część strony, aby po wejściu na nią użytkownik możliwie szybko zobaczył jej zawartość. Oczywiście największe elementy będą różne na innych obszarach strony, dlatego jeśli w trakcie renderowania użytkownik przescrolluje ekran, to brany pod uwagę będzie ten obszar strony, który wyświetlił się jako pierwszy.

W analizie szybkości ładowania algorytm nie bierze pod uwagę elementów kodu umieszczonych poniżej linii ekranu (liczą się tylko te, które widać bez scrollowania). Dotyczy to również tych elementów, które zaczynają się w widocznej części strony, ale kończą poniżej linii scrollowania.

Jednostką LCP jest czas renderowania pierwszego widoku strony – pożądany jest wynik poniżej 2,5 sekundy. Warto zwrócić uwagę, że LCP może być zawyżony, jeśli mamy już wysoki CLS, ponieważ jeśli na górze strony załaduje się jakiś duży element, a następnie zostanie „zepchnięty” na niewidoczną część – to i tak będzie brany pod uwagę.

FID – First Input Delay

FID bada czas, jaki jest potrzebny do wykonania pierwszej interakcji użytkownika od momentu jej rozpoczęcia (czyli, w dużym skrócie – szybkość reakcji elementów, na które kliknął użytkownik). Dobrym przykładem jest sytuacja, gdy w czasie ładowania strony chcemy np. przejść do następnego zdjęcia w galerii, kliknąć „czytaj dalej” lub po prostu rozwinąć menu, ale strona nie reaguje, bo cały czas jest jeszcze w trakcie renderowania. Jest tak dlatego, że w pierwszej kolejności muszą załadować się wszystkie elementy strony, a dopiero potem są przetwarzane interakcje użytkownika. I to właśnie ten czas często rzutuje na określenie strony jako szybkiej lub wolnej.

FID jest podawany w milisekundach. Rzecz jasna jest on mierzony na urządzeniach użytkowników podczas ich interakcji, może być więc inny, niż na urządzeniu webdevelopera, na którym wykonał stronę. Oczywiście im krótszy ten czas, tym lepiej – założenie jest takie, aby użytkownik mógł używać przycisków, pól tekstowych czy menu jak najszybciej.

Jak zoptymalizować stronę pod Core Web Vitals?

Optymalizacja CLS

Najważniejszą rzeczą podczas poprawiania wyniku CLS jest dokładne opisywanie grafik właściwymi im atrybutami:

  • width,
  • height,
  • aspect ratio,
  • media (w przypadku strony responsywnej).

Warto też umieszczać grafiki w kontenerach, dzięki czemu najpierw załaduje się miejsce na grafikę (znacznie szybciej od samej grafiki), a dopiero potem plik. Zapobiegnie to przesuwaniu się elementów załadowanych przed grafiką, która zazwyczaj ładuje się dużo dłużej i „zabiera” miejsce. 

Nie będzie niespodzianką stwierdzenie, że stronę należy budować na czystym i prostym kodzie, a jeśli już musimy korzystać z CMS-ów, to ograniczmy liczbę wtyczek (zwłaszcza mających wpływ na wygląd strony) i używajmy dobrych kreatorów stron (page builderów), których layouty – mówiąc kolokwialnie – nie rozsypują się.

Dodatkową możliwością jest oznaczenie fontów znacznikiem Preload – dzięki temu będą one pobierane jeszcze przed renderowaniem strony, a czas ich pobierania nie będzie się wliczał w czas renderingu.

Optymalizacja LCP

Rozwiązaniem na słaby wynik LCP jest poprawa tych czynników, które spowalniają działanie strony – tylko tyle i aż tyle. Może to być zarówno brak minifikacji lub ładowanie się nieużywanych fragmentów JS/CSS, nieskompresowane grafiki, jak i wolny serwer.

Na co dokładnie warto zwrócić uwagę podczas optymalizacji LCP?

  • Cache’owanie strony: zauważalnie przyspiesza ładowanie się w przypadku użytkowników, którzy odwiedzili ją przynajmniej raz;
  • Optymalizacja grafik: dobrą praktyką jest stosowanie atrybutu Lazy Load, dzięki któremu ładują się najpierw tylko te grafiki, które widać aktualnie na stronie. Zdecydowanie warto też umieszczać grafiki w formacie *.WEBP (zalecany format Google) oraz nadawać im dokładnie takie wymiary, w jakich mają się wyświetlać (nie większe);
  • Priorytetyzacja elementów podczas ładowania i ładowanie asynchroniczne: warto nadać priorytet tym elementom, które będą widoczne od razu po wejściu na stronę – a dopiero potem ładować te, które użytkownik zobaczy po przescrollowaniu strony.

Najsłabsze ogniwa naszej strony wykaże PageSpeed Insights. Jeżeli jego wskazania nic Ci nie mówią lub nie wiesz, jak je wprowadzić, warto zainwestować w konsultacje SEO, dzięki którym będzie Ci łatwiej wdrożyć poprawki i analizować wzrost widoczności strony.

Optymalizacja FID

Optymalizacja FID będzie podobna jak w przypadku LCP. Kluczowe jest zoptymalizowanie kodu strony odpowiedzialnego za wczytywanie się najważniejszych elementów strony (zwłaszcza tych, z którymi użytkownik może wchodzić w interakcję) oraz ich priorytetyzacja.

Należy także usunąć nieużywane fragmenty kodu, a jeśli elementy interaktywne działają w oparciu o wtyczki, to nie przesadzać z ich liczbą i używać tych, które mają najwyższe oceny (wtedy prawdopodobieństwo dobrze zoptymalizowanego kodu wtyczki wzrasta). 

Kluczową rolę w optymalizacji FID odgrywają oczywiście skrypty JavaScript, zatem należy opóźnić ładowanie się tych skryptów, które nie są absolutnie niezbędne do wyświetlenia w pierwszym, górnym widoku strony. Warto też opóźnić ładowanie się skryptów zewnętrznych (Google Analytics, HotJar i tym podobne) lub ładować je asynchronicznie.

Podsumowanie – nie taki diabeł straszny, jak go malują

Przy każdej dużej aktualizacji algorytmu Google’a atmosfera w branżach związanych z internetem mocno gęstnieje. Czy potrzebnie? Warto oczywiście śledzić aktualizacje i na bieżąco optymalizować treści i strony, ale wprowadzenie nowych wskaźników nie oznacza, że Google nałoży filtr na naszą stronę, jeśli się do nich nie zastosujemy. Po prostu te strony, które zostały zoptymalizowane, będą stopniowo pięły się w górę SERP-a, a niezoptymalizowane – nie. W Fabryce Marketingu uważamy też, że jeśli wcześniej dbało się o swoich odbiorców, to przynajmniej część elementów Core Web Vitals prawdopodobnie i tak jest wdrożona na stronie. Pojawienie się tej aktualizacji nie jest więc niczym zaskakującym, a przysłuży się wszystkim użytkownikom sieci.

Autor: Patryk Błachnio – Specjalista SEO, z Fabryką Marketingu związany od 2020 roku. Zajmuje się analizą danych strukturalnych i optymalizacją witryn. Specjalizuje się w audytach SEO i UX.  

Linkhouse - platforma Content Marketingu i Link Buildingu

ZAŁÓŻ KONTO
Kinga Edwards

Subskrybuj

OTRZYMASZ POWIADOMIENIA O NASZYCH NOWYCH ARTYKUŁACH DROGĄ MAILOWĄ
Administratorem Twoich danych osobowych jest Grupa KBR Spółka z ograniczoną odpowiedzialnością sp.k. z siedzibą w Katowicach. Zapoznaj się z pełną informacją o przetwarzaniu danych klikając tutaj

Zgodnie z art. 13 ust. 1 i ust. 2 rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z 27.04.2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (ogólne rozporządzenie o ochronie danych) (Dz. Urz. UE L 119, s.1), dalej jako : „RODO” informujemy:

  1. Administratorem Twoich danych osobowych jest Grupa KBR sp. z o.o. sp. k. z siedzibą w Katowicach, al. Korfantego 2 lok. 840 Katowice, wpisana do rejestru przedsiębiorców Krajowego Rejestru Sądowego prowadzonego przez Sąd Rejonowy Katowice – Wschód w Katowicach, VIII Wydział Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000634991, NIP: 6342871729, REGON: 365310812 (dalej: „Administrator”),
  2. Kontakt bezpośrednio z Administratorem możliwy jest pod wskazanym w pkt. 1 powyżej adresem Administratora lub pod adresem e-mail:[email protected]
  3. Twoje dane osobowe będą przetwarzane w celu:
    • przeprowadzenia kontaktu zainicjowanego przez Ciebie poprzez wysłanie formularza tj. na podstawie art. 6 ust. 1 lit. b RODO),
    • zawarcia, wykonania i zakończenia umowy zawartej z Administratorem, tj. na podstawie art. 6 ust. 1 lit. b RODO – w przypadku, gdy dokonałeś pełnego i prawidłowego zarejestrowania w serwisie Linkhouse,
    • wykonywania obowiązków wynikających z przepisów prawa, w tym obowiązków finansowych i podatkowych, tj. na podstawie art. 6 ust. 1 lit.c RODO,
    • prowadzenia działań promocyjnych lub marketingowych, w tym marketingu bezpośredniego, w szczególności kierowania do Ciebie nowych ofert i propozycji współpracy, realizując tym samym prawnie uzasadniony interes Administratora, tj. na podstawie art. 6 ust. 1 lit. f RODO, a w przypadku braku zawarcia umowy z Administratorem na podstawie Twojej zgody tj. na podstawie art. 6 ust. 1 lit. a RODO,
    • utrzymywanie i poprawy funkcjonowania witryny linkhouse.co, za pośrednictwem której wykonywana jest zawarta z Tobą umowa, w tym administrowanie naszą witryną, wykonywanie operacji wewnętrznych, w tym rozwiązywanie problemów, analizy danych, badań, testów, celów statystycznych i badawczych realizując tym samym prawnie uzasadniony interes Administratora, tj. na podstawie art. 6 ust. 1 lit. f RODO,
  4. Twoje dane osobowe będą przetwarzane przez okres trwania zawartej z Administratorem umowy, a po jej wygaśnięciu przez okres przedawnienia roszczeń cywilnoprawnych wynikających z zawartej umowy oraz przez okres wymagany przez prawo, w szczególności przez regulacje podatkowe – przez okres przedawnienia zobowiązań podatkowych. W przypadku braku zawarcia umowy z Administratorem, Twoje dane osobowe będą przetwarzane przez okres 12 miesięcy oraz czas niezbędny do wywiązania się z obowiązków nałożonych przez przepisy prawa.
  5. Twoje dane osobowe mogą zostać udostępnione innym osobom posiadającym aktywne konto użytkownika Linkhouse, wyłącznie po zalogowaniu i w ograniczonym zakresie, a ponadto podmiotom wspierającym Administratora w prowadzonej działalności, w szczególności wszelkim podmiotom świadczącym usługi księgowe, marketingowe, dostawcom usług i narzędzi informatycznych, hostingowych, bankom, dostawcom usług płatniczych, podmiotom zapewniającym usługę prawną, współpracownikom Administratora, przy czym możliwe jest przekazanie danych do państwa trzeciego, w sytuacji gdy, którykolwiek z ww. podmiotów dokonuje przetwarzania danych w państwie trzecim oraz wyłącznie w sytuacji, gdy Komisja Europejska dokonała stwierdzenia odpowiedniego stopnia ochrony lub z wykorzystaniem klauzul umownych zatwierdzonych przez Komisję Europejską lub w przypadku posiadania właściwych zabezpieczeń, o których informacja może zostać Pani/Panu udostępniona.
  6. Podanie danych osobowych jest dobrowolnej, jednak niezbędne dla realizacji zawartej z Tobą umowy cywilnoprawnej, a w przypadku braku zawarcia umowy z Administratorem niezbędne do otrzymywania materiałów reklamowych i marketingowych – w takiej sytuacji przetwarzamy Twoje dane na podstawie zgody, która jest dobrowolna i w każdym momencie może być przez Ciebie wycofana.
  7. Przysługuje Ci prawo żądania dostępu do treści danych osobowych, ich sprostowania, usunięcia oraz prawo do ograniczenia ich przetwarzania. Ponadto także prawo do przenoszenia danych oraz prawo do wniesienia sprzeciwu wobec przetwarzania danych osobowych, Posiadasz prawo wniesienia skargi do Prezesa Urzędu Ochrony Danych Osobowych. Dane osobowe będą przekazywane wyłącznie naszym zaufanym podwykonawcom, tj. dostawcom usług informatycznych, firmie księgowej, administracji.