Core Web Vitals: kako izboljšati LCP, INP in CLS

Core Web Vitals niso le ocena hitrosti

Core Web Vitals merijo tri vidike dejanske uporabniške izkušnje: kako hitro se prikaže glavna vsebina, kako odzivna je stran ob interakciji in kako stabilna je postavitev. Trenutni ključni kazalniki so Largest Contentful Paint (LCP), Interaction to Next Paint (INP) in Cumulative Layout Shift (CLS).

Cilj ni popolna laboratorijska številka, temveč dobra izkušnja za vsaj 75. percentil resničnih obiskov, ločeno za mobilne in namizne naprave. Izboljšave pogosto koristijo konverzijam in dostopnosti, tudi kadar je neposreden vpliv na uvrstitev manjši od vpliva vsebine ali relevantnosti.

LCP: glavna vsebina mora prispeti hitro

LCP meri čas do prikaza največjega vidnega vsebinskega elementa, pogosto hero slike ali glavnega naslova. Slab rezultat je običajno kombinacija počasnega strežnika, blokirajočega CSS-a, prevelike slike in vira, ki ga brskalnik odkrije prepozno.

Najprej ugotovite, kateri element je LCP na posamezni predlogi. Nato zmanjšajte čas do prvega bajta, sliko dostavite v ustrezni velikosti in sodobnem formatu, pomemben vir prednaložite ter ga ne nalagajte leno. Če je LCP besedilo, preverite pisave in blokirajoče sloge.

• Hero slika ima srcset, določene dimenzije in format WebP ali AVIF.
• LCP vir je v začetnem HTML-ju in ima visoko prioriteto nalaganja.
• Kritični CSS je majhen, nekritični skripti pa ne blokirajo izrisa.
• Strežnik, CDN in predpomnjenje zmanjšajo odzivni čas dokumenta.

INP: stran mora hitro odgovoriti na klik

INP ocenjuje zakasnitev uporabniških interakcij skozi obisk strani. Dolge naloge v glavni niti, obsežen JavaScript, drago ponovno izrisovanje in kompleksni poslušalci dogodkov lahko povzročijo, da klik deluje zamrznjeno.

V profilerju poiščite dolge naloge in jih razdelite na manjše enote. Zmanjšajte količino JavaScripta, odložite funkcije, ki niso potrebne ob prvem prikazu, ter preprečite nepotrebne React izrise. Pri zahtevnem delu uporabniku takoj pokažite vizualen odziv, obdelavo pa izvedite asinhrono.

CLS: preprečite nepričakovane premike

CLS se poveča, ko se že prikazana vsebina brez uporabnikovega dejanja premakne. Pogosti vzroki so slike brez dimenzij, pozno vstavljeni pasovi, oglasi brez rezerviranega prostora in zamenjava pisave, ki spremeni metriko besedila.

Za slike, videe in vdelane elemente rezervirajte prostor z dimenzijami ali razmerjem stranic. Obvestila vstavljajte v vnaprej načrtovano območje ali kot prekrivni element. Pisave prednaložite, zmanjšajte število rezov ter uporabite premišljeno strategijo font-display.

Terenski podatki proti laboratorijskim

Poročilo Search Console in Chrome UX Report uporabljata agregirane podatke resničnih uporabnikov v drsečem obdobju. Lighthouse meri eno simulirano nalaganje in je odličen za iskanje vzrokov. Zato lahko laboratorijski test pokaže zeleno, terenski podatki pa še vedno opozarjajo na težavo.

Terenske rezultate segmentirajte po predlogi, napravi, državi in kakovosti povezave, kadar imate lastno merjenje. Ena številka za celotno domeno skrije, da je na primer blog hiter, produktne strani pa počasne. Popravek preverite v laboratoriju takoj, učinek v terenskih podatkih pa z zamikom.

Načrt izboljšav brez lovljenja popolnosti

Začnite pri predlogah z največ organskega prometa in prihodka. Odpravite en sistemski vzrok naenkrat, uvedite merjenje pred in po objavi ter spremljajte tudi konverzije. Odstranitev nepotrebne skripte tretje osebe je pogosto vrednejša od mikroskopske optimizacije ikone.

Določite proračun zmogljivosti: največja teža začetnega JavaScripta, slik in pisav ter dovoljeno število zunanjih skript. Vključite ga v razvojni proces, sicer se bo hitrost po enkratnem projektu znova poslabšala. Core Web Vitals so proces kakovosti, ne enkratna kampanja.

• Merite vsako ključno predlogo pred spremembo in po njej.
• Prioriteto določite po številu prizadetih obiskov in poslovni vrednosti.
• Preverite počasnejše mobilne naprave, ne le razvojnega računalnika.
• Regresije preprečite s proračuni in avtomatskimi preverjanji v objavi.

Pogosta vprašanja