Frontend Performance

Frontend Performance

This skill makes a React + Vite app hit the Core Web Vitals bar — the same metrics Google uses for ranking and that users feel as "fast." It optimizes against real thresholds, not vibes.

Analogy: shipping a fast app is like packing for a flight. You don't drag every possession to the gate — you pack the carry-on with what's needed now (above-the-fold) and check the rest (lazy-load below-the-fold). Overpacking the initial bundle is what makes the page heavy.

The targets (field data, 75th percentile)

• **LCP `. Lazy-load below-the-fold and modal/dialog components so the initial bundle ships only above-the-fold code.
• Split vendors in vite.config.ts via build.rollupOptions.output.manualChunks (separate react/react-dom, charts, icons) for long-term cache hits.
• Keep the largest initial chunk under ~200KB gzipped. Treat Vite's "chunks larger than 500KB" warning as a budget failure, not a suggestion.
• Enforce the budget in CI with size-limit; fail the build on regression. Inspect with vite-bundle-visualizer.
• Tree-shake via named imports; prefer lucide-react over monolithic icon packs.

Step 3 — Fix LCP

• Preload the LCP image: ``. Never lazy-load the hero.
• Serve images as AVIF/WebP through Vercel image optimization; always set explicit width/height (or aspect-ratio) to prevent CLS.
• Self-host or preconnect fonts; use font-display: swap.

Step 4 — Fix INP

• Break up long tasks; defer non-critical JS.
• Use useTransition / startTransition for non-urgent React updates so input handlers stay responsive.
• Avoid synchronous work inside input/click handlers.

Step 5 — Fix CLS

• Reserve space for images, ads, and embeds (explicit dimensions / aspect-ratio).
• Don't inject content above existing content after load.
• Animate only transform/opacity (GPU-composited) — never width/height/top/left, which trigger layout and hurt both CLS and INP.

Output

Deliver: a before/after of the three vitals (or the targets if no baseline), the concrete vite.config.ts chunk config, the React.lazy split points, the image/font fixes, and the CI bundle-budget step.

Reference

GoogleChrome/web-vitals (~8.5k⭐), web.dev Core Web Vitals, Vite build docs (manualChunks), Vercel image optimization, size-limit.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: MartinOlivero
• Source: MartinOlivero/saas-builder
• License: MIT
• Homepage: https://iamautom.com

Install and usage instructions live in the source repository linked above.