Core Web Vitals jako czynniki wp艂ywaj膮ce na pozycjonowanie i nie tylko

Ostatnia edycja: 10.06.2022

Podstawowe wska藕niki internetowe, znane szerzej jako Core Web Vitals, s膮 wybranymi, uniwersalnymi wska藕nikami, kt贸re opisuj膮 wygod臋 u偶ytkowania stron internetowych. Je艣li analiz臋 u偶yteczno艣ci / UX strony internetowej mieliby艣my sprowadzi膰 tylko do trzech liczb, z pewno艣ci膮 by艂yby to w艂a艣nie te liczby:

  • LCP (Largest Contentful Paint, Najwi臋ksze wyrenderowanie tre艣ci) - Czas, jaki up艂ywa od rozpocz臋cia 艂adowania strony do wy艣wietlenia na niej najwi臋kszego elementu (obecnie - bloku tekstu lub obrazka - r贸wnie偶 wstawionego jako t艂o w arkuszu styli).
  • FID (First Input Delay) - Czas, jaki up艂ywa od pierwszej interakcji u偶ytkownika ze stron膮 (np. klikni臋cia przycisku) do zareagowania na t臋 czynno艣膰 przez przegl膮dark臋.
  • CLS (Cumulative Layout Shift, Zbiorcze przesuni臋cie uk艂adu) - Sumaryczna miara niespodziewanych przesuni臋膰 element贸w strony.

Zakres prawid艂owych warto艣ci przedstawia poni偶sza grafika umieszczona w serwisach Google.

Podstawowe wska藕niki internetowe

殴r贸d艂o: https://web.dev/vitals/, CC BY 4.0.

Po co mi kolejne liczby?

Na co dzie艅 stosujemy r贸偶ne liczby do oceny otaczaj膮cej nas rzeczywisto艣ci. Pogod臋 potrafimy opisa膰 kilkoma parametrami (temperatura, ci艣nienie, pr臋dko艣膰 wiatru), podobnie jest ze stanem zdrowia (temperatura, ci艣nienie, cz臋sto艣膰 akcji serca). Czy nie pi臋knie by艂oby m贸c r贸wnie偶 na podstawie kilku liczb oceni膰 "stan zdrowia" strony internetowej?

Same Core Web Vitals nie pozwol膮 zdiagnozowa膰 przyczyny problemu - poka偶膮 jednak, 偶e na stronie dzieje si臋 co艣 z艂ego. Wska偶膮, 偶e czas wczytywania strony czy wygoda jej obs艂ugi s膮 niesatysfakcjonuj膮ce - zdaniem program贸w komputerowych, czyli by膰 mo偶e r贸wnie偶 zdaniem u偶ytkownik贸w. St膮d prosta droga do sprawdzenia, co i jak mo偶na poprawi膰, aby zwi臋kszy膰 konwersje i liczb臋 wej艣膰 na stron臋.

Sprawdzanie Core Web Vitals

Dane dotycz膮ce podstawowych wska藕nik贸w internetowych znajduj膮 si臋 w raporcie dotycz膮cym UX Chrome (Chrome User Experience Report). Trafiaj膮 do niego informacje pochodz膮ce z sesji rzeczywistych u偶ytkownik贸w Internetu. Wszystkie 3 podstawowe wska藕niki internetowe wyliczone na podstawie tego raportu mo偶na odczyta膰 w nieocenionym PageSpeed Insights. Je艣li za艣 przekrocz膮 norm臋, stosowany komunikat ujrzymy w Search Console.

Core Web Vitals pochodz膮ce z danych o u偶ytkownikach Chrome

Strona agencji marketingowej RekinySukcesu.pl na podstawie raportu dotycz膮cego UX Chrome w PageSpeed Insights. Podstawowe wska藕niki internetowe s膮 w normie :)

Ponadto PageSpeed Insights, podobnie jak Lighthouse, pozwala odczyta膰 LCP i CLS na podstawie danych laboratoryjnych, kt贸re mog膮 r贸偶ni膰 si臋 od danych pochodz膮cych od u偶ytkownik贸w Chrome:

Podstawowe wska藕niki internetowe na podstawie danych laboratoryjnych

Dane laboratoryjne dotycz膮ce strony agencji marketingowej RekinySukcesu.pl.

Badanie Core Web Vitals za pomoc膮 rozszerzenia do przegl膮darki

Przy pomocy tego rozszerzenia mo偶emy sprawdzi膰 rzeczywiste warto艣ci podstawowych wska藕nik贸w internetowych wyliczone na naszym komputerze.

Testowanie Core Web Vitals na RekinySukcesu.pl

Strona agencji interaktywnej RekinySukcesu.pl zbadana pod k膮tem podstawowych wska藕nik贸w internetowych przy pomocy rozszerzenia do przegl膮darki.

W przypadku wska藕nika FID, czyli czasu reakcji przegl膮darki na pierwsz膮 interakcj臋, mo偶na w ten spos贸b sprawdzi膰, kt贸ra interakcja najbardziej si臋 鈥渙ci膮ga鈥. Za艣 obserwowanie zmieniaj膮cego si臋 wska藕nika CLS w czasie u偶ywania strony dostarczy nam informacji, kt贸ry element jest najbardziej 鈥渟zalony鈥 pod wzgl臋dem jego pozycji na stronie. Mo偶na w ten spos贸b r贸wnie偶 dostrzec przesuni臋cia (CLS), kt贸rych w warunkach laboratoryjnych PageSpeed Insights / Lighthouse nie wykryj膮.

Kiedy nale偶y wdro偶y膰 poprawki zwi膮zane z Core Web Vitals?

Teoretycznie nie musimy si臋 nad tym zastanawia膰. Z pomoc膮 przychodzi Google, kt贸ry sugeruje, jakie warto艣ci s膮 w porz膮dku, a przy jakich powinna zapali膰 si臋 ostrzegawcza lampka.

Jednak jak w przypadku wielu wska藕nik贸w zwi膮zanych z SEO i jako艣ci膮 stron, s艂abe wyniki witryny mog膮 mie膰 dwojakie konsekwencje. Po pierwsze - mog膮 zadzia艂a膰 jako negatywny czynnik wp艂ywaj膮cy na pozycjonowanie (ranking factor). Po drugie - mog膮 obni偶y膰 satysfakcj臋 u偶ytkownik贸w i czas sp臋dzony na stronie, a wi臋c konwersj臋 i wt贸rnie wynik w SERP-ach.. Dlatego nawet, je艣li w Search Console nie otrzymamy informacji o b艂臋dzie, a np. CLS sugeruje nam istotny problem z UX, warto rozwa偶y膰, czy nie op艂aca si臋 go poprawi膰.

Analogicznie - dop贸ki alert w Search Console nie wp艂ywa negatywnie na wyniki wyszukiwania, warto rozwa偶y膰, na ile istotny z punktu widzenia UX jest zg艂aszany problem. Google nie kryje, 偶e sposoby wyliczenia wska藕nik贸w (np. LCP) mog膮 ulec zmianie. Dlatego kosztowne przebudowanie strony w celu zmiany jednej liczby nie zawsze b臋dzie op艂acalne.

Core Web Vitals a ocena wydajno艣ci w PageSpeed Insights

Jak wspomnieli艣my, PageSpeed Insights prezentuje podstawowe wska藕niki internetowe dwa razy:

  1. Jako dane statystyczne (75. centyl) z rzeczywistych sesji u偶ytkownik贸w przegl膮darki Chrome - s膮 to warto艣ci omawiane wcze艣niej, widoczne na poprzednim zrzucie ekranu.
  2. Z pojedynczego uruchomienia narz臋dzia Lighthouse na wybranym 艣rodowisku testowym => wynik opisany jest w sekcji Wydajno艣膰.

Przed er膮 Core Web Vitals przyzwyczaili艣my si臋 ocenia膰 wydajno艣膰 strony na podstawie pojedynczej liczby w k贸艂eczku, prezentowanej przez PageSpeed Insights:

Core Web Vitals a Wydajno艣膰 w PageSpeed Insights

Warto jednak wiedzie膰, 偶e jest ona generowana na podstawie drugiego wspomnianego 藕r贸d艂a danych, czyli pojedynczego uruchomienia narz臋dzia Lighthouse (o czym informuje tekst, kt贸ry na zrzucie zaznaczyli艣my na czerwono).

Jakie ograniczenia z tego wynikaj膮?

  • W przeciwie艅stwie do oceny z Raportu na temat u偶ytkownik Chrome, wynik w sekcji Wydajno艣膰 dotyczy wy艂膮cznie pojedynczego uruchomienia testu w Lighthouse, wi臋c nie b臋dzie idealnie powtarzalny (ka偶de nowe uruchomienie przyniesie nieco inne wyniki).
  • Nasi u偶ytkownicy mog膮 mie膰 dramatycznie wolniejsze (lub istotnie szybsze) urz膮dzenia. Zatem wynik ten mo偶e by膰 czasem zbli偶ony do wynik贸w u rzeczywistych u偶ytkownik贸w, a mo偶e od nich znacznie odbiega膰.
  • Warto艣膰 liczbowa wyliczana jest jako 艣rednia wa偶ona wielu parametr贸w, nie tylko Core Web Vitals.
  • Wagi dla tej 艣redniej s膮 zmieniane (obecnie jest wersja 9. kalkulatora), dlatego nie mo偶na por贸wnywa膰 wynik贸w z dw贸ch test贸w przeprowadzonych w du偶ym odst臋pie czasu, je艣li si臋 nie upewnimy, 偶e kalkulator liczy wynik wydajno艣ci w taki sam spos贸b.
  • R贸wnie偶 warunki symulacji (rodzaj urz膮dzenia, szybko艣膰 procesora, internetu, wersja Lighthouse鈥檃, przegl膮darki) mog膮 ulec zmianie. Co za tym idzie, nie wolno por贸wnywa膰 dw贸ch wynik贸w przeprowadzonych w innych warunkach.

Jak wykorzysta膰 PageSpeed Insights (Lighthouse) do poprawy Core Web Vitals?

Wiemy ju偶, czego nie powinni艣my robi膰 przy pomocy PageSpeed Insights. Ustalmy teraz, jak warto poprawnie wykorzysta膰 to wspania艂e narz臋dzie.

Poprawa LCP

W PageSpeed Insights odnajdziemy informacj臋, kt贸ry element zosta艂 wybrany jako najwi臋kszy dla wska藕nika LCP:

Element wybrany do LCP dla strony RekinySukcesu.pl

PageSpeed Insights wskazuje kod elementu u偶ytego do wyliczenia wska藕nika LCP.

Ustalili艣my wi臋c, kt贸ry element jest tym najwi臋kszym. Mamy teraz dwie opcje:

  1. Modyfikujemy wygl膮d strony tak, 偶eby inny (szybciej si臋 wczytuj膮cy) element by艂 tym najwi臋kszym.
  2. Optymalizujemy szybko艣膰 wczytywania tego jednego elementu - np.
    • je艣li to jest zdj臋cie, 艂adujemy je wst臋pnie jeszcze w sekcji head, u偶ywaj膮c tagu:
      <link rel="preload" href="/" type="image/jpeg">
    • je艣li jest to tekst - dbamy o to, by czcionka wczyta艂a si臋 bardzo szybko (stosujemy preload - podobnie jak ze zdj臋ciem) lub najlepiej - by tekst wy艣wietli艂 si臋 przy pomocy domy艣lnej czcionki, zanim nie zostanie za艂adowana inna,
    • dbamy o to, by do czasu wyrenderowania tego elementu na stronie nie by艂y wykonywane inne, zb臋dne zadania, np. wczytywanie niepotrzebnych bibliotek JS, styl贸w, modu艂贸w zewn臋trznych (jak czat itp.).

Poprawa CLS

W przypadku przekroczenia normy dla CLS r贸wnie偶 znajdziemy elementy, kt贸re powoduj膮 przekroczenie tego wska藕nika:

Elementy powoduj膮ce przekroczenie CLS

Kod HTML element贸w, kt贸re przyczyni艂y si臋 do przekroczenia dopuszczalnego CLS.

Teraz "wystarczy" ustali膰, dlaczego elementy te si臋 przesuwaj膮. Najprawdopodobniej dlatego, 偶e elementy znajduj膮ce si臋 nad nimi zmieniaj膮 sw贸j rozmiar lub pojawiaj膮 si臋, powoduj膮c przesuni臋cie. Rozwi膮zaniem jest ustalenie sztywnego rozmiaru element贸w znajduj膮cych si臋 nad tymi elementami.

Badanie efekt贸w optymalizacji

Dzi臋ki PageSpeed Insights (Lighthouse) mo偶emy por贸wna膰 wyniki sprzed i po optymalizacji. Upewnijmy si臋 jednak, 偶e warunki obu test贸w i spos贸b obliczania wydajno艣ci s膮 identyczne. Zwr贸膰my te偶 uwag臋, czy pomimo poprawy sumarycznej oceny wydajno艣ci, nie pogorszy艂y si臋 poszczeg贸lne Core Web Vitals. A w szczeg贸lno艣ci - czy nie przekroczy艂y dopuszczalnej granicy normy.

Jakie inne ograniczenia ma analiza Core Web Vitals?

Warto pami臋ta膰, 偶e w kolejnych wersjach przegl膮darki Chrome wprowadzane s膮 coraz to nowe usprawnienia wyliczania Core Web Vitals. Z ich stale aktualizowan膮 list膮 mo偶na si臋 zapozna膰 na stronie Chrome Speed.

Dlatego wyniki dla poszczeg贸lnych przegl膮darek mog膮 si臋 nieznacznie r贸偶ni膰. W zwi膮zku z tym, nasze Core Web Vitals z biegiem czasu mog膮 ulec poprawie lub pogorszeniu, mimo 偶e rzeczywista szybko艣膰 i wydajno艣膰 strony z perspektywy u偶ytkownik贸w nie zmieni艂y si臋.

Pami臋tajmy, 偶e ka偶dy pomiar obarczony jest b艂臋dem. Core Web Vitals s膮 bardzo rzetelnym 藕r贸d艂em informacji o kondycji strony i nie nale偶y si臋 do nich przez to zra偶a膰, cho膰 ich ograniczenia warto zna膰. Dok艂adnie na takiej samej zasadzie, na jakiej nie rezygnujemy z u偶ywania zegar贸w (kt贸re r贸wnie偶 si臋 myl膮), tylko uwzgl臋dniamy ich omylno艣膰 co pewien czas korygujemy ich wskazanie.

Podsumowanie

Podstawowe wska藕niki internetowe pozwalaj膮 oszacowa膰, jak zadowoleni z interakcji z nasz膮 witryn膮 s膮 u偶ytkownicy. Koreluj膮 z efektywno艣ci膮 biznesow膮 strony. Ponadto od czerwca 2021 roku Google wykorzystuje Core Web Vitals jako czynniki wp艂ywaj膮ce na pozycjonowanie (ranking factors).

To wszystko powoduje, 偶e nie warto zwleka膰 z optymalizacj膮 Core Web Vitals. Odk艂adanie tego w czasie mo偶e spowodowa膰 obni偶enie pozycji w wynikach wyszukiwania oraz spadek wsp贸艂czynnika konwersji. Dlatego warto ju偶 dzisiaj zaplanowa膰 optymalizacj臋 podstawowych wska藕nik贸w internetowych.

Szukasz efektywnej agencji interaktywnej?

Na nasz膮 efektywno艣膰 sk艂ada si臋 ponad 10-letnie do艣wiadczenie, stale rozwijaj膮ca si臋 kadra specjalist贸w i rzetelne oraz uczciwe podej艣cie do Klienta. Wiemy jak osi膮gn膮膰 za艂o偶one cele w b艂臋kitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klient贸w, ponad 2 000 przeszkolonych os贸b, ponad 500 tys. z艂 obs艂ugiwanego w roku bud偶etu w kampaniach PPC. Sumuj膮c wszystkie dane, u偶ytkownicy sp臋dzili ju偶 艂膮cznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ci膮gle ma艂o. Nie uznajemy kompromis贸w. Dlatego warto klikn膮膰 jeden z przycisk贸w poni偶ej i um贸wi膰 si臋 na wizyt臋 we Wroc艂awiu, K艂odzku lub na spotkanie online.

Zobacz inne:

close
keyboard_arrow_up