web-performance-optimization · davila7 — Claude Code skill: speed and Core Web

What web-performance-optimization does

The skill runs the agent through five stages: capture a baseline (Lighthouse, LCP, FID, CLS, bundle sizes, network waterfall), find the problems, rank them, apply fixes, then re-measure. The examples cover the usual suspects — a 2.5MB hero image, an 850KB JavaScript bundle blocking the main thread, render-blocking scripts, images without dimensions that shift the layout.

Fixes are concrete. Serve images as AVIF and WebP with width and height set, split code with lazy and dynamic, swap moment for date-fns, import single lodash functions instead of the whole library, add defer to analytics. For CLS there is a skeleton loader that reserves space before content arrives.

Verification loops back: re-run Lighthouse, compare before and after, check real user metrics, test on different devices and networks. The skill will not hand you a bundler config — it works out what is slow and proposes the steps. Without access to production metrics, some conclusions stay at the level of local measurements.