DEV Community

Cover image for 🚦 Understanding Lighthouse, Web Vitals & PageSpeed Reports
Sachin Maurya
Sachin Maurya

Posted on

🚦 Understanding Lighthouse, Web Vitals & PageSpeed Reports

#nextjs #performance #webdev #frontend

📘 Introduction

Your React or Next.js app might “look fast,” but is it actually fast for the user? Lighthouse and Web Vitals give you real insights into user experience performance — and tools like PageSpeed Insights help you catch and fix the bottlenecks.

In this post, I’ll break down what each Lighthouse metric means, how to read the PageSpeed report, and how to improve your scores with real-world React/Next.js fixes.

🚦 What is Lighthouse?

Lighthouse is an open-source tool by Google that audits:

  • Performance
  • Accessibility
  • Best Practices
  • SEO
  • PWA readiness

You can run it using:

We’re focusing on the Performance tab for this post.

📊 Key Metrics You Should Know (Web Vitals)

1. LCP (Largest Contentful Paint)

✅ Ideal: < 2.5s
When the largest visible element (like a hero image or H1) becomes visible.

🔧 Fix:

  • Use next/image with blur placeholders
  • Serve critical CSS inline
  • Lazy-load below-the-fold images

2. FID (First Input Delay)

✅ Ideal: < 100ms
Measures how fast your app responds to the first interaction.

🔧 Fix:

  • Reduce JS execution time
  • Break long tasks using requestIdleCallback
  • Move unnecessary JS to useEffect or dynamic imports

3. CLS (Cumulative Layout Shift)

✅ Ideal: < 0.1
Measures unexpected layout shifts during loading.

🔧 Fix:

  • Set width and height for all images/videos
  • Avoid inserting DOM elements without space reserved
  • Use font-display: swap

4. TBT (Total Blocking Time)

✅ Ideal: < 200ms
How much time your page is blocked from responding due to JS.

🔧 Fix:

  • Lazy load non-critical components
  • Use dynamic imports in Next.js
  • Avoid large synchronous functions

5. TTI (Time to Interactive)

When the page is fully interactive.

This metric depends on others like TBT, FID, and JS bundle size.

📥 How to Run Lighthouse

1. In Chrome DevTools

  • Right-click → Inspect → Lighthouse tab → Run audit
  • Choose Mobile/Desktop + what to test

2. Via PageSpeed Insights

  • Enter your deployed URL
  • Get Core Web Vitals + opportunities to improve

⚙️ Common React/Next.js Fixes to Boost Lighthouse Score

✅ Use next/image instead of <img>

  • Automatically optimized
  • Lazy loads by default
  • Uses blur placeholder 
import Image from 'next/image';

<Image src="/banner.png" width={800} height={400} placeholder="blur" />
Enter fullscreen mode Exit fullscreen mode

✅ Reduce JS Bundle Size

  • Use dynamic imports (next/dynamic)
  • Tree-shake unused libraries
  • Split large components 
const Settings = dynamic(() => import('./Settings'), { ssr: false });
Enter fullscreen mode Exit fullscreen mode

✅ Preload Fonts

  • Use next/font for automatic font optimization
  • Avoid layout shift on font load 
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });
Enter fullscreen mode Exit fullscreen mode

✅ Prioritize Visible Content

  • Load critical content first
  • Defer hidden sections
  • Use priority prop with next/image 
<Image src="/banner.jpg" priority ... />
Enter fullscreen mode Exit fullscreen mode

✅ Minimize Third-Party Scripts

  • Delay non-essential analytics
  • Load chat widgets after interaction
  • Offload non-critical logic with requestIdleCallback

📈 Track & Monitor Over Time

  • Use Lighthouse CI in GitHub Actions
  • Integrate Web Vitals reporting into production
  • Use tools like Vercel Analytics, Sentry, SpeedCurve, Calibre

🧠 Final Thoughts

You can’t improve what you don’t measure.
Lighthouse and Web Vitals are not just numbers — they reflect real user frustration (or joy).

Start with audits, fix one issue at a time, and your users (and Google rankings) will thank you.

Top comments (0)