Achieving 90+ PageSpeed Scores: A Complete Guide

In today's web, performance isn't just a nice-to-have; it's a critical factor for SEO and user experience. Throughout my career, I've consistently achieved 90+ PageSpeed Insight scores for my clients and personal projects. Here is my blueprint.

1. Image Optimization is Key

Images are often the heaviest resources. I always use the next/image component which automatically:

• Serves images in modern formats like WebP or AVIF.
• Resizes images based on the device viewport.
• Lazy loads images that are not in the initial viewport.

2. Dynamic Imports & Code Splitting

Next.js does a great job at splitting code by page, but you can go further. For heavy components (like a complex chart or a map) that aren't immediately visible, I use next/dynamic to load them lazily.

const HeavyChart = dynamic(() => import('./HeavyChart'), { 
  loading: () => 
Loading...
,
  ssr: false 
})

3. Font Optimization

Google Fonts can be blocking. Using next/font (introduced in Next.js 13/14) allows you to self-host Google fonts automatically with zero layout shift (CLS). This has been a game-changer for my Cumulative Layout Shift scores.

Conclusion

Optimizing for performance is an iterative process. By focusing on Core Web Vitals and leveraging the built-in optimization tools of Next.js, you can build sites that feel instant and rank higher on Google.