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

»Zakaj PageSpeed kaže rdeče številke?« je vprašanje, ki ga dobim pri skoraj vsaki prenovi spletne strani. Odgovor je pogosto preprostejši, kot se zdi: prevelike slike, preveč vtičnikov in skripte, ki jih nihče več ne uporablja.

Na kratko: Core Web Vitals so tri Googlove meritve uporabniške izkušnje: LCP (kako hitro se prikaže glavna vsebina, cilj do 2,5 s), INP (kako hitro se stran odzove na klik, cilj do 200 ms) in CLS (koliko se vsebina med nalaganjem premika, cilj do 0,1). Vplivajo na uvrstitve, a manj kot vsebina. Bolj kot Google jih čutijo obiskovalci na telefonu.

Tri meritve, ki štejejo

LCP – Largest Contentful Paint

Meri, kdaj se prikaže največji element na zaslonu, običajno glavna slika ali naslov. Dober rezultat je do 2,5 sekunde, slab nad 4 sekunde.

INP – Interaction to Next Paint

Meri, kako hitro se stran odzove na klik, dotik ali vnos. Marca 2024 je nadomestil starejšo meritev FID. Dober rezultat je do 200 milisekund, slab nad 500 milisekund. Na WordPress straneh ga najpogosteje pokvarijo težke skripte vtičnikov, klepetalnikov in oglasnih kod.

CLS – Cumulative Layout Shift

Meri, koliko se vsebina med nalaganjem premika. Klasičen primer: želite klikniti gumb, nato se naloži pasica in kliknete nekaj drugega. Dober rezultat je do 0,1, slab nad 0,25.

Google ocenjuje stran po podatkih resničnih obiskovalcev v zadnjih 28 dneh. Da stran »prestane«, mora 75 % obiskov doseči dober rezultat pri vseh treh meritvah.

Kje preverite rezultate

• Google Search Console – poročilo o izkušnji na straneh pokaže, katere skupine URL-jev imajo težave, po podatkih resničnih obiskovalcev.
• PageSpeed Insights – za posamezen URL pokaže podatke resničnih uporabnikov (če jih je dovolj) in laboratorijski test z nasveti.
• Chrome DevTools – za natančno iskanje vzroka, kateri element ali skripta upočasnjuje stran.

Pri manjših slovenskih straneh Google pogosto nima dovolj podatkov resničnih uporabnikov. Takrat se zanesite na laboratorijski test, a ne lovite rezultata 100. Pomembno je, da je stran na telefonu hitra in stabilna.

Kako izboljšati LCP

• glavno sliko pomanjšajte na dejansko velikost prikaza in jo shranite v WebP ali AVIF,
• glavne slike na vrhu strani ne nalagajte z zamikom (lazy load),
• uporabite predpomnjenje (na LiteSpeed strežnikih LiteSpeed Cache, sicer WP Rocket ali podobno),
• izberite hitro gostovanje; počasen odziv strežnika poslabša vse ostalo,
• omejite število pisav in jih naložite lokalno.

Kako izboljšati INP

• odstranite vtičnike, ki jih ne uporabljate, in preverite, katere skripte nalagajo preostali,
• klepetalnike, piksle in podobne kode naložite z zamikom ali šele ob interakciji,
• pri gradnikih strani (Elementor in podobni) ne uporabljajte animacij in drsnikov, ki jih ne potrebujete,
• preverite kodo za piškotke; slabo nastavljena pasica lahko upočasni prvi klik.

Kako izboljšati CLS

• slikam in videom določite širino in višino,
• prostor za pasice, oglase in vgrajene vsebine rezervirajte vnaprej,
• pasico za piškotke prikažite kot prekrivni element, ki ne premika vsebine,
• pisave nalagajte tako, da se besedilo ob zamenjavi pisave ne premakne.

Ali se splača?

Core Web Vitals niso najpomembnejši dejavnik uvrstitev. Stran s slabšimi meritvami in boljšo vsebino pogosto premaga hitrejšo stran s slabšo vsebino. A hitrost vpliva na to, koliko obiskovalcev ostane in pošlje povpraševanje, zlasti na telefonu in pri oglasih, kjer plačate vsak klik.

Tehnične težave, vključno s hitrostjo, uredim v okviru tehničnega SEO pregleda. Več na strani SEO optimizacija.

Pogosta vprašanja