Next.js Lighthouse Optimization: 42 to 97 Case Study

How I Boosted My Next.js Lighthouse Score from 42 to 97

We’ve all been there: you build a beautiful Next.js site, deploy it, and then run a Lighthouse audit only to see a sea of red circles.

That was me a few months ago. My project, the Aviators Training Centre website, launched with a Performance score of 42. Google ignored us, organic traffic was non-existent, and the Largest Contentful Paint (LCP) was a painful 5.8 seconds.

But after a systematic optimization, I pushed that score to 97. The result? We hit Page 1 on Google, generated over 50 organic leads, and drove ₹3 lakh+ in revenue.

TL;DR:

• Images: Used next/image with priority loading to reduce size by 93%.
• Code Splitting: Implemented dynamic imports to cut the main bundle by 67%.
• Business Impact: Better Core Web Vitals = Page 1 rankings and real revenue.

---

Prerequisites

Before we dive in, you should have:

• A basic understanding of Next.js and React.
• A site deployed (or running locally) that you want to optimize.
• Lighthouse (built into Chrome DevTools) to measure your progress.

---

The Problem: Why "Good Enough" Isn't Enough

When I first checked the metrics, they were grim:

• First Contentful Paint (FCP): 3.2s (Target: <1.8s)
• Largest Contentful Paint (LCP): 5.8s (Target: <2.5s)
• Cumulative Layout Shift (CLS): 0.18 (Target: <0.1)

Google's algorithm prioritizes fast websites. If your site is slow, you aren't just annoying users—you're effectively invisible to search engines.

The 5-Step Optimization Strategy

1. Image Optimization (The Biggest Win)

Images are usually the heaviest part of any site. I switched every standard <img> tag to the Next.js <Image /> component. This automatically handles WebP conversion and resizing.

For "above-the-fold" images (like your Hero section), the priority prop is your best friend. It tells the browser to fetch that image immediately.

// src/components/HeroImage.js
import Image from 'next/image';

export default function HeroImage() {
  return (
    <Image
      src="/courses/cpl-training.png"
      alt="CPL Training"
      width={800}
      height={600}
      quality={85}
      priority={true} // Critical for LCP!
      placeholder="blur"
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  );
}

2. Smart Code Splitting

Why load a heavy admin dashboard or a syntax highlighter on the homepage? You shouldn't. I used Next.js dynamic imports to ensure users only download the code they actually need.

// src/pages/index.js
import dynamic from 'next/dynamic';

// This component only loads when it's about to enter the viewport
const Testimonials = dynamic(
  () => import('@/components/Testimonials'),
  {
    loading: () => <div className="animate-pulse">Loading...</div>,
    ssr: false // Set to false if it doesn't need to be rendered on the server
  }
);

3. Font Optimization

Render-blocking fonts are a silent killer. Using next/font allows you to host fonts locally and use font-display: swap to prevent the "Flash of Invisible Text."

// src/layout.js
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
  preload: true,
});

4. Script Loading Strategy

Third-party scripts (Analytics, Chatbots) often hog the main thread. I used the next/script component to control exactly when these scripts load.

• afterInteractive: For analytics (loads early but doesn't block).
• lazyOnload: For non-critical scripts like chat widgets.

5. Aggressive Caching

For assets that rarely change (like your logo or UI icons), tell the browser to keep them for a long time. I updated my next.config.js to include immutable cache headers.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png|webp)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

---

The Results: Numbers Don't Lie

After implementing these changes, the transformation was incredible:

• Performance: 42 → 97
• LCP: 5.8s → 1.4s (4x faster)
• TBT (Total Blocking Time): 890ms → 120ms (7x reduction)

This technical cleanup led to Page 1 rankings for 20+ keywords and 19,300 impressions in just 6 months.

Key Takeaways for Your Next Project

1. Lighthouse is a business tool: A high score isn't just for ego; it's for SEO and conversions.
2. Optimize early: Don't wait until after launch. We lost two months of potential traffic because we deployed a slow site first.
3. Use the built-ins: Next.js provides Image, Font, and Script components for a reason. Use them!

---

What’s your biggest struggle when it comes to web performance? Is it third-party scripts, heavy images, or something else? Let’s chat in the comments! I’d love to hear how you handle these bottlenecks.

If you found this helpful, feel free to connect with me—I'm always happy to talk Next.js and automation!