Core Web Vitals v roce 2025: prioritizace klíčových metrik pro výkon webu

Core Web Vitals v roce 2025: stav, prahy a co se vyplatí řešit

V roce 2025 jsou Core Web Vitals (CWV) tři metriky: LCP (Largest Contentful Paint) – vnímaná rychlost načítání, CLS (Cumulative Layout Shift) – vizuální stabilita a INP (Interaction to Next Paint) – celková odezva na interakci. Prahové hodnoty „dobrého“ stavu zůstávají:

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

Ačkoliv Google explicitně neuvádí „ranking skóre“, CWV jsou součástí signálů zkušenosti se stránkou. Prakticky: dobré CWV = vyšší použitelnost, nižší míra opuštění, lepší konverze a často i lepší viditelnost.

Co má největší dopad (80/20): prioritizační rámec

1. Hero prvek pro LCP: optimalizujte první velký vizuální prvek (často hero obrázek nebo nadpis v kombinaci s pozadím). Zajistěte rychlé načtení a časné vykreslení.
2. Stabilita rozložení (CLS): rezervujte rozměry pro obrázky, komponenty a reklamní plochy. Vylučte zpožděné vkládání prvků nad obsah.
3. Reakční doba (INP): odstraňte blokující úlohy na hlavním vlákně, minimalizujte třetí strany, rozdělte dlouhé tasky a optimalizujte event handlery.

Tyto tři body obvykle zlepší celkový dojem rychleji než „kosmetické“ úpravy.

LCP v praxi: proč se zpožďuje a jak ho urychlit

• Identifikujte LCP element: v RUM/Lighthouse/DevTools zjistěte, který element je LCP. Často je to <img> v hero sekci nebo background-image na nad-hero kontejneru.
• Prioritizujte jeho načtení:
  • Priority Hints: fetchpriority="high" na LCP obrázku.
  • Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="..." href="..."> pro hero image; pro fonty <link rel="preload" as="font" type="font/woff2" crossorigin>.
  • HTTP/2+/3 a dobrý TTFB (server, CDN, kvázi-SSR).
• Formáty a velikost: AVIF nebo WebP, správné srcset/sizes, ořezání a komprese (bez omezování kvality textů a UI).
• Hydratace a frameworky: preferujte SSR/SSG, partial/streaming hydrataci a „islands architekturu“; nenatahujte megabajty JS pro obsah nad ohybem.
• Pozadí v CSS: pokud je LCP background-image, zvažte <link rel="preload" as="image" href="..."> a zejména nezapomeňte na velikost souboru.

CLS: stabilita bez poskakování

• Rezervace místa: nastavte width/height na obrázky (nebo aspect-ratio), contain-intrinsic-size pro lazy komponenty.
• Reklamy a embed-y: vždy nechte pevné „sloty“; při neobsazení zobrazte placeholder, nikoli kolaps kontejneru.
• Fonty: použijte font-display: swap|optional, size-adjust v @font-face na minimalizaci FOUT/FOIT poskakování.
• UI interakce: nezpůsobujte layoutové změny při hoverech/rozkliknutí bez rezervace prostoru; animujte transform místo top/left/width/height.
• Zpožděné bannery: cookie lišty, newslettery a promo boxy vkládejte pod obsah nebo do overlaye bez reflow nad obsahem.

INP: od FID k plné odezvě

INP měří nejhorší (nebo blízko nejhorší) odezvu napříč interakcemi během celé návštěvy. Nejčastější příčiny horšího INP:

• Dlouhé úlohy na hlavním vlákně (>50 ms): velké bundly, masivní JSON parsování, synchronní skripty, layout thrashing.
• Třetí strany: tag manažeři, chat widgety, AB testy bez „idling“ strategie, nepřidružené event listenery.
• Náročné event handlery: těžká logika při click/input, zbytečný re-render stromu, nereaktivní tabulky a grafy.

Řešení:

• Rozdělte dlouhé úlohy (scheduler/yield), requestIdleCallback, setTimeout(0) batching; použijte Web Workers pro CPU náročné výpočty.
• Code-splitting a defer pro non-critical JS; import() on interaction pro sekundární UI.
• Optimalizace reaktivního UI: memoizace, selektivní re-rendering, virtuální scroll pro seznamy.
• Limit třetích stran: audity, zpožděné načítání, Permission/Consent mode s „off-main-thread“ variantami.

Měření: terén (RUM) vs. laboratoř

• Field: CrUX, vlastní RUM (Web Vitals JS), GA4 s eventy pro LCP/CLS/INP a percentily. Toto je referenční pro hodnocení Google.
• Lab: Lighthouse, WebPageTest, DevTools. Výborné pro diagnostiku, nikoli pro finální verdikty.
• 75. percentil: optimalizujte pro většinu reálných návštěv (síť, zařízení, lokality), ne jen pro ideální podmínky.

Obrázky a média: detaily, které rozhodují

• Hero obrázek: loading="eager" + fetchpriority="high"; u ostatních loading="lazy" s IntersectionObserver.
• Responzivita: srcset/sizes, omezte max-šířku; neposílejte 2× větší asset, než je potřeba.
• Moderní formáty: AVIF (nejlepší poměr), fallback WebP/JPEG; u ikon zvažte SVG.
• Video: poster obrázek, preload="metadata", zpožděné načítání přehrávače; pro hero videa důkladně zvažte obchodní přínos vs. LCP.

Fonty a typografie bez penalizace

• Preload kritických fontů (WOFF2), crossorigin pokud jsou na CDN.
• font-display a size-adjust pro minimalizaci seskoku textu (CLS) a FOIT.
• Subseting: poskytujte jen potřebné glyfy; zvažte unicode-range.
• System UI fallback: plynulý přechod během načítání.

Síť a server: TTFB jako základ rychlosti

• TTFB: cache na úrovni okraje (CDN), co-location s uživateli, HTTP/3/QUIC, minimalizace serverové logiky pro první odpověď.
• HTML streaming (SSR): pošlete kostru co nejdříve, doplňujte obsah postupně.
• Komprese: Brotli pro textové zdroje; ETag/Last-Modified, Cache-Control s vhodnými TTL.
• Preconnect/Preload: <link rel="preconnect" href="https://cdn.example.com" crossorigin> pro známé domény; nadměrné používání nepomáhá – měřte.

SPA a moderní frameworky: jak neztratit rychlost

• SSR/SSG jako výchozí, hydratace postupná (partial/streaming); pro neinteraktivní části preferujte čisté HTML.
• Islands: interaktivní jsou jen ostrovy; zbytek je statický.
• Routing: prefetchněte jen odkazy nad ohybem a v dohledu scrollu; speculation rules používejte šetrně.
• Formuláře a interakce: validace a formátování v Worker-u, ne na hlavním vlákně.

Reklamy, analytika a třetí strany bez dramatu

• Politika zero-trust: inventarizujte skripty; odstraňte nevyužité tagy a zbytečné vendor knihovny.
• Načasování: neblokujte first paint; spouštějte měření po „idle“ nebo po prvním interaktivním gestu, pokud to obchod umožňuje.
• Sandboxing: použijte iframe s priority=low a jasnými rozměry; žádné vkládání nad obsah.

Kontrolní seznam pro nasazení (CWV Release Checklist)

• LCP: LCP element identifikován a preloadován; hero asset <200 KB; fetchpriority="high"; TTFB < 0,8 s.
• CLS: všechny média mají rozměry/aspect-ratio; rezervované sloty pro reklamy a embed-y; fonty s size-adjust.
• INP: bez úloh > 50 ms; code-splitting; 3P skripty po onload/idle; event handlery lehké a měřené v DevTools Performance.
• Měření: RUM implementován, eventy Web Vitals odesílány s percentily; segmenty podle země/zařízení/sítě.
• Regrese: CI s Lighthouse a WebPageTest; prahové brány na PR (např. LCP +10% = blokace).

Nejčastější omyly a slepé uličky

• Nadměrná lazy-load mánie: hero obrázek nikdy nenačítejte „lazy“.
• Preload všeho: pokud preloadujete příliš mnoho, zablokujete prioritní kanál a LCP se zhorší.
• Animace layoutu: mění rozložení a způsobují CLS; používejte transform/opacity.
• „Magické“ polyfily: slepě vkládat polyfily pro všechny = vyšší JS budget; cílené podávání podle UA/feature-detect.
• Ignorování pomalých sítí: optimalizujte pro 3G/4G a levná zařízení; to je reálný 75. percentil.

Roadmapa zlepšení CWV na 6 týdnů

1. Týden 1: Field baseline (CrUX + RUM), identifikace LCP elementu a dlouhých tasků; audit třetích stran.
2. Týden 2: Optimalizace hero (formát, preload, priority hints), TTFB (cache/CDN), odstranění „render-blocking“.
3. Týden 3: CLS – rezervace rozměrů, fontová pipeline, stabilizace reklam/embeds.
4. Týden 4: INP – code-splitting, workers, debounce/throttle, optimalizace eventů; limit třetích stran.
5. Týden 5: SPA/SSR úpravy, streaming/partial hydratace, šetrné prefetchování.
6. Týden 6: RUM validace, A/B test micro-zlepšení (kalkulace velikostí, obrázky), hardening CI/CD bran.

Měření dopadu na business

• Konverze: porovnejte před/po změnách na stejných zdrojích návštěvnosti.
• Míra opuštění a čas do interakce v RUM podle zařízení.
• Výnosy na session (RPS) a partner/ads viewability u publisherů.

Pragmatický přístup vyhrává

V roce 2025 je recept jednoduchý: LCP hero jako priorita, stabilní layout bez překvapení a interakce do 200 ms. Podpořte to racionální infrastrukturou (CDN, SSR/SSG, streaming), umírněným JS, čistým managementem třetích stran a nepřetržitým field měřením. Investice do těchto oblastí se vrací rychleji než do „exotických“ optimalizací a přináší citelný dopad na UX i výnosy.