Next.js Performance: From 5s to 1s Load Time

The Problem: A 5-Second Website

A client came to me with a serious issue: their Next.js e-commerce site was loading in 5+ seconds. They had 40% cart abandonment rate, and it was getting worse.

I ran a Lighthouse audit. The results were brutal:

Core Web Vitals were failing. Google was probably penalizing them in search rankings.

The Audit: Finding the Bottlenecks

1. Images Were the Biggest Culprit (60% of Load Time)

They were serving 2MB JPEGs on mobile. No lazy loading. No format optimization. Just raw images slowing everything down.

2. JavaScript Bundle Was Too Large (35% of Load Time)

The client was loading the entire analytics library upfront. Multiple unused packages in node_modules. No code splitting for routes.

3. No Server-Side Caching (20% of Load Time)

Every page request hit the database fresh. No ISR (Incremental Static Regeneration). Database queries were slow.

4. Missing HTTP/2 Push Headers

The server wasn't pre-pushing critical resources. Requests were sequential instead of parallel.

The Solution: Step-by-Step Optimization

Phase 1: Image Optimization (Biggest Impact)

I implemented Next.js Image component for all product images:

import Image from 'next/image'

<Image
  src="/product.jpg"
  alt="Product"
  width={500}
  height={500}
  quality={75}
  priority={false}
  placeholder="blur"
/>

Then I configured next.config.js for WebP format and responsive images:

images: {
  formats: ['image/webp', 'image/avif'],
  deviceSizes: [640, 750, 828, 1080, 1280],
  imageSizes: [16, 32, 48, 64, 96, 128]
}

Result: Image payload reduced from 2MB to 180KB. LCP improved to 2.1s.

Phase 2: Code Splitting & Lazy Loading

I implemented dynamic imports for non-critical components:

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(
  () => import('@/components/HeavyComponent'),
  { loading: () => <p>Loading...</p> }
)

And moved third-party scripts to load after page interaction:

<Script
  src="analytics.js"
  strategy="lazyOnload"
/>

Result: JavaScript bundle reduced by 40%. First paint improved to 1.2s.

Phase 3: Caching Strategy with ISR

I set up Incremental Static Regeneration for product pages:

export const revalidate = 3600 // ISR every hour

export default async function ProductPage() {
  const product = await getProduct(id)
  return <ProductDetail {...product} />
}

This meant 99% of users got pre-rendered HTML instead of database hits.

Result: Response time from 800ms to 40ms.

Phase 4: Database Query Optimization

Even cached pages sometimes need fresh data. I:

• Added indexes to frequently queried columns
• Implemented query result caching with Redis
• Reduced N+1 queries with better ORM usage

Result: Database queries went from 300ms to 30ms average.

The Results

Business Impact

Here's what mattered most to the client:

• Cart abandonment rate: Dropped from 40% to 18%
• Conversion rate: Increased by 26%
• Google Search traffic: Up 34% (better rankings from improved Core Web Vitals)
• Revenue: +$45K per month

Key Takeaways

1. Images are usually the culprit. Optimize them first. Use next/image and modern formats.
2. Measure before optimizing. Use Lighthouse, Core Web Vitals, and real user metrics (RUM).
3. ISR is a game-changer. Pre-render as much as possible, regenerate on demand.
4. Caching compounds. Image cache + page cache + database cache = fast everything.
5. Performance = Revenue. Every 100ms of latency costs money.

Tools I Used