Optimize Frontend Performance

Optimize Frontend Performance

Purpose

Improve frontend performance without premature optimization by using a measurement-driven approach.

When to use

Use this skill when you are:

• Seeing slow rendering or sluggish interactions
• Experiencing large bundle sizes or slow initial load
• Implementing large lists or complex pages
• Introducing code splitting and lazy loading
• Reducing network chatter and redundant fetches

Inputs

• The performance symptom (slow load, slow interaction, jank)
• Reproduction steps and target devices/browsers
• Existing profiling tools available (browser profiler, build analyzer)

Outputs

• A prioritized list of performance fixes with acceptance criteria
• A code splitting plan (what to lazy load)
• Render optimization plan (memoization, derived state)
• List optimization plan (virtualization) when applicable

Rules

• Optimization MUST be guided by evidence (profiling/metrics).
• Avoid adding memoization that reduces readability without measurable benefit.
• Large lists SHOULD use virtualization.
• Expensive computations SHOULD be memoized or moved off the critical render path.

Steps

1. Measure:
   • profile render time
   • inspect network waterfall
   • inspect bundle analyzer (if available)
2. Identify the biggest contributor.
3. Apply targeted fixes:
   • code splitting for large routes/features
   • caching for server state
   • memoization for expensive derived values
   • virtualization for long lists
4. Re-measure and confirm improvement.
5. Add a regression guard (test or metric) where practical.

Verification

• Performance issue is measured before and after optimization
• Optimization reduces the identified bottleneck (render time, bundle size, etc.)
• No functionality regression introduced
• Code splitting loads correct chunks for routes
• Virtualized lists render smoothly with large datasets
• Memoization does not reduce code readability without measurable benefit

Boundaries

• MUST NOT optimize without profiling evidence
• MUST NOT add memoization that reduces readability without measurable gain
• MUST NOT skip re-measurement after applying fixes
• SHOULD NOT over-split bundles (too many small chunks can hurt performance)
• SHOULD NOT virtualize small lists (adds complexity without benefit)
• SHOULD NOT cache data indefinitely without invalidation strategy

Included assets

• Templates: ./templates/ includes a performance investigation checklist.
• Examples: ./examples/ includes common optimization scenarios.