Scoring 100 on Lighthouse (Performance focused)

“Why aim for 100? Because Google loves fast websites more than devs love dark mode.”

If you also stared at a Lighthouse score of 28 and thought “what kind of shit I had written”, this post is for you.

🤔 What Even Is Lighthouse?

Lighthouse is Google’s brutally honest friend. It audits your site for:

Performance
SEO
Accessibility
Best Practices
PWA readiness

⚙️ How to Run Lighthouse

Chrome DevTools Right-click → Inspect → Lighthouse tab → Click “Analyze”

⚡ Performance: How to Reach 100 Without Losing Mind

1. Code Splitting

Remove unused libraries/imports.
Split JS using React.lazy() or next/dynamic
Avoid unnecessary animations on load
Implement session based caching for less frquently updated data.

// import specific parts

// bad practice- import radixui from "radix-ui"

// good practice
import Switch from "@radixui/switch"

For manual treeshaking in nextjs-

 ANALYZE=true npm run build

Bigger colored boxes increase your bundle size and oftenly impact performance also. To optimize dynamically import them.

2. Optimize Apis

Reduce the size of response by returning only required fields(or further more reducing its size by gziping it)
Implementing caching for less freuently updated data.
Avoid Shitty Orms like prisma, typeorm etc. As they make your queries slower with heavy engines, slower query execution speed, lack of proper joins. (I had started using drizzle for migrations and kysely as sql query builder, responses are 10x faster as compared to prisma and 3-4x faster to typeorm).

2. 🖼️ Optimize Your Largest Contentful Paint (LCP)

LCP = how fast your main content loads (target: < 2.5s)

Compress images (.webp > .jpg)
Lazy load offscreen images
Serve static assets from a CDN

LCP is like your first impression on a date — don’t show up blurry or late.

3. ⏱️ Use `defer` and Lazy Load Smartly

<script defer src="/scripts/main.js"></script>
<img loading="lazy" src="/images/offscreen.jpg" />

“Don’t serve dessert before the main course.” 🍰

4. 🥇 Preload Fonts & Key Assets

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

🔍 SEO: Make Googlebot Fall in Love With You

1. 🎯 Proper `<title>` & `<meta description>`

Each page should have proper title and meta description.

“Googlebot trying to index your page with no title tag…”

2. 🧩 Use Semantic HTML

Use proper tags like <header>, <nav>, <main>, <article>, <footer>.

Analogy:
Semantic tags are like labeled boxes during moving — they help Googlebot know what’s inside.

3. 🧭 Descriptive Link Text

Bad:

<a href="/more">Click here</a>

Good:

<a href="/about-us">Learn more about our team</a>

“Click here” links are the SEO version of mystery boxes.

4. 📱 Mobile Friendliness

Make sure your layout adapts well to all screen sizes.

🧰 Bonus Tools to Save Your Sanity

🎨 Squoosh — Compress images locally
🧼 PurgeCSS — Remove unused CSS
🕵️ PageSpeed Insights
🔡 Glyphhanger — Font subset tool
🚀 Cloudflare Pages — Free CDN hosting for static sites

🏁 Final Thoughts

Getting a 100 Lighthouse score isn’t just for bragging rights — it helps with:

⚡ Blazing fast user experience
🔍 Higher SEO rankings
📈 Better engagement + conversions

“A slow site is like a waiter who brings water after dessert. Nobody comes back.”

Manujdixit @manujdixit