---
name: optimize-core-web-vitals
description: Diagnoses and fixes Core Web Vitals (LCP, INP, CLS) and Lighthouse failures via image/font/JS strategy in the browser; used when pages are slow, janky, or failing a Lighthouse/PageSpeed audit.
when_to_use: When the user reports slow page load, layout shift, sluggish interactions, poor Lighthouse/PageSpeed scores, or asks to improve LCP/INP/CLS or Core Web Vitals — frontend/browser-side specifically. Not for backend/server query latency (that is performance-profiling).
---
## When to Use
Use when a page is slow to render, shifts layout, or feels laggy on interaction — and the fix lives in the browser (HTML/CSS/JS/assets), not the server query path.
| Symptom | Metric | This skill |
|---|---|---|
| Hero/main content paints late | LCP | yes |
| Content jumps after load | CLS | yes |
| Click/typing feels frozen | INP | yes |
| Lighthouse/PageSpeed score red | all | yes |
| API/DB response is the bottleneck | TTFB-backend | no → backend profiling |
Targets (pass = 75th percentile): **LCP ≤ 2.5s · INP ≤ 200ms · CLS ≤ 0.1**. TTFB ≤ 800ms is a precondition for LCP — if TTFB alone blows the budget, stop and route to backend.
## Steps
**1. Baseline before touching anything.** Run a trace + audit on the real URL so you have a before/after diff.
- `chrome-devtools.performance_start_trace` (with `reload: true`, `autoStop: true`) → load → `performance_stop_trace`.
- Or `chrome-devtools.lighthouse_audit` (categories `["performance"]`, mobile preset — mobile is what fails first).
- Run `performance_analyze_insight` on the flagged insights (e.g. `LCPBreakdown`, `RenderBlocking`, `CLSCulprits`, `DocumentLatency`). Record the LCP element, INP target, CLS shifters, and TTFB. **Do not guess which image/script is the problem — read it from the trace.**
**2. Identify the LCP element and attack its critical path.** LCP = TTFB + resource load delay + load time + render delay. Fix the dominant segment:
- LCP is an image → add `fetchpriority="high"` to that one ``, and `` in ``. Remove `loading="lazy"` from it (lazy on the LCP image is a top regression).
- Serve modern formats: AVIF then WebP fallback via ``; provide `srcset`/`sizes` so mobile downloads a small file, not the desktop original.
- LCP is text → preload the font (step 4) and remove render-blocking CSS/JS in front of it.
**3. Kill render-blocking resources.** From the `RenderBlocking` insight:
- Inline critical above-the-fold CSS; load the rest with `media` swap or async. Defer non-critical CSS.
- Add `defer` (or `type="module"`) to scripts; never `async` a script that the first paint depends on ordering-wise.
- Remove third-party/analytics tags from the critical path — load them after `load` or via `requestIdleCallback`.
- Self-host or `preconnect` to required cross-origin asset domains.
**4. Eliminate CLS — reserve space for everything that arrives late.**
- Every ``/`