Frontend Perf Auditor
Measure the waterfall/bundle/profile, fix the biggest bottleneck, verify it moved. No optimizing on hunches.
v1.0.0 · ~561 tokens · ⬇ 0 · Updated July 6, 2026
What it does
Diagnoses front-end slowness from measurement (network waterfall, bundle analyzer, runtime profile), then applies the highest-value fix (ship less JS via code-split/lazy-load/lighter deps, image format+size+lazy, render memoization/virtualization, network parallelization) and re-measures. Chases the biggest bottleneck, not a 2% win, and reverts anything that didn't move the metric.
Example uses
Shrink a huge JS bundle
Your app ships megabytes of JavaScript and first load is visibly slow.
Our Next.js app ships 2.1 MB of JavaScript on the landing page. Run the bundle analyzer and identify the heavy dependencies — I suspect the full chart library and a date library with all locales are in the initial chunk. Code-split by route, lazy-load the chart below the fold, replace or trim the heavy deps, and show before and after bundle size and LCP.Diagnose a slow page load
A page feels slow but you do not know if the culprit is the bundle, the images, the fonts, or a blocking API call.
Our product page takes 6 seconds to become interactive on a mid-range phone. Read the network waterfall before proposing anything: what is actually on the critical path — the 1.8 MB hero PNG, the render-blocking font, or the reviews API the page waits on? Fix only the biggest bottleneck, re-measure LCP and TTI, and revert anything that does not move the numbers.Fix jank in long lists
Scrolling a data-heavy view stutters and typing in its search box lags.
Our admin table renders 5,000 rows at once and every keystroke in the search box re-renders all of them. Profile the long tasks first to confirm, then virtualize the list, memoize the row component, and debounce the search input. Re-profile after each change and keep only the changes that actually removed the long tasks.Install
# 1. Create the skill folder in your Claude setup mkdir -p ~/.claude/skills/frontend-perf-auditor # 2. Download SKILL.md into it (or move the file you just downloaded) # → ~/.claude/skills/frontend-perf-auditor/SKILL.md # 3. Claude Code auto-discovers it on next launch.
Inside the skill
--- name: frontend-perf-auditor description: Diagnose and fix front-end performance — bundle size, render cost, load waterfall — from measurement, not guesses. Use when a page is slow, the bundle is huge, or asked "why is this slow", "reduce bundle size", "optimize load time", "fix the jank". Measure first, fix the biggest thing. --- # Frontend Perf Auditor Perf work without measurement is superstition. Find the actual bottleneck, fix the one that moves the number, verify it moved. Optimizing the wrong thing is wasted effort with new risk. ## Measure first (what's actually slow) - **Load**: what's on the critical path? A blocking script, a giant JS bundle, an unoptimized hero image, a render-blocking font, a slow API call the page waits on. Read the network waterfall, not your intuition. - **Bundle**: run the analyzer. What's biggest? Usually a heavy dependency (a whole date/chart/ icon library for one function), duplicate deps, or no code-splitting. - **Runtime/jank**: profile. Long tasks, excessive re-renders, layout thrash, unthrottled handlers, big lists rendered all at once. ## Highest-value fixes (apply the one the measurement points to) - **Ship less JS**: code-split by route, lazy-load below-the-fold and heavy components, tree-shake, replace a heavy lib with a lighter one or a few lines. JS is the most expensive byte (parse + execute, not just download). - **Images**: right format (AVIF/WebP), right size (don't ship 4K for a thumbnail), lazy-load offscreen, set dimensions to avoid layout shift. - **Render**: memoize expensive components, virtualize long lists, avoid state that re-renders the world, debounce/throttle high-frequency handlers. - **Network**: parallelize independent requests, cache, prefetch the likely-next, don't block first paint on non-critical data. ## Rules - No measurement, no fix — a hunch is not a bottleneck. - Re-measure the same metric after the change; if it didn't move, revert — you added complexity for nothing. - Chase the biggest bottleneck, not a 2% win while a 2 MB bundle sits there. ## Output The measured bottleneck (with the number), the specific fix, before→after on that metric, and the trade-off if any (complexity, cache invalidation).
Changelog
- v1.0.02026-07-03Initial clean-room write.
Frequently asked questions
Is Frontend Perf Auditor free?
Yes. Frontend Perf Auditor is free to download and MIT-licensed.
Where do I install Frontend Perf Auditor?
Place the SKILL.md file in ~/.claude/skills/frontend-perf-auditor/ and Claude Code auto-discovers it on next launch.
How many tokens does Frontend Perf Auditor use?
About 561 tokens — it is designed to be token-lean.
We're developers and SaaS builders who use these tools daily in production. Every review comes from hands-on experience building real products — DealPropFirm, ThePlanetIndicator, PropFirmsCodes, and many more. We don't just review tools — we build and ship with them every day.
Written and tested by developers who build with these tools daily.