Core Web Vitals 2.0 v roce 2025: INP ≤ 200 ms a CLS 2.0 bez poskakování

Google posunul laťku. Od března 2025 se Interaction to Next Paint (INP) stal plnohodnotným vitalem a nová verze CLS 2.0 trestá i mikro‑odskočení layoutu. Jestli chcete v organiku růst a v SGE boxu zůstat, musíte mít INP ≤ 200 ms, LCP ≤ 2,0 s a CLS ≤ 0,05. V tomto super‑detailním návodu rozpitváme, co se změnilo, jak měřit, jak opravit a jak si pohlídat výsledky 24×7.

1 · Co se změnilo v Core Web Vitals 2.0

INP → stabilní signál (nahradil FID úplně). Prah dobrý ≤ 200 ms, potřebuje 75. percentil RUM dat.
CLS 2.0 ignoruje animované transformace, ale přidává penalizaci za overflow: clip hacky.
LCP zůstává, ale Google varuje: v Q2 2026 přijde „BPP – Bytes to Paint Pixel“.
Nový Performance API v9 vrací performance.interactionCount a přesné renderTime.
Lighthouse 10 skóruje metriky 40 % přísněji, hlavně INP.

2 · INP – Interaction to Next Paint do 200 ms

2.1 Co to měří?

Nejhorší (95. percentil) interakci uživatele: od počátku vstupu (tap, klik, klávesa) po další vykreslení. Ovlivňuje ho long tasks, reflow, heavy JS.

2.2 Jak měřit?

import {onINP} from 'web-vitals/attribution';
onINP(({value,entries}) => {
  console.log('INP', value, entries[0].attribution);
});

Do Analytics 4 pošlete gtag('event','core_web_vitals',{inpt_ms:value}).

2.3 Nejčastější viníci

jQuery validation staré 2016 (200 KB minifikované)
Heavy react table render (1000+ row)
LCP obrázek lazy‑loaded bez fetchpriority="high"
Third‑party chat widget inline (setInterval 5 ms)

2.4 Oprava v praxi

Vyhledej longtask > 50 ms v Performance panelu Chrome DevTools.
Rozděl JS bundle, import() komponenty.
Přidej loading="lazy" a decoding="async" pro obrázky mimo viewport.
Na serveru zapni Early‑Hints 103 pro fonty a hero image.

3 · CLS 2.0: Nové metriky poskakování

3.1 Co CLS 2.0 trestá?

Dynamický vložený banner bez rezervovaného místa.
Lazy‑loaded iframe (cookie‑consent video).
CSS content-visibility:auto zneužitý bez contain-intrinsic-size.

3.2 Jak snížit CLS

img { aspect-ratio: 16/9; } /* rezervace */
.ad-slot { min-height: 250px; } 
@supports (-webkit-touch-callout: none) { /* iOS fix CLS bug */ }

3.3 Kontrola

Lighthouse 10 “Avoid layout shifts” + Chrome devtools tab Layout Shifts (2025).

4 · Edge Caching, Priority Hints a Early Hint 103

4.1 Priority Hints

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

4.2 Early Hint 103

Nginx 1.25: add_header 103 Early‑Hints. Response v 1 RTT dřív → LCP klesne ~120 ms.

4.3 Edge Caching (Cloudflare, Akamai)

Bypass cookie‑bloat: anonymní HTML + Edge kvy.
ServeStaleWhileRevalidate 60 s.

5 · Audit nástroji Lighthouse 10 a WebPageTest 2025

5.1 Lighthouse 10 CLI

npm i -g @lhci/cli
lhci collect --url=https://example.cz --settings.throttlingMethod=simulate

5.2 WebPageTest 2025 API

curl -X POST "https://www.webpagetest.org/runtest.php?url=https://example.cz&f=json&lighthouse=1&fvonly=1"

5.3 DebugBear RUM

Inserta skript, získáš skutečná RUM data pro 75. percentil, ne syntetiku.

6 · Praktické opravy krok‑za‑krokem

6.1 Frontend JS

Chunk React 18 route‑level (React.lazy)
Prefetch next route via <link rel="prefetch">
Remove legacy polyfills (IE11 mrtvý 2025)

6.2 CSS & Fonts

Self‑host WOFF2 only, font-display: swap;
Use size-adjust property (Firefox 120+, Chrome 118) pro FOIT fix

6.3 Server

Enable HTTP/3 (QUIC) – 30 % rychlejší handshake
Compress application/wasm Brotli 11
Origin x‑log Server‑Timing: cf, cdn‑cache-miss

7 · CI/CD pipeline: automatický test před deployem

# GitHub Actions
name: CWV test
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install LHCI
        run: npm i -g @lhci/cli
      - name: Audit preview
        run: |
          lhci collect --url=https://preview.example.cz --settings.throttlingMethod=simulate
          lhci upload --serverBaseUrl https://lhci.example.cz --token ${{ secrets.LHCI_TOKEN }}

Gate pipeline: blokuje merge, pokud INP > 200 ms nebo CLS > 0,1.

8 · Check‑list na Go‑Live

INP ≤ 200 ms (75. percentil RUM) v GA4.
CLS ≤ 0,05 po 3 navigacích.
LCP ≤ 2 s na 3G fast + desktop.
Priority Hints pro hero image a fonts.
Early Hint 103 aktivní (curl –I).
Edge cache HIT ratio ≥ 85 %.
Lighthouse skóre ≥ 90 (Performance).
Alerting v Grafana on INP spike > 250 ms.

9 · FAQ

Počítá se INP z iframes?: Ano, od Chrome 120 se interakce uvnitř iframe přenáší do parent page.
Je CLS 2.0 retroaktivní?: Ne, Chrome 117+ sbírá obě metriky; Search použije nové číslo od března 2025.
Měří Googlebot INP?: Ne, jen RUM. Syntetický crawler nemá user‑input.

10 · Závěr

Core Web Vitals 2.0 už nejsou buzzword. INP ≤ 200 ms a CLS 2.0 budou propisovat pozice, SGE karty i platbu za Ads (QS). V tomto článku jste dostali vše: co je nové, jak měřit, jak opravit a jak hlídat. Implementujte checklist, zapněte alerty a uvidíte, jak graf návštěv i konverzí půjde nahoru ještě před létem 2025.

Klíčová slova

core web vitals 2025, INP 200ms, CLS 2.0, priority hints, early hint 103, edge caching, lighthouse 10, webpagetest 2025, seo performance, interaction to next paint, LCP 2s, crawl budget

↥ Zpět nahoru

Core Web Vitals 2.0 v roce 2025: INP ≤ 200 ms a CLS 2.0 bez poskakování

1 · Co se změnilo v Core Web Vitals 2.0

2 · INP – Interaction to Next Paint do 200 ms