Optimizacija Web Core Vitals
V prejšnjih prispevkih smo vas seznanili, kakšne spremembe prihajajo s posodobitvijo algoritmov iskalnika Google. To posodobitev je Google poimenoval Web Vitals, sestavljajo pa ga metrike, ki ucenjujejo vaše spletno mesto na podlagi uporabniške izkušnje in hitrosti spletnega mesta. Če želite podrobneje izvedeti kaj so Web Vitals si ga lahko to ogledate tukaj. Zdaj pa je čas, da vam pokažemo, kako pristopiti stvari in biti korak pred vašimi tekmeci.
Z novo posodobitvijo algoritmov daje Google poudarek na dve ključni stvari:
- tri nove meritve uspešnosti, ki bodo uporabljene kot signali za razvrščanje v iskalnih rezultatih
- AMP strani se ne uporablja, njihova uporaba tudi ne priporoča, priporoča pa se uporaba metrik Web Core Vitals
Optimizacija Web Core Vitals
Pogovorimo se o tem, kako izmeriti, diagnosticirati in izboljšati vsako od treh novih meritev: LCP, FID in CLS. Ne pozabite, da bo vsaka optimizacija za izboljšanje teh meritev skoraj zagotovo pospešila vaše strani in izboljšala uporabniško izkušnjo!
Največja vsebinska upodobitev – (Largest Contentful Paint – LCP)
LCP je časovna točka, izmerjena, ko je na zaslon upodobljen največji element nad prepogibom (above-the-fold). V večini primerov je to slika ali videoposnetek ali glavni blok besedila na strani.
LCP je dobra alternativa »Page Load Time«: meri vse, kar je potrebno, da vaše spletno mesto upodobi ključno vsebino na strani – DNS, TLS, HTML, CSS in blokira JavaScript, vendar ne vključuje asinhronih skriptov ali lazy-load vsebine.
LCP se pojavi šele po zaključku treh stopenj nalaganja strani:
- HTML dostavljen in razčlenjen
- Sredstva kritične poti, prenesena, razčlenjena in obdelana
- Preneseno in upodobljeno sredstvo LCP (slika, video, spletna pisava itd.)
Dostava hitrih dokumentov je ena najpomembnejših stvari, ki jih lahko storite za izboljšanje hitrosti strani. Če to lahko zmanjšate za 100 ms, bo vsaka druga metrika trajanja postala 100 ms hitrejša! Hitra dostava dokumentov temelji na nekaj ključnih optimizacijah:
- DNS – DNS je internetni imenik. Optimizirajte DNS s povečanjem TTL in uporabo globalno distribuirane storitve DNS.
- TCP – Omejevalni dejavnik pri vzpostavljanju povezave TCP je (običajno) čas povratnega potovanja med uporabnikom in strežnikom. Uporabite omrežje za dostavo vsebin, da bo ta čim nižji.
- TLS – varna spletna mesta zahtevajo eno ali več dodatnih povratnih poti za vzpostavitev varne povezave. Prepričajte se, da ste v certifikatu spletnega mesta omogočili spenjanje OCSP (Online Certificate Status Protocol). In da je strežnik ali CDN konfiguriran za podporo TLSv1.3.
- TTFB – čas do prvega bajta za vaše spletno mesto je omejen s tem, kako hitro lahko strežnik ustvari odziv. Če je mogoče, naj bo to predpomnjeno v CDN ali obratnem strežniku proxy. Če predpomnjenje HTML ni mogoče (na primer, če je na strani personalizacija), poskrbite, da lahko vaše strežniško okolje dostavi strani v 100 ms.
- HTML – morda se sliši očitno, vendar so velikost, globina in struktura dokumenta HTML ključnega pomena za njegovo delovanje. Zagotovite, da je dokument HTML stisnjen in manjši od 50 kB po omrežju. Bodite pozorni na <head> dokumenta, da zagotovite, da je <title> prvi in da tukaj ni nobenih blokirajočih oznak <script>.
Zakasnitev prvega vnosa – First Input Delay (FID)
FID je merilo, kako dolgo je bil brskalnik zaposlen z drugimi nalogami, preden se je lahko odzval na diskreten uporabniški dogodek, kot je »tap« ali »click«. To kaže, kako odziven je uporabniški vmesnik pri uporabniku in kako zaseden je CPU z obdelavo JavaScript.
Edini dosleden način za izboljšanje FID brez poslabšanja uporabniške izkušnje je zmanjšanje časa, porabljenega za izvajanje JavaScript, tako med nalaganjem strani kot med njenim življenjskim ciklom.
Najhitrejša rešitev za optimizacijo te metrike bi bil skritje vsebine (morda za zaslonom nalaganja), dokler se JavaScript ne zaključi, zato da obiskovalci ne poskušajo komunicirati, preden je vaša aplikacija popolnoma pripravljena. To bo najverjetneje negativno vplivalo na vaše meritve LCP in CLS, zato pristopite stvari previdno!
Kumulativni premik postavitve – Cumulative Layout Shift (CLS)
CLS je merilo, kako stabilen je uporabniški vmesnik, ko uporabnik naloži in sodeluje s stranjo. Gre za skupek nepričakovanih premikov postavitve med življenjskim ciklom strani, na primer, ko se oglasna pasica naloži in potisne glavno vsebino strani.
Ocene premika postavitve izhajajo iz vpliva, ki ga ima premik na prikazno polje: koliko elementov se spremeni in kako daleč se premikajo. Popoln kumulativni rezultat sega od 0 do 0.1.
Nepričakovani premiki postavitve pomenijo, da se ne pojavijo takoj po direktni interakciji uporabnika, zato bodo ti verjetno negativno vplivali na uporabniško izkušnjo.
CLS meri CrUX (Chrome User Experience) v celotnem življenjskem ciklu strani, od začetka navigacije do takrat, ko uporabnik zapusti stran. Vsi nepričakovani premiki postavitve se v tem času seštejejo in za merjenje se uporabi skupni rezultat; zaradi tega je otženo merjenje v razvojnih okoljih. To tudi pomeni, da bosta orodji, kot sta WebPageTest in mPulse, poročali o najboljšem primeru za CLS, te podatke bodo zbirali samo med nalaganjem strani in prezrli nadaljnje premike, kot so tisti, ki se pojavijo med pomikanjem na strani.
Ostali Web Vitals
Medtem ko začetna posodobitev Page Experience določa LCP, FID in CLS kot ključne ključne elemente, se te lahko sčasoma spremenijo! Obstaja vrsta drugih meritev, ki zagotavljajo dodatno vrednost in jim je vredno slediti in optimizirati. Spodaj je nekaj ključnih meritev, ki jim boste morda želeli slediti in jih izboljšati.
Prva vsebinska upodobitev – First Contentful Paint (FCP)
Medtem ko LCP meri največjo upodobitev na zaslonu, FCP meri, ko se pojavi prva upodobitev. To je pomembna metrika iz več razlogov, nenazadnje tudi to, da uporabnik prvič ve, da njegova navigacija dejansko deluje. Ta časovna točka bo dobro povezana tudi s tem, ko uporabnikov brskalnik preklopi kontekst iz prejšnje strani.
FCP je pogosto enak prvi vsebinski upodobitvi. Prva barva vključuje v izračun nevidne elemente, medtem ko FCP meri samo vsebino, ki je uporabniku vidna. Naprimer logotip in glava spletnega mesta.
Čas za interakcijo – Time to Interactive (TTI)
Čas do interakcije (TTI) je približek, kdaj bo stran odzivna, ko bo uporabnik anredil neko akcijo. Ta časovna točka se meri med prvo vsebinsko upodobitvijo in ko glavna nit nima več kot pet sekund dolgih nalog. Če bomo to meritev dobili čim nižjo, bodo uporabniki imeli odlično izkušnjo, ko bodo poskušali komunicirati z vašimi stranmi. Uporabite TTI s TBT, da dobite splošno sliko o tem, kako zaseden je brskalnik pri nalaganju vaših strani.
Skupni čas blokiranja – Total Blocking Time (TBT)
Skupni čas blokiranja (TBT) je merilo, kako zaseden je bil CPU brskalnika med nalaganjem strani, merjen kot vsota dolgih nalog (manj kot 50 ms vsako) med FCP in TTI. Zmanjšanje tega časa bo verjetno izboljšalo uporabniško izkušnjo in lahko pripomoglo tudi k izboljšanju zaznane zmogljivosti. V svojih profilih JavaScript poiščite velika dolga opravila in jih poskusite zmanjšati, odstraniti ali odložiti.
Kako slediti uspešnosti
Googlova orodja, kot so PageSpeed Insights, Lighthouse in web.dev, vam bodo zagotovila merjenje vaših osnovnih spletnih vrednosti. Podatki »field« imajo sicer nekatere omejitve: podatki se zbirajo samo od uporabnikov brskalnika Google Chrome, ki so izbrani za anonimno zbiranje statističnih podatkov o uporabi, in se zbirajo mesečno z zamudo v tednu ali dveh. Če je torej prvi teden v oktobru, boste morda imeli na voljo samo podatke iz celotnega meseca avgusta.
Če želite natančneje slediti vitalnim vrednostim, poiščite resnično uporabniško rešitev za merjenje, kot je Akamai mPulse. Orodja RUM (Real User Monitoring), lahko zbirajo podatke o uspešnosti iz vseh brskalnikov, ki jih podpirajo, in vam v realnem času omogočajo vpogled v sledenje vaše uspešnosti. Prav tako lahko hitro opazite težave z določenimi stranmi ali napravami, s čimer naredite podatke uporabne.
Zaključek in kako ukrepati
Predlagana posodobitev izkušnje strani se bo zgodila v juniju. To bo vplivalo na uvrstitev vaše strani v iskalnih nizih brskalnika in merila za upravičenost do strani za katerege Google meni da so najboljše v Googlovi strani z rezultati iskanja. Google je predlagal tri nove meritve uspešnosti, ki bodo uporabljene kot signali za to posodobitev SEO, pri čemer bo izbira temeljila na njihovi povezanosti z uspešnostjo, ki jo zaznajo uporabniki, in zmožnostjo zbiranja podatkov na terenu.
Vemo, da hitrejše izkušnje vodijo do nižje stopnje obiskov ene strani, daljše seje, boljših ocen zadovoljstva, večje konverzije, povečanega organskega prometa in posledično prihodka.
Hitrost svoje spletne strani pa lahko preveriš kar na tej povezavi.
Odlična stvar pri optimizaciji učinkovitosti je, da je marsikaj mogoče doseči z razmeroma majhnimi popravki kodiranja, zato preizkusite ključne strani, bodite pozorni na prostor za izboljšave in naredite pozitivne spremembe.
