Next.js Performance Optimization with Core Web Vitals

Create a performance optimization plan for [PROJECT NAME], a Next.js [VERSION: 14/15] application with App Router hosted on [VERCEL/AWS/DOCKER].\\\\\\\\n\\\\\\\\n**Current Metrics:**\\\\\\\\n- LCP (Largest Contentful Paint): [VALUE]s (target: < 2.5s)\\\\\\\\n- FID (First Input Delay): [VALUE]ms (target: < 100ms)\\\\\\\\n- CLS (Cumulative Layout Shift): [VALUE] (target: < 0.1)\\\\\\\\n- TTFB: [VALUE]ms\\\\\\\\n- JS bundle size: [VALUE]KB\\\\\\\\n\\\\\\\\n**Diagnosis by Area:**\\\\\\\\n\\\\\\\\n1) **Rendering and Data Fetching:**\\\\\\\\n- SSR vs SSG vs ISR analysis by page type\\\\\\\\n- Server Components vs Client Components (where the boundary sits)\\\\\\\\n- Streaming and Suspense boundaries\\\\\\\\n- Parallel data fetching vs waterfalls\\\\\\\\n\\\\\\\\n2) **Bundle and JavaScript:**\\\\\\\\n- Bundle analysis with @next/bundle-analyzer\\\\\\\\n- Strategic code splitting and dynamic imports\\\\\\\\n- Tree shaking heavy libraries (lodash, moment, etc.)\\\\\\\\n- Lazy loading components below the fold\\\\\\\\n\\\\\\\\n3) **Images and Media:**\\\\\\\\n- Next/Image: sizes, priority, placeholder blur\\\\\\\\n- Modern formats (WebP, AVIF)\\\\\\\\n- Responsive images with srcSet\\\\\\\\n- Lazy loading with Intersection Observer\\\\\\\\n\\\\\\\\n4) **CSS and Layout Shift:**\\\\\\\\n- Font loading strategy (font-display, preload)\\\\\\\\n- Skeleton screens to prevent CLS\\\\\\\\n- Explicit dimensions on images and embeds\\\\\\\\n- Critical CSS inline\\\\\\\\n\\\\\\\\n5) **Caching and CDN:**\\\\\\\\n- Cache-Control headers by asset type\\\\\\\\n- ISR with on-demand revalidation\\\\\\\\n- Edge middleware for personalization\\\\\\\\n- Service Worker for static assets\\\\\\\\n\\\\\\\\nFor each optimization, estimate the expected impact on the metric and implementation complexity (high/medium/low). Prioritize in a 2-week sprint format.