Rýchlosť webu a Core Web Vitals: Čo to je a ako to zlepšiť

Core Web Vitals: Prečo na nich záleží

Core Web Vitals sú súbor metrík, ktoré Google používa na meranie používateľského zážitku na vašom webe. Od roku 2021 sú oficiálnym rankingovým faktorom a ich význam neustále rastie.

Ak ešte nepoznáte základy, prečítajte si náš základný článok o rýchlosti stránky. Tento článok ide do hĺbky.

Tri piliere Core Web Vitals

1. LCP (Largest Contentful Paint)

Čo meria: Čas, kým sa načíta najväčší viditeľný prvok na stránke (obrázok, video, textový blok).

Cieľové hodnoty:

• 🟢 Dobré: ≤ 2.5s
• 🟡 Potrebuje zlepšenie: 2.5s – 4s
• 🔴 Zlé: > 4s

Čo najčastejšie spôsobuje zlé LCP:

1. Pomalá odpoveď servera (TTFB > 600ms)
2. Render-blocking JavaScript a CSS
3. Pomalé načítanie resources (fonty, obrázky)
4. Client-side rendering

Ako zlepšiť LCP:

• Preloadujte kritické resources (obrázky, fonty)
• Vložte kritické CSS inline
• Odložte nekritický JavaScript pomocou defer
• Optimalizujte server response time

2. INP (Interaction to Next Paint)

Čo meria: Odozva stránky na používateľské interakcie (kliky, tapy, stlačenia klávesnice).

Poznámka: INP nahradil FID (First Input Delay) v marci 2024. Na rozdiel od FID meria VŠETKY interakcie počas celej session.

Cieľové hodnoty:

• 🟢 Dobré: ≤ 200ms
• 🟡 Potrebuje zlepšenie: 200ms – 500ms
• 🔴 Zlé: > 500ms

Čo spôsobuje zlé INP:

1. Long tasks blokujúce main thread
2. Veľký JavaScript bundle
3. Excessive DOM size
4. Third-party skripty

Ako zlepšiť INP:

• Rozdeľte long tasks na menšie chunky
• Používajte Web Workers pre ťažké výpočty
• Minimalizujte veľkosť JavaScript bundles
• Lazy loadujte nekritický kód

3. CLS (Cumulative Layout Shift)

Čo meria: Vizuálna stabilita – ako veľmi sa prvky "hýbu" počas načítania.

Cieľové hodnoty:

• 🟢 Dobré: ≤ 0.1
• 🟡 Potrebuje zlepšenie: 0.1 – 0.25
• 🔴 Zlé: > 0.25

Čo spôsobuje zlé CLS:

1. Obrázky bez definovaných rozmerov
2. Dynamicky vkladané reklamy
3. Web fonty spôsobujúce FOIT/FOUT
4. Dynamický obsah vkladaný nad existujúci

Ako zlepšiť CLS:

• Vždy definujte rozmery obrázkov (width a height atribúty)
• Používajte aspect-ratio v CSS
• Nastavte font-display: swap pre fonty
• Rezervujte priestor pre dynamický obsah

Meranie Core Web Vitals

Lab data vs Field data

Dôležité: Google používa field data pre ranking. Lab data slúži len na debugovanie.

Nástroje na meranie:

1. PageSpeed Insights – kombinácia lab + field data
2. Google Search Console – Core Web Vitals report
3. Chrome DevTools – Performance panel
4. Web Vitals JS library – real-time monitoring
5. CrUX Dashboard – historické dáta

Pokročilé optimalizačné techniky

1. Critical CSS extraction

Extrahujte CSS potrebné pre above-the-fold obsah a vložte ho inline do HTML. Tým eliminujete render-blocking CSS.

2. Image optimization pipeline

• Používajte moderné formáty (WebP, AVIF)
• Implementujte responsive images s srcset
• Nastavte lazy loading pre obrázky pod fold
• Vždy špecifikujte width a height

3. Resource hints

• dns-prefetch – pre third-party domény
• preconnect – pre kritické zdroje
• prefetch – pre likely next navigation
• preload – pre kritické above-the-fold resources

4. JavaScript optimization

• Code splitting s dynamic imports
• Tree shaking – importujte len čo potrebujete
• Lazy loading komponentov
• Minimalizácia bundle size

CDN a caching stratégie

Cache-Control headers:

• Statické assety – dlhý cache (1 rok) + hashed filenames
• HTML – krátky cache alebo revalidate
• API responses – podľa potreby (private, max-age)

Service Worker

Implementujte stale-while-revalidate stratégiu pre offline-first zážitok a rýchlejšie načítanie.

Prípadová štúdia: Z "Poor" na "Good"

Východzí stav:

• LCP: 4.8s 🔴
• INP: 380ms 🔴
• CLS: 0.32 🔴

Implementované zmeny:

1. Server optimalizácia – HTTP/2, Redis cache, CDN
2. Frontend optimalizácia – Critical CSS, WebP, lazy loading
3. Third-party audit – odstránenie nepoužívaných skriptov

Výsledok po 2 mesiacoch:

• LCP: 1.8s 🟢
• INP: 120ms 🟢
• CLS: 0.05 🟢
• Organická návštevnosť: +34%

Záver

Core Web Vitals nie sú len technická metrika – priamo ovplyvňujú vaše pozície a konverzie. Investujte čas do ich optimalizácie a sledujte výsledky v Google Search Console.

Viac pokročilých tém nájdete v hlavnom článku Technické SEO pre pokročilých.

📚 Tento článok je súčasťou série Technické SEO pre pokročilých