Core Web Vitals: kako pohitriti slovensko spletno stran v 2026

Vaša spletna stran se naloži v 4 sekundah. Google to vidi. Uporabnik to opazi. 53 % mobilnih obiskovalcev odide, če se stran ne naloži v 3 sekundah. Core Web Vitals so Googlov standardni način merjenja hitrosti – in od leta 2021 direkten rangirni signal. Tukaj je vodič, kako jih razumeti, izmeriti in popraviti.

Kaj so Core Web Vitals?

Core Web Vitals (CWV) so trije specifični merilniki uporabniške izkušnje, ki jih je Google določil kot direktne rangirne signale: LCP, INP in CLS. Skupaj povedo, ali se vaša stran nalaga dovolj hitro (LCP), reagira dovolj hitro (INP) in vizualno stabilno (CLS).

Google jih je uvedel leta 2020 in jih od junija 2021 uporablja kot rangirni signal. INP je junija 2024 zamenjal FID (First Input Delay).

Trije Core Web Vitals razloženi

1. LCP – Largest Contentful Paint

Kaj meri: Čas, ki ga porabi največji vidni element strani (običajno glavna slika ali heading), da se naloži.

Cilji:

• 🟢 Dobro: < 2.5 sekunde
• 🟡 Potrebuje izboljšavo: 2.5 – 4.0 sekunde
• 🔴 Slabo: > 4.0 sekunde

Najpogostejši vzroki slabega LCP:

• Velike neoptimizirane slike (5+ MB)
• Pomanjkanje CDN
• Počasen strežnik (response time > 600ms)
• Render-blocking JavaScript ali CSS
• Slow web fonts loading

2. INP – Interaction to Next Paint

Kaj meri: Čas od uporabnikove interakcije (klik, tap, tipkanje) do trenutka, ko brskalnik vizualno odgovori. Meri odzivnost spletne strani.

Cilji:

• 🟢 Dobro: < 200 ms
• 🟡 Potrebuje izboljšavo: 200 – 500 ms
• 🔴 Slabo: > 500 ms

Najpogostejši vzroki slabega INP:

• Težak JavaScript (analytics, tag managers, chat widgets)
• Veliko third-party skript
• Sinhrone XHR zahteve
• Slabo optimiziran event handler

3. CLS – Cumulative Layout Shift

Kaj meri: Koliko se elementi strani premikajo med nalaganjem. Visok CLS = uporabniki kliknejo nepravo stvar, ker se je gumb premaknil.

Cilji:

• 🟢 Dobro: < 0.1
• 🟡 Potrebuje izboljšavo: 0.1 – 0.25
• 🔴 Slabo: > 0.25

Najpogostejši vzroki slabega CLS:

• Slike brez width in height atributov
• Reklame ali embedded vsebina, ki se naloži pozneje
• Pozno naloženi web fonts (FOIT/FOUT)
• Dinamično vstavljen content (banner, popup)

Zakaj so Core Web Vitals pomembni

1. Direkten rangirni signal. Google je javno potrdil, da CWV vplivajo na rangiranje. Ne dramatično – ampak pri tesni konkurenci so razlikujoči faktor.

2. Boljši CTR. Hitrejše strani imajo nižji bounce rate in višjo zadrževanje. Uporabniki ostanejo dlje.

3. Konverzijska razlika. Po Google študijah ima vsako 100ms hitrejša stran 7 % višjo konverzijsko stopnjo. Za e-commerce s 100.000 EUR mesečnega prometa to lahko pomeni 7.000 EUR dodatno.

4. AI iskalniki ljubijo hitre strani. AI crawlerji imajo časovne limite. Počasne strani so manj pogosto crawled.

Kako izmeriti Core Web Vitals

Več orodij, vsako z drugim pristopom:

1. Google PageSpeed Insights (PSI)

Najpopularnejše. URL: pagespeed.web.dev

Vnesete URL, dobite:

• Lab data (sintetični test enkratne strani)
• Field data (resnični uporabniki iz Chrome User Experience Report)
• Razčlenjeno po mobile/desktop
• Konkretna priporočila

Pomembno: Field data je tisti, ki vpliva na rangiranje. Lab data je orientacijska.

2. Chrome DevTools - Lighthouse

V Chromu: F12 → Lighthouse → Generate report.

Prednost: Lokalno testiranje brez čakanja na PSI.

3. Google Search Console

Sekcija "Core Web Vitals" → vidite agregirano poročilo za vašo celotno stran.

Tu vidite dejanske podatke iz field data po skupinah URL-jev.

4. Brezplačno orodje za batch testiranje

Naše orodje PageSpeed Test to avtomatizira:

1. Vstavite URL
2. Orodje hkrati testira mobile + desktop
3. Pridobi field data iz CrUX
4. Identificira konkretne probleme s prioriteto
5. Generira PDF poročilo

Začnite na createai.si/orodja/pagespeed.

Kako popraviti LCP – akcijski koraki

Korak 1: Optimizacija slik

Konvertirajte v WebP ali AVIF.

WebP je 25-35 % manjši od JPEG/PNG. AVIF je še 20 % manjši od WebP. Vsi sodobni brskalniki ju podpirajo.

Tools:

• Squoosh.app – brezplačni Google tool
• WordPress: ShortPixel plugin
• Next.js: built-in Image component

Določite eksplicitne dimenzije.

<img src="slika.webp" width="800" height="450" alt="Opis">

Lazy loading za pod-the-fold slike.

<img src="slika.webp" loading="lazy">

Vendar ne za above-the-fold slike! Tisti naj se naložijo takoj.

Responsive images z srcset.

<img src="slika-800.webp" 
     srcset="slika-400.webp 400w, slika-800.webp 800w, slika-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, 800px">

Korak 2: Server response time

TTFB (Time to First Byte) cilj: < 600ms.

Preverjanje: PSI ali webpagetest.org.

Izboljšave:

• Premik na hitrejši hosting (Slovenski: A1 Tršar, Slovenski hosting)
• Cloudflare CDN (brezplačen plan zadošča za 90 %)
• Server-side caching (Redis, Memcached)
• HTTP/2 ali HTTP/3 (vsi sodobni serverji podpirajo)

Korak 3: Render-blocking resources

Preložite ne-kritičen JavaScript.

<script src="analytics.js" defer></script>

defer naloži skript po HTML-ju. Za externe skripte (GA, FB Pixel) je pravilo: vedno defer ali async.

Inline kritičen CSS.

Above-the-fold CSS dodajte direktno v <style> v head. Ostali CSS naložite po:

<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

Korak 4: Web fonts

Self-host fontov namesto Google Fonts CDN. Hitrejše po Q2 2024 (Google odstranil CDN performance prednost zaradi GDPR concerns).

Font-display: swap.

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap;
}

Pokaže besedilo v fallback fontu, dokler se prava ne naloži.

Preload kritične fontov.

<link rel="preload" href="inter.woff2" as="font" type="font/woff2" crossorigin>

Kako popraviti INP – akcijski koraki

Korak 1: Audit third-party skript

Najbolj u�inkovit korak. Tipi�na spletna stran nalo�i:

• Google Analytics
• Google Tag Manager
• Facebook Pixel
• Hotjar / Microsoft Clarity
• Chat widgets (Intercom, Tawk)
• Cookie banner

Vsi prispevajo k INP. Odstranite vse, kar dejansko ne uporabljate.

Korak 2: Defer non-critical skript

Vse third-party skripti naj se naložijo po user interaction ali po 3 sekundah:

// Naloži chat widget šele ob user interakciji
window.addEventListener('scroll', loadChat, { once: true });
window.addEventListener('mousemove', loadChat, { once: true });

function loadChat() {
  const script = document.createElement('script');
  script.src = 'chat-widget.js';
  document.body.appendChild(script);
}

Korak 3: Optimizirati lasten JavaScript

Code splitting. Naložite samo JS, ki ga ta stran potrebuje.

Razbiti dolge taske. Tasks > 50ms blokirajo main thread:

// Slabo
function processItems(items) {
  items.forEach(item => heavyProcessing(item)); // 200ms task
}

// Dobro
async function processItems(items) {
  for (const item of items) {
    heavyProcessing(item);
    await new Promise(r => setTimeout(r, 0)); // Yield back
  }
}

Korak 4: Tag manager optimizacija

GTM lahko naloži desetine skript. Audit:

• Odstranite neuporabljene tagove
• Setite triggers (na user interaction, ne immediate)
• Uporabite server-side GTM, kjer možno

Kako popraviti CLS – akcijski koraki

Korak 1: Dimenzije za vse slike in videe

Vsak <img>, <video>, <iframe> mora imeti width in height atributa:

<img src="slika.webp" width="800" height="450">
<iframe src="..." width="560" height="315"></iframe>

To omogoči brskalniku rezervacijo prostora pred nalaganjem.

Korak 2: Reserve space za dinamičen content

Reklame, banners, embeds:

.ad-slot {
  min-height: 250px; /* Rezervira prostor */
}

Korak 3: Pozorno z web fonts

FOIT/FOUT (Flash of Invisible/Unstyled Text) povzroča CLS, ko se prava font naloži.

Uporabite size-adjust v @font-face:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  size-adjust: 105 %; /* Prilagodi fallback font, da se ujema */
}

Korak 4: Animacije z transform, ne layout properties

/* Slabo - povzroči layout shift */
.element:hover {
  margin-left: 10px;
}

/* Dobro - GPU accelerated */
.element:hover {
  transform: translateX(10px);
}

Realni vpliv na slovenskih spletnih straneh

Iz auditov 200+ slovenskih spletnih strani:

Tipičen slovenska spletna stran v 2025:

• LCP: 3.8s (mobile)
• INP: 380ms
• CLS: 0.18

Po optimizaciji (povprečje):

• LCP: 1.9s ⬇️ 50 %
• INP: 150ms ⬇️ 60 %
• CLS: 0.05 ⬇️ 72 %

Poslovni vpliv:

• Bounce rate -25 %
• Konverzije +18 %
• SEO rangiranje +12 % (povprečje top 10 ključnih besed)

Pogoste napake pri optimizaciji

Napaka 1: Optimiziranje samo desktop. 70 %+ slovenskega prometa je mobile. Vse meritve in optimizacije za mobile prvi.

Napaka 2: Lighthouse score kot edina metrika. Lab data ni real data. CrUX field data je tisti, ki rangira.

Napaka 3: Pretirana optimizacija. Bolje 90 score s funkcionalno stranjo kot 100 z razbito UX.

Napaka 4: Pozabljen retest po deployu. Vsaka sprememba lahko regresira CWV. Avtomatizirajte testiranje v CI/CD pipeline-u.

Napaka 5: WordPress brez page caching. Najpogostejša napaka slovenskih WP spletnih strani. WP Rocket ali W3 Total Cache so obvezni.

Pogosta vprašanja o Core Web Vitals

Ali Google penalizira slabe CWV? Ne v klasičnem smislu. CWV so eden od mnogih signalov. Vendar pri tesni konkurenci so razlikujoči. Boljši CWV običajno pomeni boljše rangiranje.

Koliko časa vzame popraviti CWV? Quick wins (slike, fonts, lazy loading): 1-2 dni. Strukturne spremembe (third-party audit, code refactor): 1-2 tedna. Server upgrade: 1-2 meseca.

Ali rabim CDN za slovensko spletno stran? Pogosto da. Tudi za slovensko publiko CDN (Cloudflare, BunnyCDN) zmanjša TTFB. Cloudflare ima brezplačen plan, ki zadošča.

Kateri WordPress plugin za speed? WP Rocket (plačljiv, najboljši), W3 Total Cache (brezplačen, kompleksen), LiteSpeed Cache (brezplačen, za LiteSpeed strežnike).

Kako merim CWV kontinuirano? Google Search Console pokaže field data v Core Web Vitals reportu. Dodatno: SpeedCurve, Calibre ali New Relic za napredne dashboard.

Ali e-commerce spletna stran z 10.000 produkti lahko doseže dober CWV? Da, vendar zahteva ozke optimizacije: lazy loading za product images, cached category pages, CDN, in critical CSS per template.

Kaj če imam staro WordPress temo, ki ne podpira modernih praks? Razmislite o redesign. Nekateri starejši templates so tako težko prilagodljivi, da je novemu redesign-u učinkoviteje. ROI: 6-12 mesecev.

Zaključek

Core Web Vitals niso ezoterična metrika – so direktno povezani z uporabniško izkušnjo, rangiranjem in konverzijami. Vsak procent izboljšave se sešteva.

Začnite z brezplačnim PageSpeed Test na createai.si/orodja/pagespeed. V 30 sekundah dobite akcijski seznam izboljšav za vašo stran.

Za sistematično speed optimizacijo (audit + implementacija + monitoring), stopite v stik – pomagamo slovenskim podjetjem doseči zelene Core Web Vitals.