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 operační 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 jednotného rytmu. Cílem je zkrátit čas mezi detekcí degradace a zásahy, udržet metriky nad stanovenými prahy a minimalizovat SEO a 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 vstupních stránek. Poskytuje pravdivá data pro SEO (proxy CrUX), obchodní dopad a prioritizaci refaktorů.
- Lab (syntetika): kontrolované testy s emulací zařízení a 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 | Operační 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 | Upřednostněte vstupní události, odlehčete main thread, redukujte dlouhé úlohy. |
| CLS | ≤ 0,1 | ≤ 0,08 | Rezervujte místo pro média/reklamy, stabilizujte fonty a skeletony. |
Organizace war roomu
- Rytmus: denní 15minutový 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“ vstupní stránky, programaticky generované SEO stránky, AMP/alternativy.
- Publikum: zařízení (mobil/desktop), síť (3G/4G/5G/Wi-Fi), geografická oblast, 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ů.
- Business: konverze/1000 návštěv, CTR z organického vyhledávání, 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. Pokud se limit vyčerpá, nové feature releasy se pozastaví a prioritu má 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 po sobě mimo SLO → „perf freeze“ |
| INP p75 ≤ 200 ms | mobil, uživatel bez přihlášení | 5 % | „Swarm“ + blokace nových skriptů |
| 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 rozsah dopadu (traffic-weighted), identifikovat poslední releasy/konfigurace (edge, CDN, A/B testy).
- Mitigace: feature flag off, snížit resource priority, dočasně odložit 3rd-party skripty, fallback na menší hero obrázek.
- Diagnostika: profilování main thread, waterfall, blokující zdroje, typ a zdroj Largest Contentful Element.
- Fix: preload/priority hints pro LCP asset, zmenšení obrázku, lazy/parsing JS, kompozice CSS.
- Verifikace: syntetické testy na identických URL + sledování RUM trendu po nasazení.
- Postmortem: analýza příčiny, co alertování zachytilo či nezachytilo, 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, critical CSS inline, odložení nezbytného JS.
Hypotézy a experimenty na zlepšení INP
- Rozložení úloh: rozčlenit dlouhé tasks (>50 ms) přes scheduler, requestIdleCallback, yielding.
- Event handling: minimalizovat práci v 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 s „sticky“ rezervou. - Fonty: font-display: optional/swap, metrika podobných fallback fontů, size adjust.
- Skeletony: stabilní kostry namí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říve, než je udělen souhlas; defenzivní načítání (async/defer).
- Edge injection guard: zákaz dynamického vkládání skriptů mimo allowlist; kontrola integrity přes Subresource Integrity.
Programmatic SEO a CWV: vzájemné propojení
U tisíců až milionů automaticky generovaných vstupních stránek se i malá degradace šablony násobí. War room řídí šablonové refaktory a rollouty na procenta trafficu:
- Canary na 1–5 % URL/podmapy, měřeno samostatně; pokud p90 LCP roste o více než 10 %, rollout se zastaví.
- Štítky v RUM: template_id, experiment_id, content_version pro čistou atribuci.
- Obsahové gardy: generátory nesmí měnit nad-the-fold (LCP) bez validace; obrázkům definujeme intrinsic size.
Automatizace a CI/CD hooky
- Pre-merge kontroly: Lighthouse/PSI na reprezentativních URL, limity na JS bundle, long tasks a CLS rozdíly.
- Post-deploy syntetika: okamžité smoke testy s prahy; auto-rollback při překročení.
- RUM guard: pokud p90 LCP na mobilu vzroste o ≥ 300 ms během 60 minut, feature flagy se automaticky stáhnou.
Edge a CDN jako páky výkonu
- HTML caching s variantami podle jazyka/segmentu, stale-while-revalidate pro plynulé releasy.
- Obrázková služba: formát, resize, dpr, lazy policies a priority hints přímo na edge.
- Route-based splits: těžké skripty pouze na potřebných cestách; zbytek je „čistý“.
UX rozhodnutí, která mění metriky
- Hero minimalismus: nad foldem pouze obsah LCP (text/hlavní obrázek), žádné karusely ani autoplay video.
- Interakční cíle: první kliknutelný prvek je dostupný bez blokací (cookie wall až po první interakci, ne před ní).
- Progressive disclosure: skryté sekce načítat až na poptávku; 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 impresích/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 obrázek ≤ 100 kB (ideálně text + SVG).
- JS budget < 170 kB gz nad foldem; žádné blokující třetí strany.
- RUM alerty otestované; auto-rollback scénář ověřený.
- Šablony programmatic SEO ověřeny na canary; experimenty pozastaveny během špičky.
Časté anti-vzory a jak se jim vyhnout
- „Perf by PR“: optimalizace jen příležitostně; místo toho nastavte trvalá SLO a automatizované hlídky.
- „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 měřte, pak implementujte.
War room pro Core Web Vitals je operační systém výkonu: spojuje měření z reálného prostředí, syntetické diagnostiky, stabilní SLO a rychlé zásahy. V kontextu měření, automatizace a programmatic SEO představuje nejkratší cestu od problému k výsledku – vyšší CWV skóre, lepší organické signály a měřitelný nárůst konverzí.
