Proč „war room“ pro Core Web Vitals
Core Web Vitals (CWV) – Largest Contentful Paint (LCP), Interaction to Next Paint (INP) a Cumulative Layout Shift (CLS) – jsou dnes operativní i strategické metriky. War room je dočasný nebo trvalý způsob řízení výkonu s vysokou frekvencí rozhodování: spojuje produkt, vývoj, infrastrukturu, obsah a SEO do jednoho rytmu. Cílem je zkrátit čas mezi detekcí degradace a zásahem, udržet metriky nad prahovými hodnotami a minimalizovat SEO/konverzní ztráty.
Architektura měření: „field“ + „lab“
- Field (RUM): reálná data uživatelů, segmentovaná podle lokality, zařízení, sítě, šablony, experimentu a landing pages. Poskytuje pravdivá data pro SEO (proxy CrUX), obchodní dopad a prioritizaci refaktorů.
- Lab (syntetika): kontrolované testy s emulací zařízení/sítí, spouštěné při CI/CD i pravidelně. Vhodné pro diagnostiku regresí a ověření hypotéz.
- CrUX: externí referenční zdroj (agregát za posledních 28 dní) pro sledování stavu vůči trhu; v war roomu slouží jako „externí ověření“ trendů.
Metriky a prahové hodnoty
| Metrika | „Good“ práh | Operativní cíl (p90) | Poznámka |
|---|---|---|---|
| LCP | ≤ 2,5 s | ≤ 2,3 s | Optimalizujte TTFB, resource hints, obrazové formáty a render path. |
| INP | ≤ 200 ms | ≤ 180 ms | Prioritizujte vstupní události, odlehčete main thread, redukujte dlouhé úlohy. |
| CLS | ≤ 0,1 | ≤ 0,08 | Rezervujte prostor médiím/reklamám, stabilizujte fonty a skeletony. |
Organizace war roomu
- Rytmus: denní 15min standup + týdenní bilanční hodina; během incidentu „swarm“ režim (ad hoc až do vyřešení).
- Role: Incident commander (koordinace), Metrics owner (RUM/CrUX), Frontend lead, Infra/edge, SEO owner, PM/UX, Ads/3rd-party.
- Komunikační kanál: dedikovaný kanál s botem pro alerty, rozhodnutí a postmortems.
Dashboard, který smysluplně vede k akci
- Stránkové řezy: šablona (home, kategorie, produkt, článek), „Hero“ landingy, programatické SEO stránky, AMP/alternativy.
- Publikum: zařízení (mobil/desktop), síť (3G/4G/5G/Wi-Fi), geografie, prohlížeč a verze.
- Technika: TTFB p75, délka main thread, počet dlouhých úloh (>50 ms), velikost JS/CSS, počet obrázků nad foldem, počet 3rd-party skriptů.
- Byznys: konverze/1000 návštěv, CTR z organiku, bounce rate, čas do interakce s klíčovým prvkem (např. „Přidat do košíku“).
SLO a error budget pro CWV
Nastavte Service Level Objective pro p75/p90 a přiřaďte error budget. Když se vyčerpá, stopka platí pro nové feature releasy a prioritou je výkon.
| SLO | Definice | Error budget | Spouštěcí pravidlo |
|---|---|---|---|
| LCP p75 ≤ 2,5 s | napříč mobilem, všechny šablony | 5 % dnů/měsíc mimo SLO | 2 dny v řadě mimo SLO → „perf freeze“ |
| INP p75 ≤ 200 ms | mobil, logged-out | 5 % | „Swarm“ + blok na nové skripty |
| CLS p75 ≤ 0,1 | všechny šablony | 3 % | Okamžité vypnutí nestabilních modulů/reklam |
Incident playbook: od detekce po vyřešení
- Detekce: alert z RUM (p90 LCP > 3 s na „/produkt/*“ mobil EU).
- Triáž: ověřit šíři dopadu (traffic-weighted), identifikovat poslední release/konfigurace (edge, CDN, A/B).
- Mitigace: feature flag off, snížit resource priority, dočasně odložit 3rd-party, fallback na menší hero obrázek.
- Diagnostika: profilování main thread, waterfall, blocking assets, typ a zdroj Largest Contentful Element.
- Fix: preload/priority hints na LCP asset, zmenšení obrázku, lazy/parsing JS, kompozice CSS.
- Verifikace: syntetika na identických URL + sledování RUM trendu po deployi.
- Postmortem: kořenová příčina, co zachytilo/nechytilo alertování, trvalá opatření.
Hypotézy a experimenty na zlepšení LCP
- Server: snížení TTFB (edge SSR/ISR, caching, stale-while-revalidate), optimalizace dotazů/plánů DB.
- Síť: preconnect ke kritickým doménám, http/2 push jako náhrada za preload, priority hints (
importance=high). - Klient: obrázky AVIF/WebP, srcset/sizes, content-visibility, kritickou cestu CSS inline, odložení nezbytného JS.
Hypotézy a experimenty na zlepšení INP
- Rozklad úloh: rozsekat dlouhé tasks (>50 ms) přes scheduler, requestIdleCallback, yielding.
- Event handling: minimalizovat práci oninput/onscroll, používat pasivní posluchače, debounce/throttle.
- Reaktivita: vyhnout se „heavy re-renderům“, memoizace, Server Components/partial hydration.
Hypotézy a experimenty na zlepšení CLS
- Rezervace prostoru:
width/heightnebo CSS aspect-ratio pro obrázky/video; ad slots se „sticky“ rezervou. - Fonty: font-display: optional/swap, metrika podobných fallback fontů, size adjust.
- Skeletony: stabilní kostry místo „pop-in“ modulů/panelů.
3rd-party a reklamy: přísná správa rizik
- Kontrolní seznam: každý skript má majitele, verzi, důvod existence, SLA dopadu na CWV a test v syntetice.
- „Consent gating“: nenačítat skripty dřív, než je udělen souhlas; defenzivní načítání (async/defer).
- Edge injection guard: zákaz dynamického vkládání skriptů mimo allowlist; porovnávání Subresource Integrity.
Programatické SEO a CWV: vzájemná vazba
Při tisících až milionech auto-generovaných landingů se i malá degradace šablony násobí. War room řídí šablonové refaktory a rollouty na procenta trafficu:
- Canary na 1–5 % URL/podmapy, měřené odděleně; pokud p90 LCP vzroste > 10 %, rollout se zastaví.
- Štítky v RUM: template_id, experiment_id, content_version pro čisté atributace.
- Obsahové garde: generátory nesmí měnit nad-the-fold (LCP) bez validace; obrázkům vkládáme intrinsic size.
Automatizace a CI/CD hooky
- Pre-merge checks: Lighthouse/PSI na reprezentativních URL, limity na JS bundle, long tasks a CLS rozdíly.
- Post-deploy syntetika: okamžité smoke tests s prahy; auto-rollback při překročení.
- RUM guard: pokud p90 LCP na mobilu vzroste o ≥ 300 ms během 60 min, feature flags se automaticky stáhnou.
Edge a CDN jako páky výkonu
- HTML caching s variacemi podle jazyka/segmentu, stale-while-revalidate pro hladké releasy.
- Obrázková služba: formát, resize, dpr, lazy policies a priority hints přímo na edge.
- Route-based splits: těžké skripty jen na cestách, kde jsou potřeba; zbytek je „čistý“.
UX rozhodnutí, která mění metriky
- Hero minimalismus: nad foldem pouze obsah LCP (text/hlavní obrázek), žádné karusely či autoplay video.
- Interakční cíle: první klikací prvek je dostupný bez blokád (cookie wall po první interakci, ne před ní).
- Progressive disclosure: skryté sekce načítat až na požádání; prefetch pro nejbližší kroky.
Analytika a SEO dopad
- Model dopadu: statistická kontrola v čase (CUSUM/Shewhart) + difference-in-differences mezi skupinami URL.
- SEO metriky: změny v impressions/CTR/pozicích na šablonách vs. CWV; pozor na zpoždění CrUX a SERP variací.
- Konverzní most: propojit CWV segmenty (good/needs-improvement/poor) s konverzemi; investice směřují do šablon s nejvyšším ROI.
Kontrolní seznam před peak trafficem
- CDN cache hit rate > 90 %, stale-if-error aktivní.
- Obrázky AVIF/WebP s definovanou intrinsic size; hero ≤ 100 kB (ideálně text + SVG).
- JS budget < 170 kB gz nad foldem; žádné blokující třetí strany.
- RUM alerty otestovány; auto-rollback scénář ověřen.
- Šablony programatického SEO ověřeny na canary; experimenty pozastaveny při špičce.
Časté anti-vzory a jak se jim vyhnout
- „Perf by PR“: optimalizace jen příležitostně; místo toho nastavte trvalá SLO a automatizované stráže.
- „Syntetika = realita“: ignorování RUM; realita je v poli, ne v laboratoři.
- „One-size-fits-all“: stejná řešení pro všechny šablony; segmentujte podle dopadu a nákladů.
- „Magické“ knihovny: bez profilování; vždy nejprve změřte, pak zaveďte.
War room pro Core Web Vitals je operační systém výkonu: spojuje měření z pole, syntetické diagnózy, stabilní SLO a rychlé zásahy. V kontextu měření, automatizace a programatického SEO jde o nejkratší cestu od problému k výsledku – vyšší CWV skóre, lepší organické signály a měřitelný nárůst konverzí.
