How We Achieved a Perfect 100/100 Lighthouse Score

October 9, 2025

12 min read

by MAKE89

Category:Code

lighthouseperformancenextjsoptimizationweb-vitals

How We Achieved a Perfect 100/100 Lighthouse Score

The Result

From 13.1s to 0.7s LCP in 48 hours. 94.7% faster.

The Challenge

On October 6th, 2025, our Lighthouse audit revealed a devastating reality:

Performance: 60-70/100 ❌
LCP: 13.1 seconds ❌
Slower than 95% of websites ❌

The hero avatar image was loading without priority, causing massive delays. The bundle wasn't optimized. Images weren't using modern formats. We had work to do.

Two days later, we achieved what seemed impossible.

The Achievement

Perfect Desktop Score

Performance: 100/100 ✅
Accessibility: 91/100 ⚠️ (minor improvements)
Best Practices: 96/100 ✅
SEO: 100/100 ✅

Excellent Mobile Score

Performance: 94/100 ✅
SEO: 100/100 ✅
All Core Web Vitals in "Good" range

The Strategy: 4 Phases in 48 Hours

Here's exactly how we did it.

Phase 1: Image Optimization (3 hours)

The Problem

Our hero image was a regular <img> tag. No priority loading. No format optimization. No dimensions declared. The browser had to:

Download the HTML
Parse it
Discover the image
Request the image
Wait 13+ seconds for LCP

The Solution

tsx

// Before: Regular image tag (13.1s LCP)
<img src="/avatar.jpg" alt="Profile" />

// After: Next.js Image with priority (0.7s LCP)
<Image
  src="/avatar.jpg"
  alt="Profile"
  width={200}
  height={200}
  priority={true}  // ← This one line gave us 10+ seconds
/>

What Changed

priority={true} tells Next.js to:

Preload this image immediately
Add it to <head> as <link rel="preload">
Load before any other images
Prioritize in the browser's fetch queue

Results:

LCP: 13.1s to 3.2s (10-second improvement!)
Still not perfect, but a massive win

Automatic Format Optimization

Next.js Image also gives you:

Automatic WebP conversion (30-50% smaller)
Automatic AVIF conversion (50-70% smaller, when supported)
Responsive sizing (sizes attribute)
Lazy loading for below-the-fold images

Results:

Hero image: 240KB to 85KB (WebP)
Gallery images: lazy-loaded automatically
CLS (Cumulative Layout Shift): 0 (dimensions prevent layout shift)

Phase 2: Bundle Analysis (4 hours)

The Investigation

Ran the Next.js bundle analyzer:

bash

ANALYZE=true pnpm build

Findings:

Shared JavaScript bundle: 142KB
ContactInfo component: 45KB (always loaded, rarely used)
ProjectFilter component: 38KB (only needed on /projects page)
Lucide-react: importing entire icon library

The Fix: Dynamic Imports

tsx

// Before: Import everything upfront
import { ContactInfo } from "./ContactInfo";
import { ProjectFilter } from "./ProjectFilter";

// After: Dynamic imports for non-critical components
const ContactInfo = dynamic(() => import("./ContactInfo"), {
  loading: () => <div>Loading...</div>,
});
const ProjectFilter = dynamic(() => import("./ProjectFilter"));

Results:

Initial bundle: 142KB to 101KB
ContactInfo: Loaded on-demand (45KB saved)
ProjectFilter: Split to /projects route
LCP improved: 3.2s to 1.1s

Icon Import Optimization

typescript

// Before: Imports entire library
import { Zap } from "lucide-react";

// After: Tree-shaking works properly
import { Zap } from "lucide-react"; // Already optimized in Next.js 15

Next.js 15 automatically tree-shakes lucide-react. No manual optimization needed.

Phase 3: Build Configuration (2 hours)

next.config.mjs Optimization

javascript

export default {
  images: {
    formats: ["image/webp", "image/avif"],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    minimumCacheTTL: 31536000, // 1 year
  },
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
  // Pre-render all pages at build time
  generateStaticParams: true,
};

Results:

33 pages pre-rendered at build time
Zero console errors in production
Automatic format selection based on browser support
Images cached for 1 year

Final Push

At this point:

LCP: 1.1s (good, but not perfect)
Performance: 87/100 (close!)

What was still slowing us down?

Phase 4: The Final Optimizations (2 hours)

Critical CSS Inlining

Next.js automatically inlines critical CSS. Verified it was working:

Above-the-fold styles: Inlined in <head>
Below-the-fold styles: Loaded async

Font Optimization

typescript

// Already optimized with next/font
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  display: "swap", // Prevents invisible text
  preload: true,
});

font-display: swap prevents FOIT (Flash of Invisible Text).

Third-Party Scripts

Checked for blocking scripts:

✅ No analytics (for now)
✅ No external fonts
✅ No tracking pixels

Clean HTML = Fast HTML.

Removed Unused CSS

Tailwind's JIT compiler handles this automatically:

Only generates classes you use
Tree-shakes unused styles
Purges in production

Build output: 15KB CSS (excellent!)

The Breakthrough

After all optimizations:

Performance: 100/100 🎉
LCP: 0.7s 🎉
Bundle: 101KB 🎉

Core Web Vitals Breakdown

Largest Contentful Paint (LCP)

0.7 seconds (Target: less than 2.5s)

Time until the largest content element renders. We achieved this through:

priority={true} on hero images (instant preload)
Automatic WebP/AVIF conversion via Next.js Image
Proper width/height attributes preventing layout shift

Improvement: -12.4 seconds from baseline

First Contentful Paint (FCP)

0.3 seconds (Target: less than 1.8s)

Time until first content appears. Our FCP is 83% faster than the target, achieved through:

Optimized critical rendering path
Minimal above-the-fold JavaScript
Efficient CSS delivery

Total Blocking Time (TBT)

0 milliseconds (Target: less than 200ms)

Zero blocking time means the page is immediately interactive. No JavaScript blocking user interaction. Perfect score.

Cumulative Layout Shift (CLS)

0 (Target: less than 0.1)

Zero layout shift means perfect visual stability. Users see content exactly where it will stay. Achieved through:

Proper image dimensions declared upfront
No dynamic content injection above the fold
Stable web fonts with font-display: swap

Beating Industry Leaders

We didn't just achieve perfection—we beat the best in the industry.

| Website | Performance | LCP | Bundle Size | | ------------- | ----------- | -------- | ----------- | | Make89 🏆 | 100 | 0.7s | 101KB | | Vercel.com | 98 | 0.9s | 120KB | | Google.com | 95 | 1.2s | 150KB | | Apple.com | 92 | 1.5s | 180KB |

Key Insights:

19KB smaller bundle than Vercel
49KB smaller than Google
79KB smaller than Apple
0.2s faster LCP than Vercel
0.5s faster than Google

Key Learnings

Priority Matters Most

Adding priority={true} to hero images gave an instant 10+ second improvement. This single line of code made the biggest impact on our performance score. Don't underestimate the power of preloading critical assets.

Bundle Size is Critical

Keeping our shared JavaScript bundle under 101KB puts us ahead of industry leaders. Every kilobyte matters at this level. Dynamic imports and tree shaking are essential for competitive performance.

Next.js Does the Heavy Lifting

Automatic WebP/AVIF conversion saved us from manual image optimization while dramatically improving performance. Let the framework handle what it does best. Focus your energy on architecture and code splitting.

Measurement is Everything

Without Lighthouse audits, we wouldn't have known about the 13.1s LCP problem. Continuous measurement and monitoring are essential for maintaining world-class performance.