Performance
Rules
- Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1
- Lazy load below-fold images and heavy components:
React.lazy(),next/dynamic - Code split routes — each page loads only its own code
- Optimize images: WebP/AVIF format, proper sizing,
next/imagewithsizes - Bundle analysis:
@next/bundle-analyzer— identify large dependencies - Caching: HTTP cache headers, service worker for repeat visits, stale-while-revalidate
- Database: index frequently queried columns, use
EXPLAIN ANALYZEto find slow queries - Avoid layout shifts: set explicit dimensions on images, videos, embeds