web-performance-auditlisted
Install: claude install-skill omonuj/claude-skills
# web-performance-audit
Performance work goes wrong in two directions: shipping a heavy page nobody profiled, or `useMemo`-ing everything on a hunch. This skill does neither — it measures against **Core Web Vitals**, finds the actual bottleneck, and applies the fix that moves that specific metric. Measure, fix the biggest thing, re-measure. Never guess.
## Measure first (always)
- **Field data > lab data.** Real-user monitoring (CrUX / web-vitals library reporting to your analytics) reflects real devices and networks; Lighthouse is a lab proxy. Trust the field; use the lab to reproduce and iterate.
- Profile on a **throttled mid-tier mobile** (4x CPU slowdown, Fast 3G), not your laptop. Your machine hides every problem your users have.
- Establish a baseline number before touching anything, so you can prove the fix worked. No baseline = no claim of improvement.
## The three vitals and their fixes
### LCP — Largest Contentful Paint (loading), target < 2.5s
The biggest above-the-fold element rendered. Usually a hero image or a heading blocked by resources.
- **Images:** serve responsive sizes (`srcset`/`sizes`), modern formats (AVIF/WebP), and `priority`/`fetchpriority=high` + preload for the LCP image. Lazy-load *below*-the-fold images only — never the LCP one.
- **Render-blocking resources:** inline critical CSS, defer non-critical CSS/JS, `preconnect` to required origins. Every blocking `<script>` in `<head>` delays paint.
- **Server/TTFB:** if the document itself is slo