W 2020 roku naprzeciw tym potrzebom wysz\u0142a firma Google, wprowadzaj\u0105c zestaw wska\u017anik\u00f3w do oceny do\u015bwiadczenia u\u017cytkownika (ang. User Experience, UX) w zakresie wydajno\u015bci \u0142adowania, interaktywno\u015bci i stabilno\u015bci wizualnej strony internetowej.<\/p>\n\n\n\n
Prosty, zunifikowany zestaw metryk, nazwanych Web Vitals<\/strong>, dostarcza jasnych, czytelnych oraz ustandaryzowanych danych, kt\u00f3re s\u0105 kluczowe dla oceny jako\u015bci u\u017cytkowania stron internetowych. Wi\u0119cej o nich dowiecie si\u0119 z niniejszego artyku\u0142u.<\/p>\n\n\n\n Wydajno\u015b\u0107 aplikacji internetowych ma bezpo\u015bredni wp\u0142yw na do\u015bwiadczenia u\u017cytkownik\u00f3w. Dok\u0142adnie to samo przy\u015bwieca\u0142o idei powstania Web Vitals \u2013 chodzi\u0142o stworzenie o prostego zestawu metryk, kt\u00f3re b\u0119d\u0105 czytelne i zrozumia\u0142e dla os\u00f3b nieb\u0119d\u0105cych specjalistami od tworzenia i zarz\u0105dzania serwisami internetowymi, a jednocze\u015bnie b\u0119d\u0105 dostarcza\u0142y warto\u015bciowych informacji na temat weryfikowanej strony internetowej.<\/p>\n\n\n\n Metryki te pozwalaj\u0105 nam okre\u015bli\u0107 w spos\u00f3b ujednolicony:<\/p>\n\n\n\n Bez nich ocena ta by\u0142a cz\u0119sto bardzo subiektywna i uzale\u017cniona od wielu czynnik\u00f3w, w tym: jako\u015b\u0107 i pr\u0119dko\u015b\u0107 \u0142\u0105cza internetowego, wydajno\u015b\u0107 urz\u0105dzenia, na kt\u00f3rym dokonywano oceny, itd.<\/p>\n\n\n\n Obecnie wszystkie strony internetowe sprawdzane s\u0105 pod k\u0105tem trzech g\u0142\u00f3wnych metryk Core Web Vitals<\/strong>. To w\u0142a\u015bnie one pozwalaj\u0105 na lepsze pozycjonowanie stron w wynikach wyszukiwarki oraz wp\u0142ywaj\u0105 pozytywnie na wyniki SEO.<\/p>\n\n\n\n Zanim jednak przejdziemy do om\u00f3wienia metryk samych w sobie, warto wspomnie\u0107, \u017ce Web Vitals zbierane i kalkulowane s\u0105 dla wszystkich stron internetowych, zawsze w ten sam spos\u00f3b i tymi samymi algorytmami<\/strong>. Dobrze pami\u0119ta\u0107 r\u00f3wnie\u017c, \u017ce s\u0105 one mierzone na dwa sposoby:<\/p>\n\n\n\n Oba sposoby zbierania danych uzupe\u0142niaj\u0105 si\u0119, daj\u0105c pe\u0142ne zrozumienie dzia\u0142ania strony internetowej zar\u00f3wno z perspektywy zmian i ich wp\u0142ywu na stron\u0119, jak r\u00f3wnie\u017c z punktu widzenia u\u017cytkownika oraz wp\u0142ywu jego zmiennego \u015brodowiska na dzia\u0142anie strony.<\/p>\n\n\n\n Core Web Vitals to zestaw trzech kluczowych metryk opracowanych przez Google, kt\u00f3re maj\u0105 na celu ocen\u0119 jako\u015bci do\u015bwiadcze\u0144 u\u017cytkownik\u00f3w na stronach internetowych.<\/p>\n\n\n\n LCP (najwi\u0119kszy element strony) mierzy czas, jaki up\u0142ywa od rozpocz\u0119cia \u0142adowania strony do momentu, gdy g\u0142\u00f3wny element tre\u015bci jest widoczny na ekranie (np.: obraz, wideo, blok). Wp\u0142ywa bezpo\u015brednio na pierwsze wra\u017cenie u\u017cytkownika dotycz\u0105ce szybko\u015bci \u0142adowania strony. Dynamiczne dzia\u0142anie zach\u0119ca u\u017cytkownika do dalszej interakcji, jednocze\u015bnie sprawiaj\u0105c, \u017ce zostaje na stronie d\u0142u\u017cej i ch\u0119tniej do niej wraca.<\/p>\n\n\n\n Je\u015bli wczytanie si\u0119 najwi\u0119kszego elementu strony odbywa si\u0119 w czasie poni\u017cej 2,5 sekundy, mo\u017cemy m\u00f3wi\u0107 o dobrym wyniku z punktu widzenia do\u015bwiadczenia u\u017cytkownika. Je\u015bli jednak czas ten wynosi powy\u017cej 4 sekund, mamy do czynienia ze s\u0142abym wynikiem do\u015bwiadcze\u0144 u\u017cytkownika.<\/p>\n\n\n\n Warto pami\u0119ta\u0107, \u017ce najwi\u0119kszy obiekt mo\u017ce si\u0119 zmienia\u0107 w trakcie \u0142adowania strony, poniewa\u017c metryka ta kalkulowana jest dla rzeczywistego najwi\u0119kszego widocznego elementu na stronie, a wi\u0119c zmiany s\u0105 mo\u017cliwe wraz z kolejnymi elementami, kt\u00f3re s\u0105 wczytywane w czasie rzeczywistym.<\/p>\n\n\n\n Reaktywno\u015b\u0107 strony na interakcje u\u017cytkownika \u2013 tym w\u0142a\u015bnie jest metryka INP. Mierzy ona op\u00f3\u017anienia wszystkich interakcji u\u017cytkownika (klikni\u0119cia, wprowadzanie tekstu, naci\u015bni\u0119cie klawiszy czy przewijanie strony). Kr\u00f3tszy czas INP oznacza, \u017ce strona reaguje szybko na wszelkie dzia\u0142ania u\u017cytkownika, co przek\u0142ada si\u0119 na p\u0142ynniejsze i bardziej satysfakcjonuj\u0105ce do\u015bwiadczenie.<\/p>\n\n\n\n Reakcja strony internetowej na akcje u\u017cytkownika w czasie poni\u017cej 200 milisekund oznacza, \u017ce u\u017cytkownik oceni stron\u0119 jako dobrze responsywn\u0105, a do\u015bwiadczenia u\u017cytkownika b\u0119d\u0105 dobre. Czas powy\u017cej 500 ms oznacza, \u017ce strona staje si\u0119 nieresponsywna, a do\u015bwiadczenia u\u017cytkownika b\u0119d\u0105 z\u0142e.<\/p>\n\n\n\n Jest to jeden z najbardziej frustruj\u0105cych parametr\u00f3w okre\u015blaj\u0105cych wydajno\u015b\u0107 stron internetowych \u2013 cz\u0119sto bowiem prowadzi do wielokrotnego klikni\u0119cia w ten sam obiekt, powoduj\u0105c, \u017ce obiekty strony pojawiaj\u0105 si\u0119 i znikaj\u0105 po chwili.<\/p>\n\n\n\n W marcu 2024 parametr ten zast\u0105pi\u0142 wykorzystywany wcze\u015bniej First Input Delay (FID)<\/strong>, kt\u00f3ry liczy\u0142 czas pierwszej interakcji ze stron\u0105, podczas gdy INP monitoruje tempo, z jakim strona reaguje na ka\u017cd\u0105 interakcj\u0119. FID jednak nadal wyst\u0119puje w niekt\u00f3rych narz\u0119dziach, kt\u00f3re monitoruj\u0105 Core Web Vitals, dlatego warto pami\u0119ta\u0107 o tej r\u00f3\u017cnicy.<\/p>\n\n\n\n CLS okre\u015bla stabilno\u015b\u0107 wizualn\u0105 strony, mierz\u0105c czas, po jakim uk\u0142ad strony w g\u00f3rnej jej cz\u0119\u015bci przestaje si\u0119 zmienia\u0107. Niski wynik CLS oznacza, \u017ce u\u017cytkownicy nie do\u015bwiadczaj\u0105 niespodziewanych przesuni\u0119\u0107 element\u00f3w strony, co mog\u0142oby by\u0107 frustruj\u0105ce i dezorientuj\u0105ce. Stabilna strona poprawia zaufanie i komfort u\u017cytkownik\u00f3w, prowadz\u0105c do lepszych do\u015bwiadcze\u0144 podczas przegl\u0105dania.<\/p>\n\n\n\n Za przesuni\u0119cia i zmiany uk\u0142adu strony uwa\u017cane jest np.: nag\u0142e przesuni\u0119cie tekstu, kt\u00f3ry w\u0142a\u015bnie czytamy, zmiana lokalizacji przycisku lub pola, co mo\u017ce skutkowa\u0107 np.: klikni\u0119ciem w niew\u0142a\u015bciwy przycisk. Nic wi\u0119c dziwnego, \u017ce jest to jeden z g\u0142\u00f3wnych parametr\u00f3w<\/strong> maj\u0105cych wp\u0142yw na ocen\u0119 do\u015bwiadcze\u0144 u\u017cytkownika.<\/p>\n\n\n\n Wyd\u0142u\u017cony czas CLS w po\u0142\u0105czeniu z du\u017cym czasem responsywno\u015bci strony (INP) mo\u017ce powodowa\u0107 powa\u017cne problemy z u\u017cywaniem strony po stronie u\u017cytkownika (klikanie w z\u0142e przyciski, wprowadzanie danych do nieprawid\u0142owych p\u00f3l, brak mo\u017cliwo\u015bci swobodnego czytania zawarto\u015bci strony internetowej).<\/p>\n\n\n\n Dlatego nikogo nie powinny dziwi\u0107 oczekiwania co do warto\u015bci metryki CLS \u2013 wynik d\u0142u\u017cszy ni\u017c 100 ms b\u0119dzie interpretowany jako wymagaj\u0105cy poprawy, a ju\u017c 250 ms oznacza\u0107 b\u0119dzie s\u0142abe rezultaty w kontek\u015bcie do\u015bwiadcze\u0144 u\u017cytkownika.<\/p>\n\n\n\n Core Web Vitals maj\u0105 bezpo\u015bredni wp\u0142yw na pozycjonowanie stron internetowych w wynikach wyszukiwania Google. Od maja 2021 roku Google oficjalnie w\u0142\u0105czy\u0142 Core Web Vitals jako czynnik rankingowy w algorytmie wyszukiwarki.<\/strong> Oznacza to, \u017ce strony, kt\u00f3re osi\u0105gaj\u0105 lepsze wyniki w zakresie LCP, INP i CLS, maj\u0105 wi\u0119ksz\u0105 szans\u0119 na wy\u017csze pozycje w wynikach wyszukiwania.<\/p>\n\n\n\n Lepsza wydajno\u015b\u0107 strony wp\u0142ywa na popraw\u0119 do\u015bwiadczenia u\u017cytkownika, co przek\u0142ada si\u0119 na ni\u017csze wska\u017aniki odrzuce\u0144 i d\u0142u\u017cszy czas sp\u0119dzony na stronie. To z kolei mo\u017ce prowadzi\u0107 do wi\u0119kszej liczby odwiedzin i konwersji. Google, dbaj\u0105c o jako\u015b\u0107 wynik\u00f3w wyszukiwania, nagradza strony, kt\u00f3re zapewniaj\u0105 u\u017cytkownikom pozytywne do\u015bwiadczenia, poprzez wy\u017csze rankingi.<\/p>\n\n\n\n Niestety, aspekt wp\u0142ywu Core Web Vitals na pozycjonowanie stron zdominowa\u0142 znaczenie tych metryk <\/strong>w kontek\u015bcie pomiaru wydajno\u015b\u0107 stron internetowych, powoduj\u0105c, \u017ce wielu tw\u00f3rc\u00f3w tre\u015bci internetowych skupia si\u0119 jedynie na tych trzech metrykach, a ich celem staje si\u0119 jedynie lepsze pozycjonowanie i wyniki SEO.<\/p>\n\n\n\n Tymczasem pozostaj\u0105 wci\u0105\u017c Core Vitals, kt\u00f3re nie maj\u0105 bezpo\u015bredniego wp\u0142ywu na pozycjonowanie stron. Nale\u017c\u0105 do nich m.in.: FCP, TBT, TTFB.<\/p>\n\n\n\n FCP mierzy czas, jaki up\u0142ywa od rozpocz\u0119cia \u0142adowania strony do momentu, gdy jakakolwiek cz\u0119\u015b\u0107 zawarto\u015bci jest wy\u015bwietlana na ekranie. Jest to wska\u017anik, kt\u00f3ry pomaga zrozumie\u0107, jak szybko u\u017cytkownicy widz\u0105 pierwsze elementy strony. W odr\u00f3\u017cnieniu od LCP, nie mamy tu do czynienia z pomiarem czasu do wy\u015bwietlenia najwi\u0119kszego elementu strony \u2013 skupiamy si\u0119 na pierwszym elemencie.<\/strong><\/p>\n\n\n\n Metryka pomaga r\u00f3wnie\u017c zrozumie\u0107:<\/p>\n\n\n\n TBTmierzy \u0142\u0105czny czas, w kt\u00f3rym przegl\u0105darka jest zablokowana przez zadania JavaScript, kt\u00f3re trwaj\u0105 d\u0142u\u017cej ni\u017c 50 milisekund. Czas ten mierzony jest od momentu wczytania pierwszego obiektu na stronie (FCP). Jest to wa\u017cne dla zrozumienia, jak d\u0142ugo strona mo\u017ce by\u0107 zablokowana dla u\u017cytkownik\u00f3w \u2013 przegl\u0105darka wykonuj\u0105ca JavaScript powy\u017cej 50 ms mo\u017ce by\u0107 nieresponsywna, sprawiaj\u0105c, \u017ce odczucia u\u017cytkownika zaczn\u0105 male\u0107.<\/p>\n\n\n\n Jest to jedyna metryka<\/strong>, kt\u00f3ra powinna by\u0107 badana wy\u0142\u0105cznie na podstawie danych laboratoryjnych.<\/strong><\/p>\n\n\n\n TTFB to czas mi\u0119dzy wys\u0142aniem \u017c\u0105dania zasobu a momentem, w kt\u00f3rym otrzymamy pierwszy bajt odpowiedzi. Metryka pozwala okre\u015bli\u0107 wp\u0142yw warstwy sieciowej na czas wy\u015bwietlania strony internetowej. W odniesieniu do niej warto zaznaczy\u0107, \u017ce poprzedza ona metryki zorientowane na u\u017cytkownika \u2013 oznacza to, \u017ce powinna by\u0107 brana pod uwag\u0119 r\u00f3wnie powa\u017cnie<\/strong>, jak te odnosz\u0105ce si\u0119 renderowania strony (FCP czy LCP).<\/p>\n\n\n\n Poniewa\u017c czas TTFB ma realny wp\u0142yw na czas wy\u015bwietlania strony internetowej, przyjmuje si\u0119, \u017ce 75% u\u017cytkownik\u00f3w powinno otrzyma\u0107 pierwszy bajt odpowiedzi w czasie mniejszym ni\u017c 800 ms.<\/p>\n\n\n\n Istniej\u0105 jeszcze inne metryki, kt\u00f3re s\u0105 wykorzystywane przez poszczeg\u00f3lne narz\u0119dzia do monitorowania i analizy Web Vitals, a kt\u00f3re nie zosta\u0142y uj\u0119te w tym artykule.<\/p>\n\n\n\n Wydaje si\u0119 do\u015b\u0107 oczywiste, dlaczego to w\u0142a\u015bnie INP, CLS oraz LCP nale\u017c\u0105 do Core Web Vitals, jednak ich zale\u017cno\u015b\u0107 od pozosta\u0142ych metryk jest wyra\u017ana i pokazuje, \u017ce w kontek\u015bcie do\u015bwiadcze\u0144 u\u017cytkownik\u00f3w oraz wydajno\u015bci i stabilno\u015bci stron internetowych tylko po\u0142\u0105czenie wszystkich metryk i ich wsp\u00f3lna analiza w oparciu o dane laboratoryjne jak i rzeczywiste mo\u017ce pom\u00f3c w pe\u0142ni zrozumie\u0107 zachowanie aplikacji internetowej.<\/p>\n\n\n\n Istnieje szereg narz\u0119dzi pozwalaj\u0105cych mierzy\u0107 Web Vitals. Zgodnie z ide\u0105 powstania metryk Web Vitals, s\u0105 to na og\u00f3\u0142 narz\u0119dzia proste w implementacji i u\u017cyciu, tak aby ka\u017cdy m\u00f3g\u0142 mie\u0107 dost\u0119p do raport\u00f3w i wynik\u00f3w. Wi\u0119kszo\u015b\u0107 z tych narz\u0119dzi poza wykonaniem test\u00f3w w warunkach laboratoryjnych pozwala r\u00f3wnie\u017c na wy\u015bwietlenie metryk opartych na danych rzeczywistych. Dodatkowo, poza otrzymanym raportem u\u017cytkownik otrzymuje szereg sugestii jak dan\u0105 metryk\u0119 poprawi\u0107.<\/p>\n\n\n\n Dobr\u0105 praktyk\u0105 jest wprowadzenie w proces wytw\u00f3rczy stron czy serwis\u00f3w internetowych w pe\u0142ni automatycznych test\u00f3w Web Vitals i ich raportowania. Pozwala to bardzo niskim kosztem monitorowa\u0107 bie\u017c\u0105ce zachowanie strony internetowej i reagowa\u0107 na ewentualnie problemy<\/strong>, zanim te zostan\u0105 zauwa\u017cone przez u\u017cytkownik\u00f3w ko\u0144cowych.<\/p>\n\n\n\n Web Vitals pomagaj\u0105 tw\u00f3rcom stron internetowych oceni\u0107 i poprawi\u0107 wydajno\u015b\u0107 ich aplikacji. Poprzez skupienie si\u0119 na trzech g\u0142\u00f3wnych wska\u017anikach (LCP, INP i CLS) oraz uwzgl\u0119dnienie dodatkowych wska\u017anik\u00f3w jak FCP czy TBT, mo\u017cna znacz\u0105co poprawi\u0107 do\u015bwiadczenie u\u017cytkownik\u00f3w.<\/p>\n\n\n\n Przek\u0142ada si\u0119 to nie tylko na lepsze pozycjonowanie stron czy wyniki biznesowe, ale tak\u017ce na ograniczeniu koszt\u00f3w zwi\u0105zanych z utrzymaniem strony internetowej i infrastruktury. Wy\u017cszy wsp\u00f3\u0142czynnik do\u015bwiadczenia u\u017cytkownik\u00f3w to tak\u017ce wi\u0119ksze przywi\u0105zanie<\/strong> i lepszy odbi\u00f3r na tle konkurencji.<\/p>\n\n\n\n Regularne monitorowanie i optymalizacja Web Vitals powinny sta\u0107 si\u0119 integraln\u0105 cz\u0119\u015bci\u0105 procesu tworzenia i utrzymania stron internetowych, aby zapewni\u0107 ich sukces w zmieniaj\u0105cym si\u0119 cyfrowym \u015bwiecie. Wska\u017aniki Web Vitals oferuj\u0105 dok\u0142adny wgl\u0105d w wydajno\u015b\u0107 strony, umo\u017cliwiaj\u0105c identyfikacj\u0119 i eliminacj\u0119 problem\u00f3w, kt\u00f3re mog\u0105 negatywnie wp\u0142ywa\u0107 na u\u017cytkownik\u00f3w. Dzi\u0119ki temu mo\u017cna zapewni\u0107 szybsze, bardziej responsywne i stabilne do\u015bwiadczenia u\u017cytkownikom<\/strong>, co jest kluczowe w erze cyfrowej.<\/p>\n\n\n\n ***<\/p>\n\n\n\n Je\u015bli jeste\u015bcie ciekawi, co nasi eksperci pisz\u0105 nt. Google Lighthouse w praktyce, zajrzyjcie koniecznie do artyku\u0142u.<\/p>\n\n\nWp\u0142yw wydajno\u015bci na do\u015bwiadczenie u\u017cytkownika<\/h2>\n\n\n\n
Nie jest \u017cadn\u0105 tajemnic\u0105, \u017ce znacznie ch\u0119tniej korzystamy z portali internetowych, kt\u00f3re s\u0105 responsywne, zachowuj\u0105 si\u0119 w spos\u00f3b stabilny i przewidywalny oraz nie powoduj\u0105 naszej frustracji.<\/p>\n\n\n\n\n
Miary Web Vitalis<\/strong><\/h2>\n\n\n\n
\n
Core Web Vitals<\/strong><\/h2>\n\n\n\n
Largest Contentful Paint (LCP)<\/strong><\/h3>\n\n\n\n
![\"Largest](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/06\/image1-2.png\")
<\/a>Interaction to Next Paint (INP)<\/strong><\/h3>\n\n\n\n
<\/a>Cumulative Layout Shift (CLS)<\/strong><\/h3>\n\n\n\n
<\/a>Wp\u0142yw Core Web Vitals na SEO<\/strong><\/h2>\n\n\n\n
Pozosta\u0142e Web Vitals<\/strong><\/h2>\n\n\n\n
First Contentful Paint (FCP)<\/strong><\/h3>\n\n\n\n
\n
Total Blocking Time (TBT)<\/strong><\/h3>\n\n\n\n
Time to First Byte (TTFB)<\/strong><\/h3>\n\n\n\n
<\/a>Warte uwagi<\/strong><\/h3>\n\n\n\n
Pomiar Web Vitals z u\u017cyciem dost\u0119pnych narz\u0119dzi<\/strong><\/h2>\n\n\n\n
Narz\u0119dzia mierz\u0105ce Web Vitals<\/strong><\/h2>\n\n\n\n
\n
<\/a>Podsumowanie<\/strong><\/h2>\n\n\n\n