HoangNguyen0403 Optimization
Priority: P1 (HIGH)
Core optimization primitives provided by Next.js. Monitor First, Optimize Later.
Monitoring (Core Web Vitals)
- LCP (Largest Contentful Paint): Target < 2.5s.
- CLS (Cumulative Layout Shift): Target < 0.1.
- INP (Interaction to Next Paint): Target < 200ms.
- Tools: Chrome DevTools "Performance" tab,
next/speed-insights,React Profiler.
Images
Always use next/image to prevent CLS and enable automatic optimization:
See implementation examples
Fonts
Use next/font for zero layout shift — self-hosts fonts and adds font-display: swap:
See implementation examples
Metadata (SEO)
See implementation examples
Scripts
Use next/script with appropriate loading strategies:
beforeInteractive: Critical scripts (polyfills).afterInteractive: Analytics (Google Analytics).lazyOnload: Chat widgets, social embeds.
Bundle & Components
- Analyze with
@next/bundle-analyzer. Prune heavy libraries; use ESM-tree-shakable dependencies. - Use
dynamicimports withSuspensefor large components not needed at initial render. - Enable
ppr: true(Partial Prerendering) in Next.js 15+ for static shell + dynamic islands.
Anti-Patterns
- No
<img>tag: Usenext/imageto prevent CLS and enable automatic optimization. - No Google Fonts CDN link: Use
next/fontto self-host and eliminate layout shift. - No metadata in
_document.tsx: Useexport const metadataorgenerateMetadata(). - No 3rd-party scripts in
<head>: Usenext/scriptwith appropriatestrategy.