Optimizacija kakovosti uporabniške izkušnje je ključnega pomena za dolgoročni uspeh katerega koli spletnega mesta. Ne glede na to, ali ste lastnik podjetja, prodajalec ali razvijalec, vam Web Vitals lahko pomaga kvantificirati izkušnjo vašega spletnega mesta in prepoznati priložnosti za izboljšanje.

Pregled

Web Vitals je Googlova pobuda za zagotavljanje enotnih navodil za kakovostne metrike, ki so bistveni za zagotavljanje odlične uporabniške izkušnje na spletu.

Google je čez leta zagotovil številna orodja za merjenje in poročanje o uspešnosti. Nekateri razvijalci so strokovnjaki za uporabo teh orodij, drugi pa so ugotovili, da je obilo orodij in meritev izziv, za njihovo sledenje.

Lastnikom spletnih mest ni treba biti guruji uspešnosti, da bi razumeli kakovost izkušenj, ki jih nudijo svojim uporabnikom. Cilj pobude Web Vitals je poenostaviti krajino in pomagati spletnim mestom, da se osredotočijo na najbolj pomembne metrike, Core Web Vitals.

Core Web Vitals

Core Web Vitals so podmnožica Web Vitals, ki veljajo za vse spletne strani, meriti bi jih morali vsi lastniki strani, in bodo prikazani v vseh Googlovih orodjih. Vsak od ključnih spletnih vitalnih elementov predstavlja poseben vidik uporabniške izkušnje, je merljiv v praksi in odraža dejanske izkušnje s ključnim rezultatom, usmerjenim na uporabnika.

Meritve, ki sestavljajo Core Web Vitals, se bodo sčasoma razvijale. Trenutni sklop se osredotoča na tri vidike uporabniške izkušnje – nalaganje, interaktivnost in vizualno stabilnost – in vključuje naslednje meritve (in njihove pragove):

• Največja vsebinska barva (LCP): meri zmogljivost nalaganja. Za dobro uporabniško izkušnjo se mora LCP pojaviti v 2,5 sekunde po prvem nalaganju strani.

• Prva vhodna zakasnitev (FID): meri interaktivnost. Za dobro uporabniško izkušnjo morajo imeti strani FID manj kot 100 milisekund.

• Kumulativni premik postavitve (CLS): meri vizualno stabilnost. Za dobro uporabniško izkušnjo morajo strani vzdrževati CLS manj kot 0,1.

Za vsako od zgornjih meritev je za doseganje priporočenega cilja za večino uporabnikov dober prag za merjenje 75 odstotkov nalaganja strani, segmentiran v mobilne in namizne naprave.

Orodja, ki ocenjujejo skladnost z Core Web Vitals, bi morala šteti, da je stran uspešna, če izpolnjuje priporočene cilje na vsaj 75 % za vse tri zgoraj navedene metrike.

Orodja za merjenje in poročanje o Core Web Vitals

Google verjame, da so Core Web Vitals ključne za vse spletne izkušnje. Posledično se zaveže, da bo te meritve razkril v vseh svojih priljubljenih orodjih.

Core Web Vitals podpirajo orodja kot so PageSpeed Insights, Chrome UX Report, Search Console, Chrome DevTools, Lighthouse in pa Web Vitals Extension.

Orodja za merjenje Core Web Vitals v produkcijskem okolju

Poročilo o uporabniški izkušnji v Chromu (Chrome User Experience Report) zbira anonimne podatke o dejanskih uporabniških meritvah za vsak Core Web Vital. Ti podatki lastnikom spletnih mest omogočajo hitro oceno njihove uspešnosti, ne da bi jim bilo treba ročno meriti analitiko na svojih straneh, in orodij, kot sta PageSpeed Insights in poročilo Core Web Vitals Search Console.

Podatki, ki jih ponuja poročilo o uporabniški izkušnji v Chromu, ponujajo hiter način za oceno uspešnosti spletnih mest, ne vsebujejo pa podrobne telemetrije po ogledu strani, ki je pogosto potrebna za natančno diagnozo, spremljanja in hitrega odziva na regresije. Zato toplo priporočamo, da spletna mesta vzpostavijo lastno spremljanje dejanskih uporabnikov.

Izmerite Core Web Vitals v JavaScript

Vsako od ključnih spletnih vitalnosti je mogoče izmeriti v JavaScriptu s standardnimi spletnimi API-ji.

Najlažji način za merjenje vseh Core Web Vitals je uporaba knjižnice JavaScript web-vitals, ki vsako meritev meri na način, ki se natančno ujema z načinom poročanja vseh zgoraj navedenih orodij Google.

S knjižnico web-vitals je merjenje vsake metrike tako preprosto kot klicanje ene same funkcije (za popolno uporabo in podrobnosti API-ja glejte dokumentacijo):

import {getCLS, getFID, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Ko konfigurirate svoje spletno mesto za uporabo knjižnice web-vitals za merjenje in pošiljanje podatkov Core Web Vitals analitični končni točki, je naslednji korak združitev in poročanje o teh podatkih, da vidite, ali vaše strani izpolnjujejo priporočenih vsaj 75 % obiskov strani.

Primer tega je poročilo Web Vitals, ki lastnikom spletnih mest omogoča, da s pomočjo storitve Google Analytics izmerijo svoje ključne vrednosti.

Poročate lahko tudi o vsakem od Core Web Vitals brez pisanja kode s pomočjo razširitve Web Vitals Chrome. Ta razširitev uporablja knjižnico web-vitals za merjenje vsake od teh meritev in njihovo prikazovanje uporabnikom med brskanjem po spletu.

Ta razširitev je lahko v pomoč pri razumevanju učinkovitosti vaših lastnih strani, strani vaših konkurentov in spleta na splošno.

Photo by PhotoMIX Company from Pexels

Orodja za merjenje Core Web Vitals v razvojnem okolju

Čeprav so vse Core Web Vitals v prvi vrsti meritve v produkcijskem okolju, jih je veliko tudi mogoče meriti v razvojnem okolju.

Meritve v razvojnem okolju so najboljši način za testiranje učinkovitosti funkcij med razvojem – preden so objavljene uporabnikom. To je tudi najboljši način, kako ujeti regresije uspešnosti, še preden se zgodijo.

Medtem ko so meritve v razvojnem okolju bistveni del zagotavljanja odličnih izkušenj, niso nadomestilo terenskega merjenja.

Uspešnost spletnega mesta se lahko močno razlikuje glede na uporabnikove zmožnosti naprave, njihove omrežne pogoje, katere druge procese se izvajajo v napravi in način njihove interakcije s stranjo. Dejansko lahko na vsako od meritev Core Web Vitals vpliva na njen rezultat interakcija uporabnika. Samo meritve v produkcijskem okolju lahko natančno zajamejo celotno sliko.

Ostali Web Vitals

Medtem ko so Core Web Vitals ključne meritve za razumevanje in zagotavljanje odlične uporabniške izkušnje, obstajajo tudi druge ključne meritve.

Ti drugi Web Vitals podatki pogosto služijo kot proxy ali dodatne meritve za Core Web Vitals, da pomagajo zajeti večji del izkušenj ali pomagajo pri diagnosticiranju določene težave.

Na primer, metriki čas do prvega byta (TTFB) in prva vsebinska barva (FCP) sta ključna vidika izkušnje z nalaganjem in sta uporabni pri diagnosticiranju težav z LCP (počasni odzivni čas strežnika oziroma viri za blokiranje upodabljanja).

Podobno sta metriki, kot sta skupni čas blokiranja (TBT) in čas do interakcije (TTI), laboratorijski metriki, ki sta ključni za lovljenje in diagnosticiranje morebitnih težav z interaktivnostjo, ki bodo vplivale na FID. Vendar niso del nabora Core Web Vitals, ker jih ni mogoče izmeriti na terenu, niti ne odražajo uporabniško usmerjenega rezultata.

Razvijanje Web Vitals

Web Vitals in Core Web Vitals predstavljajo najboljše razpoložljive metrike, ki jih imajo razvijalci danes za merjenje kakovosti izkušenj na spletu, vendar ti signali niso popolni in pričakovati je treba prihodnje izboljšave ali dodatke.

Core Web Vitals so pomembni za vse spletne strani in so predstavljeni v ustreznih Googlovih orodjih. Spremembe teh meritev bodo imele obsežen učinek; kot taki bi morali razvijalci pričakovati, da bodo definicije in pragovi Core Web Vitals stabilni, posodobitve pa predhodno najavljene in predvidljive letne kadence.

Ostali Web Vitals so pogosto odvisni od konteksta ali orodja in so lahko bolj poskusni kot Core Web Vitals. Vas skrbi, kako bodo web core vitals posodobitve vplivale na vašo spletno stran? Za vas pripravljamo članek kjer boste lahko sami preverili in popravili osnovne stvari, ki so potrebne za odlične Core Web Vitals metrike. Ne spreglejte članka in se prijavite na prejemanje novic. Za vas ustvarjamo še več!