Next.js Optimization
Installation
SKILL.md
Optimization
Priority: P1 (HIGH)
Core optimization primitives provided by Next.js. Monitor First, Optimize Later.
Monitoring (Core Web Vitals)
Before applying optimizations, identify bottlenecks using:
- LCP (Largest Contentful Paint): Initial load speed. Target < 2.5s.
- CLS (Cumulative Layout Shift): Visual stability. Target < 0.1.
- INP (Interaction to Next Paint): Responsiveness. Target < 200ms.
- Tools: Chrome DevTools "Performance" tab,
next/speed-insights, orReact Profiler.