Core Web Vitals v roce 2025: stanovení priorit klíčových ukazatelů výkonu

Technické SEO a strukturovaná data
Eva Senková
Core Web Vitals v roku 2025: Prioritizácia kľúčových ukazovateľov pre výkon

Core Web Vitals v roce 2025: stav, prahové hodnoty a čemu se vyplatí věnovat

V roce 2025 tvoří 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 reálném prostředí)
  • CLS ≤ 0,10
  • INP ≤ 200 ms

Ačkoli Google výslovně neuvádí „skóre hodnocení“, CWV jsou součástí signálů uživatelského dojmu ze stránky. V praxi platí: dobré CWV = lepší použitelnost, nižší míra odchodů, vyšší konverze a často i lepší viditelnost.

Co má největší dopad (80/20): rámec pro stanovení priorit

  1. Prvek hero pro LCP: optimalizujte první velký vizuální prvek (často obrázek hero nebo nadpis v kombinaci s pozadím). Zajistěte rychlé načítání a včasné vykreslení.
  2. Stabilita rozložení (CLS): rezervujte prostor pro obrázky, komponenty a reklamní plochy. Vylučte pozdní vkládání prvků nad obsahem.
  3. Doba odezvy (INP): odstraňte blokující úlohy na hlavním vlákně, omezte skripty třetích stran, rozdělte dlouhé úlohy a optimalizujte obslužné rutiny událostí.

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

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

  • Určete prvek LCP: v RUM/Lighthouse/DevTools zjistěte, který prvek je LCP. Často jde o <img> v sekci hero nebo o background-image v kontejneru nad sekcí hero.
  • Upřednostněte jeho načítání:
    • Priority Hints: fetchpriority="high" u obrázku LCP.
    • Preload: <link rel="preload" as="image" imagesrcset="..." imagesizes="..." href="..."> pro obrázek hero; pro fonty <link rel="preload" as="font" type="font/woff2" crossorigin>.
    • HTTP/2+/3 a dobré TTFB (server, CDN, téměř SSR).
  • Formáty a velikost: AVIF nebo WebP, správné hodnoty srcset/sizes, oříznutí a komprese (bez zhoršení kvality textu a UI).
  • Hydratace a frameworky: upřednostňujte SSR/SSG, částečnou/streamovanou hydrataci a „ostrovní architekturu“; nenačítejte megabajty JavaScriptu pro obsah nad přehybem stránky.
  • Pozadí v CSS: pokud je LCP tvořen obrázkem na pozadí, zvažte <link rel="preload" as="image" href="..."> a především nezapomeňte na velikost souboru.

CLS: stabilita bez poskakování

  • Rezervace prostoru: nastavte width/height u obrázků (nebo aspect-ratio), případně contain-intrinsic-size pro komponenty načítané líně.
  • Reklamy a vložený obsah: vždy ponechte pevné „sloty“; pokud se nezaplní, zobrazte zástupný prvek, nekolabujte kontejner.
  • Fonty: použijte font-display: swap|optional a size-adjust v @font-face, abyste minimalizovali posun způsobený FOUT/FOIT.
  • Interakce UI: nevyvolávejte změny rozvržení při přejetí kurzorem nebo rozbalování 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 překryvné vrstvy, která nezpůsobí přeformátování obsahu.

INP: od FID k plné odezvě

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

  • Dlouhé úlohy na hlavním vlákně (>50 ms): velké balíčky, rozsáhlé parsování JSON, synchronní skripty, opakované přepočítávání rozvržení.
  • Skripty třetích stran: správci značek, chatovací widgety, A/B testy bez strategie „idle“, neomezené posluchače událostí.
  • Náročné obslužné rutiny událostí: složitá logika při click/input, zbytečné opětovné vykreslování stromu, nereaktivní tabulky a grafy.

Řešení:

  • Rozdělte dlouhé úlohy (scheduler/yield), využijte requestIdleCallback a dávkování pomocí setTimeout(0); výpočty náročné na CPU provádějte pomocí Web Workers.
  • Rozdělení kódu a defer pro nekritický JavaScript; použijte import() on interaction pro sekundární prvky UI.
  • Optimalizace reaktivního UI: memoizace, selektivní opětovné vykreslování, virtuální posouvání seznamů.
  • Omezte skripty třetích stran: audity, opožděné načítání, režim Permission/Consent s variantami „off-main-thread“.

Měření: reálné prostředí (RUM) vs. laboratoř

  • Terénní data: CrUX, vlastní RUM (Web Vitals JS), GA4 s událostmi pro LCP/CLS/INP a percentily. To je referenční základ pro hodnocení Googlem.
  • Laboratorní testy: Lighthouse, WebPageTest, DevTools. Skvělé pro diagnostiku, nikoli pro konečné závěry.
  • 75. percentil: optimalizujte pro většinu skutečných návštěv (sítě, zařízení, lokality), nikoli pouze pro ideální podmínky.

Obrázky a média: detaily, na kterých záleží

  • Obrázek hero: loading="eager" + fetchpriority="high"; u ostatních loading="lazy" s IntersectionObserver.
  • Responzivita: srcset/sizes, omezte maximální šířku; nenačítejte 2× větší soubor, než je potřeba.
  • Moderní formáty: AVIF (nejlepší poměr), náhradní formát WebP/JPEG; u ikon zvažte SVG.
  • Video: obrázek poster, preload="metadata", odložené načtení přehrávače; u videí hero důsledně zvažte obchodní přínos oproti LCP.

Fonty a typografie bez penalizace

  • Přednačtěte kritické fonty (WOFF2), pokud jsou na CDN, použijte crossorigin.
  • font-display a size-adjust pro minimalizaci posunu textu (CLS) a FOIT.
  • Subsetting: načítejte pouze potřebné glyfy; zvažte unicode-range.
  • Náhradní systémové fonty UI: zajistí plynulý přechod během načítání.

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

  • TTFB: ukládání do mezipaměti na okrajových uzlech (CDN), umístění serverů v blízkosti uživatelů, HTTP/3/QUIC, omezení serverové logiky nutné pro první odpověď.
  • Streamování HTML (SSR): odešlete základní strukturu co nejdříve a obsah doplňujte postupně.
  • Komprese: Brotli pro textové zdroje; ETag/Last-Modified, Cache-Control s vhodnými hodnotami 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í nastavení, postupná hydratace (částečná/streamovaná); pro neinteraktivní části upřednostňujte čisté HTML.
  • Ostrovy: interaktivní jsou pouze ostrovy, zbytek je statický.
  • Směrování: přednačítejte pouze odkazy nad přehybem stránky a v dosahu posouvání; pravidla speculation rules používejte střídmě.
  • Formuláře a interakce: validaci a formátování provádějte ve Workeru, nikoli na hlavním vlákně.

Reklamy, analytika a skripty třetích stran bez dramat

  • Politika zero-trust: zmapujte skripty; odstraňte nepoužívané značky a zbytečné knihovny dodavatelů.
  • Načasování: neblokujte first paint; měření spouštějte po přechodu do stavu „idle“ nebo po prvním interaktivním gestu, pokud to obchodní podmínky umožňují.
  • Sandboxing: použijte iframe s priority=low a jasně stanovenými rozměry; nevkládejte nic nad obsah.

Kontrolní seznam pro nasazení (CWV Release Checklist)

  • LCP: prvek LCP identifikován a přednačten; soubor hero <200 KB; fetchpriority="high"; TTFB < 0,8 s.
  • CLS: všechna média mají rozměry/aspect-ratio; rezervované sloty pro reklamy a vložený obsah; fonty s size-adjust.
  • INP: žádné úlohy > 50 ms; rozdělení kódu; skripty třetích stran po události onload nebo ve stavu idle; obslužné rutiny událostí jsou nenáročné a měřené v DevTools Performance.
  • Měření: RUM implementováno, události Web Vitals odesílány včetně percentilů; segmentace podle země, zařízení a sítě.
  • Regrese: CI s Lighthouse a WebPageTest; prahové podmínky pro PR (např. nárůst LCP o 10 % = blokování).

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

  • Přehnaná posedlost líným načítáním: obrázek hero nikdy nenačítejte „lazy“.
  • Přednačítání všeho: pokud přednačítáte příliš mnoho, zablokujete prioritní kanál a LCP se zhorší.
  • Animace rozvržení: mění rozložení a způsobují CLS; používejte transform/opacity.
  • „Magické“ polyfilly: slepé přidávání polyfillů pro všechny zvyšuje rozpočet JavaScriptu; doručujte je cíleně podle UA/detekce funkcí.
  • Ignorování pomalých sítí: optimalizujte pro 3G/4G a levná zařízení; to odpovídá reálnému 75. percentilu.

Plán zlepšení CWV na 6 týdnů

  1. 1. týden: výchozí stav z terénních dat (CrUX + RUM), identifikace prvku LCP a dlouhých úloh; audit skriptů třetích stran.
  2. 2. týden: optimalizace hero (formát, preload, priority hints), TTFB (cache/CDN), odstranění blokování vykreslování.
  3. 3. týden: CLS – rezervace rozměrů, proces načítání fontů, stabilizace reklam a vloženého obsahu.
  4. 4. týden: INP – rozdělení kódu, workery, debounce/throttle, optimalizace událostí; omezení skriptů třetích stran.
  5. 5. týden: úpravy SPA/SSR, streamování/částečná hydratace, střídmé přednačítání.
  6. 6. týden: ověření RUM, A/B testování drobných zlepšení (výpočet rozměrů, obrázky), zpřísnění bran CI/CD.

Měření dopadu na podnikání

  • Konverze: porovnejte období před změnou a po ní při stejných zdrojích návštěvnosti.
  • Míra odchodů a doba do interakce v RUM podle zařízení.
  • Výnosy na relaci (RPS) a viditelnost reklam a partnerského obsahu u vydavatelů.

Pragmatický přístup vítězí

V roce 2025 je recept jednoduchý: prioritou je LCP prvku hero, stabilní rozvržení bez překvapení a interakce do 200 ms. Podpořte to racionální infrastrukturou (CDN, SSR/SSG, streamování), umírněným množstvím JavaScriptu, důslednou správou skriptů třetích stran a průběžným měřením v reálném prostředí. Investice do těchto oblastí se vrací rychleji než investice do „exotických“ optimalizací a přináší znatelný dopad na UX i výnosy.