Achieving strong Lighthouse scores starts with basic optimisations, but reaching exceptional performance takes more than default settings. While Next.js offers powerful tools out of the box, real results come from deliberate decisions across rendering, asset management, and Core Web Vitals.
This blog breaks down seven high-impact areas I focused on while improving performance in a real-world project. These targeted optimisations lead to significant Lighthouse improvements, from smart image handling and thoughtful rendering strategies to precise bundle analysis and fine-tuned font delivery.
You’ll get a practical sense of how to reduce layout shifts, cut bundle sizes, and debug Web Vitals effectively. Each technique blends Next.js capabilities with core web performance principles to help you cross the 90+ Lighthouse score threshold with confidence.
NOTE: All approaches highlighted are not router-specific and will work with both App router and page router.
1. Optimise images
Images often dominate page weight and hurt performance. By leveraging Next.js's <Image>component with modern formats, lazy loading, and responsive sizing, you can slash load times, eliminate layout shifts, and boost Lighthouse scores, without sacrificing visual quality. Here’s how to implement these optimisations effectively.
Pros:
Cons:
2. SSR, SSG & ISR
Choosing between Static Site Generation (SSG) and Server-Side Rendering (SSR) has a significant impact on performance, especially regarding Lighthouse scores, page speed, and scalability.
SSG (getStaticProps)
Pros:
Cons:
SSR (getServerSideProps)
Pros:
Cons:
ISR (Incremental Static Regeneration) for Dynamic Content
Pros:
Cons:
3. Code splitting & dynamic imports
Pros:
Cons:
4. Visualising bundle heaviness
Pros:
Cons:
5. Minify CSS, JS, and HTML
Pros:
Cons:
6. Font optimisation
Pros:
Cons:
7. Core web vitals debugging
Targeted fixes for LCP and CLS issues are beyond generic optimisations. Isolating and resolving bottlenecks, layout shifts, and input delays with precision.
Pros:
Cons:
Pros:
Cons:
On that note…
Achieving high Lighthouse scores with Next.js is completely attainable when performance is treated as a deliberate part of the development process. The optimisations in this blog, including smart image handling, rendering strategy improvements, bundle analysis, and font delivery tuning, show what becomes possible when you apply Next.js features alongside core web performance principles.
Each adjustment contributes to a faster, more stable, and more consistent user experience. With tools like next/image, flexible rendering modes, and bundle analysers, Next.js supports a performance-first approach throughout the stack.
Looking ahead, the ecosystem continues to offer new ways to improve. Edge Functions bring faster response times and more efficient request handling. Real user monitoring introduces a more accurate view of how your app performs in the wild. React Server Components help reduce client-side work and improve overall responsiveness. Staying aligned with Next.js release updates and evolving your implementation as best practices shift will help keep performance strong over time.
Performance is about more than technical metrics. It shapes how users interact, how confident they feel using your application, and how easily your product can grow. With consistent attention and the right techniques, it's possible to build experiences that are both fast and reliable.
Measure → Optimise → Dominate