Next.js performance optimization

In this article I’ll walk through the techniques that helped reduce page load time from 3 seconds down to 1.2s in a real Next.js project.

The problem

Initially the app was loading in 3+ seconds, which is critical for conversion. We needed to improve performance without rewriting everything.

Solutions

1. Code splitting

Use dynamic imports to split heavy components:

Копировать
1import dynamic from 'next/dynamic';
2
3const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
4  loading: () => <div>Loading...</div>,
5  ssr: false,
6});

2. Image optimization

The Next.js Image component optimizes images out of the box:

Копировать
1import Image from 'next/image';
2
3<Image
4  src="/hero.jpg"
5  alt="Hero"
6  width={1200}
7  height={600}
8  priority
9  placeholder="blur"
10/>;

3. SSR vs SSG

Use SSG for static content with incremental revalidation:

Копировать
1export async function getStaticProps() {
2  return {
3    props: { data },
4    revalidate: 3600, // ISR every 60 minutes
5  };
6}

Results

• LCP: 1.2s (was 3.2s)
• FID: 50ms (was 200ms)
• CLS: 0.05 (was 0.15)
• PageSpeed Score: 96/100

Takeaways

TL;DR: measure, prioritize bottlenecks, iterate.

• establish a performance baseline (LCP/FID/CLS);
• apply code splitting + optimized images for quick wins;
• choose SSR/SSG per use case to keep latency predictable.

Performance optimization is an iterative process. Start with measuring, then focus on the most critical bottlenecks.