3 metrike, ki resnično štejejo
Google Core Web Vitals so trije signali: LCP (kako hitro se naloži), INP (kako odzivna je interakcija), CLS (koliko se elementi premikajo). Vse tri so SEO signal in vplivajo na pozicije.
LCP – Largest Contentful Paint
Čas, ko se naloži največji vidni element. Cilj: pod 2,5 s.
Kako izboljšati LCP
- Hero slika v WebP, ne JPG/PNG.
fetchpriority="high"na hero LCP elementu.preloadhero slike v<head>.- TTFB pod 800 ms (server-side caching, dober hosting).
- Inline kritični CSS (preprečuje render-blocking).
- Brez 3rd-party JS, ki blokira render (Google Tag Manager → defer).
INP – Interaction to Next Paint
Čas od interakcije (klik, tap, tipkanje) do naslednje vizualne odzivnosti. Cilj: pod 200 ms.
Kako izboljšati INP
- Kratke JS funkcije (pod 50 ms). Long-running tasks razbij na chunke.
- Brez sinhronih API klicev pri click handler-jih.
requestIdleCallbackza neurgentno delo.- Debounce input event-e na search polje.
- Brez vmesnih layout-trigger-jev (čas berljiv s DevTools Performance).
CLS – Cumulative Layout Shift
Koliko se elementi premaknejo med nalaganjem. Cilj: pod 0,1.
Kako izboljšati CLS
widthinheightatributi na vseh<img>in<iframe>.aspect-ratioCSS lastnost za responsive video / image.- Rezerviran prostor za 3rd-party widgete (chat, cookie banner).
- Font display swap z fallback fonti, ki imajo podobne metrike.
- Brez animacij, ki premikajo layout (uporabi
transformnamestotop).
Kako izmeriti
- Lighthouse (v Chrome DevTools): lab data, hitra meritev.
- PageSpeed Insights: real-world data iz Chrome User Experience Report.
- Search Console: agregirani podatki za vse strani.
- web-vitals.js knjižnica: pošlji v lasten endpoint za detajlno analizo.
Tipična pot iz rdečega v zeleno
Pri Stran.si prenovah opažamo:
- Začetno stanje: LCP 4–6 s, INP 300–500 ms, CLS 0,15–0,30.
- Po WebP konverziji + lazy loading: LCP -1 do -2 s.
- Po kritičnem CSS-ju: LCP -300 do -600 ms.
- Po fix-u layout shift (width/height): CLS -0,1 do -0,2.
- Končno stanje: LCP 1.8 s, INP 120 ms, CLS 0,05. Vse v zelenem.