Optimizing Performance in Next.js: How to Reach 100/100 on Lighthouse

In 2024, loading speed is not just a luxury, it's an essential requirement. Google prioritizes fast sites (Core Web Vitals) and users abandon pages that take more than 3 seconds to load.

In this article, I'll share the strategies I use to ensure maximum score on Lighthouse.

1. Image Optimization with next/image

The Next.js image component is one of the most powerful tools for performance. It automatically:

• Converts images to modern formats (WebP/AVIF).
• Resizes images to the exact size of the user's screen.
• Implements native Lazy Loading.

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={1200}
  height={600}
  priority // For images above the fold
/>;

2. Dynamic Imports and Code Splitting

Don't load JavaScript the user doesn't need. With next/dynamic, we can load heavy components only when necessary.

import dynamic from "next/dynamic";

const HeavyChart = dynamic(() => import("../components/HeavyChart"), {
  loading: () => <p>Loading chart...</p>,
});

3. Optimized Fonts with next/font

Next.js 13+ removed the Layout Shift caused by font loading. Using next/font/google, fonts are hosted locally at build time, eliminating extra requests to Google Fonts.

Conclusion

Performance is a continuous job. Regularly monitoring your site with tools like PageSpeed Insights and WebPageTest is crucial to maintain competitive advantage.

Need a performance audit on your site? Contact me.