Core Web Vitals [Kaj so & kako prispevajo k boljši optimizaciji spletne strani]

Core Web Vitals je pojem za opredelitev elementov na spletnih straneh, ki bi naj z majem 2021 (vir 1 – Google: Core Web Vitals Becoming Ranking Signals in May 2021), stopili v veljavo kot pomemben ranking faktor (t.j. faktorji, ki pomembno vplivajo na uvrščanje spletnih strani na Googlu) za boljše/višje uvrstitve spletnih strani, med organskimi prikazi, na Googlu. Izboljševanje oz. upravljanje s Core Web Vitals sodi, po svoji naravi, k t.i. tehnični optimizaciji spletnih strani. Celotna optimizacija spletnih strani (onsite, offsite SEO in kako optimizirati spletno stran) je opisana na povezavi Optimizacija spletnih strani za Googlove TOP pozicije.

Kaj boste našli v tem zapisu…

Kaj so Core Web Vitals

Zapisano po domače in v čimbolj razumljivem jeziku, so Core Web Vitals, pojem za ključne/jedrne (od tod beseda core) elemente, ki skupaj prispevajo k temu, da je skupna ocena spletne strani, iz vidika uporabniške izkušnje, čim višja. Google ob tem uvaja nov termin – to je – page experience, saj želi na vrhnjih pozicijah svojega iskalnika prikazovati tiste spletne strani, ki uporabnikom Googla prinašajo najboljšo možno uporabniško izkušnjo. Le to, page experience, zna Google, s pomočjo Core Web Vitals, tudi izmeriti.

H Googlovim Core Web Vitals, sodijo 3 elementi:

  • Largest contentful paint (oz. največja vsebinska barva)
  • Cumulative layout shift (oz. kumulativni premik postavitve)
  • First input delay (oz. zakasnitev prvega vnosa), vir 2:
core web vitals

Vsi trije elementi so podrobneje razloženi v nadaljevanju, rezultate vseh treh parametrov pa najdete v Googlovi Search konzoli, pod menijem Izboljšave, zavihek Osnovni podatki za splet:

core web vitals search konzola

Largest contenful paint (oz. največja vsebinska barva)

Largest contentful paint oz. največja vsebinska barva je podatek, ki Googlu pove kako hitro (v milisekundah) se naloži največji vsebinski element na spletni strani (v trenutno vidnem polju uporabnika).

Da si boste lažje predstavljali kako deluje merjenje Largest contentful paint (v nadaljevanju LCP) si je treba najprej razložiti kaj je LCP in kako ga Google spremlja.

Največji vsebinski element na spletni strani je npr. slika, tekstovni blog, video vsebina, ipd…, Google pa v vsakem trenutku brskanja po spletni strani, spremlja kako hitro se ta vsebinski element naloži. Podrobnosti o tem kaj vse je lahko vsebina za splet, boste našli v članku Vsebinski marketing & prikaz primerov.

LCP (in razliko med LCP ter prvo barvo in prvo vsebinsko barvo) razloži spodnja slika (vir 3), največja slika (hero image) se naloži v 0,7 sekunde (vir 3):

largest contenful paint

Drugi faktor, ki ga je vredno razumeti, preden se želite lotiti izboljšave rezultata LCP, je t.i. “vidno polje uporabnika” (oz. polje above the fold), ki pomeni, da Google za vedno spreminjajoče se vidno polje uporabnika (obiskovalec namreč po spletni strani ves čas brska in jo skrola gor in dol), upošteva drugi element kot največjo vsebinsko barvo.

LCP, kakor tudi ostala 2, spodaj opisana Core Web Vitals elementa (cumulative layout shift in time to interactive) najhitreje izmerite s pomočjo Google PageSpeedInsights (vir 4):

Smernice za izboljšanje hitrosti nalaganja prve vsebinske barve gredo v smer zmanjševanja odzivnega časa serverja na katerem gosti vaša spletna vsebina in k optimizaciji slik in video vsebin na spletni strani (njihovo pravilno kodiranje, slike v ustreznih, novejših formatih, ustrezna velikost slik, ipd….). Več: Optimizacija slik za SEO

Cumulative Layout Shift (oz. kumulativni premik postavitve)

Cumulative Layout Shift oz. kumulativni premik postavitve je signal, ki Googlu pomaga izmeriti kdaj se je spletna stran, potem, ko jo je obiskovalec obiskal (in jo že nekaj časa uporablja), še zadnjič spremenila.

Najlažje si boste kumulativni premik postavitve razložili tako, da obiščete eno izmed vam priljubljenih spletnih strani in opazujete kako se ta, potem, ko že brskate po njej, še spreminja.

Ponavadi se z zakasnitvijo na spletnih straneh, najkasneje pojavijo npr. komentarji oz. možnost komentiranja, kasneje se naložijo večje slike in video vsebine, ipd…. Medtem, ko se zakasnele funkcionalnosti in vsebine na spletni strani še nalagajo, se spletna stran, hkrati še vedno spreminja. In ta rezultat je t.i. kumulativni premik postavitve (za katerega, podobno kot pri prvi vsebinski barvi), Google “želi, da je čim krajši.

Parametri, ki določajo kaj je dober, srednje dober in slab CLS rezultat, so prikazani na spodnji sliki (vir 5 – Cumulative Layout Shift (CLS):

cls

Če želite izboljšati rezultat kumulativnega premika postavitve, se osredotočite predvsem na elemente, ki CLS rezultat, znižujejo. To so: dinamične vsebine (npr. prikaz dinamičnih oglasov), mnogo “težkih”, vpetih vsebin, pa tudi specifična raba fontov na spletnih straneh, ipd… Podrobnosti o tem kako izboljšate CLS rezultat so objavljene v članku How to reduce Cumulative Layout Shift (CLS) – vir 6.

First input delay (oz. zakasnitev prvega vnosa)

Podatek o zakasnitvi prvega vnosa je Core Web Vital element, ki pomaga Googlu izmeriti interaktivnost/odzivnost spletne strani.

Najlažje si boste First input delay razložili tako, da si predstavljate čas, ki je potreben, po tem, ko na določeni spletni strani, kliknete na nek gumb in “čakate”, da se izvede zahtevana akcija (npr. odpre novo okno, odpre spletni obrazec, itd…).

Želene hitrosti nalaganja vseh treh Core Web Vital elementov so prikazane na spodnji sliki, na sredini slike pa je podatek za zakasnitev prvega vnosa (vir 7):

first input delay

Glavne smernice za izboljšanje FID rezultata so pohitritev izvajanja JavaScript kode, optimizacija in/ali odstranitev skript pluginov in raznoraznih orodij, ki jih ne potrebujete ter skrb za ohranjanje glavne poti eksekucije nalog ob nalaganju spletne strani, čiste/proste (t.i. razbijanje long taskov na majhna opravila).

Kako izmerite Core Web Vitals

Vse 3 Core Web Vitals lahko (ločeno, za namizne ali mobilne naprave) izmerite tudi direktno na računalniku. Na tipkovnici stisnete gumb F12 in v vrhnjem meniju, na novo odprtega desnega okna, izberete “Performance”. Potem izberete ali želite audit/pregled za mobilne ali namizne naprave in kliknete na gumb “run audit”.

Spodnja slika prikazuje web performace audit za prikaz spletne strani ebonitete.si na namiznih napravah:

Vstran od Googlovih orodij za testiranje hitrosti spletnih strani, se za merjenje hitrosti nalaganja spletnih strani, pogosto uporablja GT Metrix.

Na spodnji sliki je prikaz rezultata Core Web Vitals spletne strani jedilne mize Pohistvo123.si z GT Metrix:

Če želite preveriti kateri tipi vsebin najbolj vplivajo na Core Web Vitals, vam to pokaže tudi orodje Pingdom.

Na spodnji sliki je s Pingdom orodjem pregledano katere vsebine po tipu in po domeni, zasedajo največje deleže pri nalaganju spletne strani sedeži za kolo Pikapolonica:

core web vitals pikapolonica

Kako pomembne so Core Web Vitals za višje uvrščanje spletnih strani na Googlu

Z namenom, da se pri SEO optimizaciji spletne strani, ne “zapodite” najprej direktno na tehnično optimiziranje spletne strani, si preberite spodnje:

Core Web Vitals so pomembne za SEO optimizacijo in višje uvrščanje spletnih strani na Googlu, a le ob pogoju, da je predhodno, učinkovito implementirana onsite SEO optimizacija in offsite SEO optimizacija.

V kolikor spletna stran “šepa” tako na onsite kot offsite SEO, tehnična optimizacija in ureditev Core Web Vitals, ne bo vidno vplivalo na višje uvrstitve spletne strani na Googlu.

Odločitev o tem ali se lotiti ureditve Core Web Vitals naj bo povezana tudi s panogo in nišo v kateri se nahajate, kakor tudi SEO težavnostjo panoge, v kateri delujete. Ni namreč vseeno, če ste v panogi, kjer vaši konkurenti na Core Web Vitals ne prisegajo v množini, kot, če ste v panogi, kjer Core Web Vitals, poskuša implementirati vedno več spletnih strani.

Kaj so ostale Web Vitals

K ostalim Web Vitals elementom prištevamo:

other web vitals

O njih v enem izmed prihodnjih blog zapisov.

Dodatne informacije:

Viri:

1 – Google: Core Web Vitals Becoming Ranking Signals in May 2021
2 – Core Web Vitals
3 – Lighthouse: Largest Contentful Paint
4 – Google PageSpeed Insights
5 – Cumulative Layout Shift (CLS)
6 – How to reduce Cumulative Layout Shift (CLS)
7 – What is First Input Delay (FID)? How do I resolve FID issues?