Performance Optimization Skill

Optimizes the portfolio for fast load times, smooth interactions, and excellent Core Web Vitals (LCP, CLS, INP, FCP, TTFB).

When to use this skill

• Page load times exceed 2 seconds
• Lighthouse performance score is below 90
• Core Web Vitals need improvement (LCP > 2.5s, CLS > 0.1, INP > 200ms)
• Adding new images, fonts, or heavy third-party scripts
• Optimizing re-renders in React components

Workflow

1. Measure — Run Lighthouse in Chrome DevTools (mobile + desktop). Check Core Web Vitals via PageSpeed Insights. Profile with React DevTools / React Scan.

2. Images — Ensure all images have explicit width and height. Use next/image with proper sizes. Above-fold images should use priority. Lazy-load below-fold images with loading="lazy".

3. Fonts — Preload critical fonts with <link rel="preload" as="font">. Use font-display: swap. Subset fonts to only needed code points.