Google’s Core Web Vitals are no longer optional. Sites with poor LCP, CLS, or INP (Interaction to Next Paint) are actively penalized in local and global searches. While Next.js App Router provides excellent default performance optimizations, achieving a perfect Lighthouse score requires deliberate engineering.

1. Master next/image Optimization

Images are often the primary cause of poor LCP scores. Always use the built-in <Image /> component in Next.js. It automatically serves resized WebP/AVIF formats, enforces layout stability to prevent CLS, and lazy-loads images below the fold by default. For hero images, set the priority attribute to ensure instant loading.

2. Minimize Third-Party Render Blocking

Heavy scripts like Google Tag Manager, analytics, and chatbots block the main thread. Use the next/script component with the strategy="lazyOnload" or strategy="worker" attributes to offload execution from the main layout thread, maintaining interactive speeds.

3. Optimize Font Delivery

Prevent font-swapping layout shifts by utilizing Google Fonts directly through modern CSS declarations with font-display: swap;. Or utilize Next/font, which downloads font assets at build time, self-hosts them locally, and injects size adjustment overrides automatically.