Why Performance Matters
A 1-second delay in page load time can reduce conversions by 7%. Performance is a feature.
Core Web Vitals
Focus on the three Core Web Vitals: LCP (Largest Contentful Paint), FID/INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift).
Code Splitting
Split your bundle by route and by component. Next.js does this automatically, but you can go further with dynamic imports.
tsx
const Chart = dynamic(() => import(class="sh-string">'./Chart'), {
loading: () => <ChartSkeleton />,
ssr: false,
})Image Optimization
Images are often the biggest performance bottleneck. Use next/image for automatic WebP conversion, lazy loading, and proper sizing.
Font Optimization
Use next/font to eliminate layout shift from web fonts and reduce network requests.
Conclusion
Performance optimization is an ongoing process. Measure first with Lighthouse and Web Vitals, then optimize the biggest bottlenecks.