# Web Performance Audit > Diagnose and fix real web performance problems measured against Core Web Vitals, not vibes. Use when a page feels slow, a Lighthouse/CWV score regressed, or before shipping a heavy feature. Walks load-time (LCP/bundle/images), interactivity (INP/main-thread), and layout-stability (CLS) with the specific fix for each, and forbids premature micro-optimization. - Skill: `omonuj/web-performance-audit` (Agent Skill) - Install (CLI): `npx skillmds@latest add omonuj/web-performance-audit` - Raw SKILL.md: https://api.skillmd.com/api/skills/omonuj/web-performance-audit/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: omonuj (https://skillmd.com/u/omonuj) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/omonuj/web-performance-audit --- # 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 `