Next.js Performance Optimization: Core Web Vitals, Bundle Analysis, and Image Loading

Next.js apps that feel slow often share the same root causes: unoptimized images, blocking JavaScript, large bundles, and missing caching headers. This guide covers the practical fixes that move the needle on Core Web Vitals. Understanding Core Web Vitals Google uses three metrics to grade your site's user experience: LCP (Largest Contentful Paint): Load time for the main content. Target < 2.5s FID/INP (Interaction to Next Paint): Response time to user input. Target < 200ms CLS (Cumulative Layout Shift): Visual stability. Target < 0.1 Next.js gives you tools to hit all three. Most teams don't use them. Analyze Your Bundle First Before optimizing anything, measure: npm install --save-dev @next/bundle-analyzer // next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) module.exports = withBundleAnalyzer({ // your config }) ANALYZE=true npm run build This opens a visual breakdown of every byte in your bundle. Common