web-performance
Use when diagnosing or fixing Core Web Vitals issues, optimizing LCP/INP/CLS, auditing third-party scripts, or implementing performance budgets. Also use when correlating performance with search rankings or conversion rates.
| Model | Source |
|---|---|
| sonnet | pack: performance |
Full Reference
Web Performance
Section titled “Web Performance”Systematic CWV diagnosis and fix workflow. Pull field data first, compare against lab, identify the failing metric and specific element, then apply targeted fixes in priority order. Not a checklist run-through — a root cause investigation.
INP replaced FID as a Core Web Vital in March 2024. Do not reference FID for CWV assessment.
Called by: seo-audit Phase 4.5 when CWV thresholds fail.
Quick Reference
Section titled “Quick Reference”| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | < 2.5s | 2.5s – 4s | > 4s |
| INP | < 200ms | 200ms – 500ms | > 500ms |
| CLS | < 0.1 | 0.1 – 0.25 | > 0.25 |
| Item | Value |
|---|---|
| CrUX evaluation | P75 of real user data — 75% of visits must meet “good” |
| Google ranking signal | Mobile field data (PHONE form factor) — always check mobile |
| Lab tool | Lighthouse — simulated throttled Moto G4 on 4G |
| Field tool | CrUX via crux-api — 28-day rolling P75 |
| CrUX lag after deploy | 28 days for full window to reflect fix |
scheduler.yield() support | Chrome 129+ — always feature-detect with fallback |
fetchpriority="high" support | Chrome 102+, Safari 17.2+, Firefox 132+ |
| View Transitions API | Baseline Newly Available — adds ~70ms LCP on mobile |
| Speculation Rules API | Chromium-only (Chrome, Edge, Opera) |
Reference Index
Section titled “Reference Index”| I want to… | File |
|---|---|
| Pull field vs lab data, understand the diagnosis decision tree | reference/diagnosis.md |
| Fix LCP — hero image, TTFB, preload, font loading, Speculation Rules | reference/lcp-fixes.md |
| Fix INP — long tasks, Web Workers, event delegation, layout thrashing | reference/inp-fixes.md |
| Fix CLS — image dimensions, aspect-ratio, font fallback metrics, animations | reference/cls-fixes.md |
| Audit third-party scripts, implement facade pattern, optimize GTM | reference/third-party-scripts.md |
Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.
Announcement
Section titled “Announcement”┏━ ⚡ web-performance ━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Diagnose and fix Core Web Vitals — LCP, INP, CLS ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛