Web Performance Audit

Analyzes and optimizes web page performance across loading, interactivity, and visual stability. Covers Core Web Vitals (LCP, INP, CLS), bundle size analysis, render-blocking resource elimination, image optimization, font loading strategies, caching headers, code splitting, lazy loading, and JavaScript execution profiling with prioritized, actionable recommendations.

Usage

Describe your web application stack, current performance metrics if known, and specific concerns (slow initial load, janky scrolling, high bundle size). Provide Lighthouse scores, Web Vitals data, or describe user-reported performance issues. The skill diagnoses root causes and provides prioritized optimization steps with expected impact.

Examples

• "My Next.js app has an LCP of 4.2s — diagnose possible causes and provide optimization steps"
• "Audit this React app's bundle: it's 2.3MB gzipped. How do I identify and eliminate bloat?"
• "My CLS score is 0.25 due to images and fonts loading — how do I fix layout shifts?"
• "The page is interactive but scrolling is janky — how do I profile and fix runtime performance?"

Guidelines

• Optimize LCP by preloading hero images, inlining critical CSS, and avoiding render-blocking scripts
• Fix CLS by setting explicit width/height on images and videos, and reserving space for dynamic content
• Improve INP by breaking long tasks into smaller chunks with yield-to-main patterns or scheduler API
• Use responsive images with srcset, modern formats (WebP/AVIF), and appropriate sizes attributes
• Implement font-display: swap or optional and preload critical fonts to prevent FOIT/FOUT
• Configure proper cache headers: immutable for hashed assets, stale-while-revalidate for API responses
• Code-split routes and heavy components with dynamic imports to reduce initial bundle size
• Use the Performance API (PerformanceObserver) to measure real user metrics, not just lab data