Core Web Vitals 2025

Core Web Vitals v roku 2025: stav, prahy a čo sa oplatí riešiť

V roku 2025 sú Core Web Vitals (CWV) tri metriky: LCP (Largest Contentful Paint) – vnímaná rýchlosť načítania, CLS (Cumulative Layout Shift) – vizuálna stabilita a INP (Interaction to Next Paint) – celková odozva na interakciu. Prahové hodnoty „dobrého“ stavu ostávajú:

• LCP ≤ 2,5 s (75. percentil v teréne)
• CLS ≤ 0,10
• INP ≤ 200 ms

Hoci Google explicitne neudáva „ranking skóre“, CWV sú súčasťou signálov skúsenosti so stránkou. Prakticky: dobré CWV = vyššia použiteľnosť, nižšia miera odchodov, lepšie konverzie a často aj lepšia viditeľnosť.

Čo má najväčší dopad (80/20): prioritizačný rámec

1. Hero prvok pre LCP: optimalizujte prvý veľký vizuálny element (často hero obrázok alebo nadpis v kombinácii s pozadím). Zabezpečte rýchle načítanie a skoré vykreslenie.
2. Stabilita rozloženia (CLS): rezervujte rozmery pre obrázky, komponenty a reklamné plochy. Vylúčte oneskorené injektovanie prvkov nad obsahom.
3. Reakčná doba (INP): odstráňte blokujúce úlohy na hlavnom vlákne, minimalizujte tretie strany, rozsekajte dlhé tasky a optimalizujte event handlery.

Tieto tri body typicky zlepšia celkový dojem rýchlejšie než „kozmetické“ úpravy.

LCP v praxi: prečo sa oneskoruje a ako ho zrýchliť

• Identifikujte LCP element: v RUM/Lighthouse/DevTools zistite, ktorý element je LCP. Často je to <img> v hero sekcii alebo background-image na nad-hero kontajneri.
• Prioritizujte jeho načítanie:
  • Priority Hints: fetchpriority="high" na LCP obrázku.
  • Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="..." href="..."> pre hero image; pre fonty <link rel="preload" as="font" type="font/woff2" crossorigin>.
  • HTTP/2+/3 a dobrá TTFB (server, CDN, kvázi-SSR).
• Formáty a veľkosť: AVIF alebo WebP, správne srcset/sizes, orezanie a kompresia (bez priškrcenia kvality textov a UI).
• Hydratácia a frameworky: preferujte SSR/SSG, partial/streaming hydratáciu a „islands architektúru“; nenaťahujte megabajt JS pre obsah nad ohybom.
• Pozadia v CSS: ak je LCP background-image, zvážte <link rel="preload" as="image" href="..."> a najmä nezabudnite na veľkosť súboru.

CLS: stabilita bez poskakovania

• Rezervácia miesta: nastavte width/height na obrázky (alebo aspect-ratio), contain-intrinsic-size pre lazy komponenty.
• Reklamy a embed-y: vždy nechajte fixné „sloty“; pri neobsadení zobrazte placeholder, nie kolaps kontajnera.
• Fonty: použite font-display: swap|optional, size-adjust v @font-face na minimalizáciu FOUT/FOIT zoskoku.
• UI interakcie: nespôsobujte layoutové zmeny pri hoveroch/rozklikoch bez rezervácie priestoru; animujte transform namiesto top/left/width/height.
• Oneskorené bannery: cookie lišty, newslettery a promo boxy vkladajte pod obsah alebo do overlaye bez reflow nad obsahom.

INP: od FID k plnej odozve

INP meria najhoršiu (alebo blízko najhoršiu) odozvu naprieč interakciami počas celej návštevy. Najčastejšie príčiny zlého INP:

• Dlhé úlohy na hlavnom vlákne (>50 ms): veľké bundly, masívne JSON parsingy, synchronné skripty, layout thrashing.
• Tretie strany: tag manažéry, chat widgety, AB testy bez „idling“ stratégie, neviazané event listenery.
• Náročné event handlery: ťažká logika pri click/input, zbytočný re-render stromu, nereaktívne tabuľky a grafy.

Riešenia:

• Break up long tasks (scheduler/yield), requestIdleCallback, setTimeout(0) batching; použite Web Workers na CPU náročné výpočty.
• Code-splitting a defer pre non-critical JS; import() on interaction pre sekundárne UI.
• Optimalizácia reaktívnych UI: memoizácia, selektívne re-renderovanie, virtuálny scroll pre zoznamy.
• Limit tretích strán: audity, oneskorené načítanie, Permission/Consent mode s „off-main-thread“ variantmi.

Meranie: terén (RUM) vs. laboratórium

• Field: CrUX, vlastný RUM (Web Vitals JS), GA4 s eventami pre LCP/CLS/INP a percentily. Toto je referenčné pre hodnotenie Google.
• Lab: Lighthouse, WebPageTest, DevTools. Skvelé na diagnostiku, nie na finálne verdikty.
• 75. percentil: optimalizujte pre väčšinu reálnych návštev (sieť, zariadenia, lokality), nie len pre ideálne podmienky.

Obrázky a médiá: detaily, ktoré rozhodujú

• Hero obrázok: loading="eager" + fetchpriority="high"; pre ostatné loading="lazy" s IntersectionObserver.
• Responsivita: srcset/sizes, obmedzte max-šírku; nepodávajte 2× väčší asset než treba.
• Moderné formáty: AVIF (najlepší pomer), fallback WebP/JPEG; pri ikonách zvážte SVG.
• Video: poster obrázok, preload="metadata", oneskorené načítanie prehrávača; pre hero videá dôsledne zvážte obchodný prínos vs. LCP.

Fonty a typografia bez penalizácie

• Preload kritických fontov (WOFF2), crossorigin ak sú na CDN.
• font-display a size-adjust na minimalizáciu zoskoku textu (CLS) a FOIT.
• Subseting: podávajte len potrebné glyfy; zvážte unicode-range.
• System UI fallback: hladký prechod počas načítania.

Sieť a server: TTFB ako základ rýchlosti

• TTFB: cache na úrovni okraja (CDN), co-location s používateľmi, HTTP/3/QUIC, minimalizácia serverovej logiky pre prvú odpoveď.
• HTML streaming (SSR): posielajte kostru čo najskôr, doplňte obsah postupne.
• Komprimácia: Brotli pre textové zdroje; ETag/Last-Modified, Cache-Control s vhodnými TTL.
• Preconnect/Preload: <link rel="preconnect" href="https://cdn.example.com" crossorigin> pre známe domény; nadužívanie nepomáha – merajte.

SPA a moderné frameworky: ako nestratiť rýchlosť

• SSR/SSG ako default, hydratácia postupne (partial/streaming); pre neinteraktívne časti preferujte čisté HTML.
• Islands: interaktívne sú len ostrovy; zvyšok je statický.
• Routing: prefetchnite len linky nad ohybom a v dohľade scrollu; speculation rules používajte šetrne.
• Formuláre a interakcie: validácie a formátovanie v Worker-i, nie na hlavnom vlákne.

Reklamy, analytika a tretie strany bez drámy

• Politika zero-trust: inventarizujte skripty; odstráňte nevyužité tagy a zbytočné vendor knižnice.
• Načasovanie: neblokujte first paint; spúšťajte merania po „idle“ alebo po prvom interaktívnom geste, ak to obchod umožňuje.
• Sandboxing: použite iframe s priority=low a jasnými rozmermi; žiadne vkladanie nad obsah.

Kontrolný zoznam pre nasadenie (CWV Release Checklist)

• LCP: LCP element identifikovaný a preloadovaný; hero asset <200 KB; fetchpriority="high"; TTFB < 0,8 s.
• CLS: všetky médiá majú rozmery/aspect-ratio; rezervované sloty pre reklamy a embed-y; fonty s size-adjust.
• INP: bez úloh > 50 ms; code-splitting; 3P skripty po onload/idle; event handlery ľahké a merané v DevTools Performance.
• Meranie: RUM implementovaný, eventy Web Vitals odosielané s percentilmi; segmenty podľa krajiny/zariadenia siete.
• Regresie: CI s Lighthouse a WebPageTest; prahové brány na PR (napr. LCP +10% = blokácia).

Najčastejšie omyly a slepé uličky

• Nadmerná lazy-load mánia: hero obrázok nikdy nenačítajte „lazy“.
• Preload všetkého: ak preloadujete príliš veľa, zablokujete prioritný kanál a LCP sa zhorší.
• Animácie layoutu: menia rozloženie a spôsobujú CLS; používajte transform/opacity.
• „Magické“ polyfily: slepo vkladať polyfily pre všetkých = vyšší JS budget; cielené podávanie podľa UA/feature-detect.
• Ignorovanie pomalých sietí: optimalizujte pre 3G/4G a lacné zariadenia; to je reálny 75. percentil.

Roadmapa zlepšenia CWV na 6 týždňov

1. Týždeň 1: Field baseline (CrUX + RUM), identifikácia LCP elementu a dlhých taskov; audit tretích strán.
2. Týždeň 2: Optimalizácia hero (formát, preload, priority hints), TTFB (cache/CDN), odstránenie „render-blocking“.
3. Týždeň 3: CLS – rezervácie rozmerov, font pipeline, stabilizácia reklám/embeds.
4. Týždeň 4: INP – code-splitting, workers, debounce/throttle, optimalizácia eventov; limit tretích strán.
5. Týždeň 5: SPA/SSR úpravy, streaming/partial hydratácia, šetrené prefetchovanie.
6. Týždeň 6: RUM validácia, A/B test micro-zlepšení (kalkulácia veľkostí, obrázky), hardening CI/CD brán.

Meranie dopadu na biznis

• Konverzie: porovnajte pre/post zmeny na rovnakých zdrojoch návštevnosti.
• Miera odchodov a čas do interakcie v RUM podľa zariadení.
• Výnosy na session (RPS) a partner/ads viewability pri publisheroch.

Pragmatický prístup vyhráva

V roku 2025 je recept jednoduchý: LCP hero ako priorita, stabilný layout bez prekvapení a interakcie do 200 ms. Podporte to racionálnou infraštruktúrou (CDN, SSR/SSG, streaming), umierneným JS, čistým manažmentom tretích strán a neustálym field meraním. Investícia do týchto oblastí sa vracia rýchlejšie než do „exotických“ optimalizácií a prináša citeľný dopad na UX aj výnosy.