A Marketer's Guide to Reading a Lighthouse Report

You've just run a Lighthouse report on your landing page. There's a big number at the top, a wall of colored bars, and a list of cryptic recommendations like "Eliminate render-blocking resources." What does it all mean, and what should you actually fix first?

This guide breaks down a Lighthouse report into plain English for marketers.

The Performance Score (The Big Number)

The number at the top (0-100) is your overall performance score. It's color-coded:

• 🟢 90-100: Good — your page is fast
• 🟠 50-89: Needs Improvement — there are meaningful optimizations to make
• 🔴 0-49: Poor — your page is slow and it's likely costing you conversions

What Marketers Should Know

• A score of 90+ is the goal, not 100
• The score can fluctuate 5-10 points between runs — that's normal
• Mobile and desktop scores are separate — always check mobile first
• This score does NOT directly affect Google rankings (field data does)

The Six Metrics

Below the score, you'll see six metrics. Here's what each one means in plain English:

First Contentful Paint (FCP)

"How long until users see something?"

This is when the first text or image appears on screen. A blank white page for 3+ seconds makes users think the page is broken.

🎯 Goal: Under 1.8 seconds

Largest Contentful Paint (LCP)

"How long until the main content is visible?"

Usually your hero image or headline. This is the moment users feel the page has "loaded."

🎯 Goal: Under 2.5 seconds

Total Blocking Time (TBT)

"How long is the page frozen and unresponsive?"

If users can see content but can't click buttons or scroll, TBT is the culprit. High TBT = frustrated users who leave.

🎯 Goal: Under 200 milliseconds

Cumulative Layout Shift (CLS)

"Did stuff jump around while loading?"

When images load without reserved space or ads push content down, users accidentally click the wrong thing. This destroys trust.

🎯 Goal: Under 0.1

Speed Index

"How quickly does the page LOOK loaded?"

Measures visual progression. A page that loads progressively feels faster than one that's blank for 3 seconds then renders everything.

🎯 Goal: Under 3.4 seconds

Time to Interactive (TTI)

"When can users actually use the page?"

The page might look loaded but still be processing JavaScript in the background. TTI marks when it's truly ready.

🎯 Goal: Under 3.8 seconds

The Diagnostics Section

Below the metrics, Lighthouse lists specific opportunities and diagnostics. This is where the actionable advice lives.

Opportunities (Estimated Savings)

These show potential time savings in seconds or milliseconds:

Opportunity	What It Means	Who Fixes It
Properly size images	Your images are larger than needed	Designer / Developer
Serve images in modern formats	Use WebP/AVIF instead of PNG/JPG	Developer
Eliminate render-blocking resources	CSS/JS files are delaying rendering	Developer
Reduce unused JavaScript	You're shipping code you don't use	Developer
Reduce unused CSS	Stylesheets contain rules not used on this page	Developer
Preload largest contentful paint image	The hero image should load sooner	Developer

What Marketers Should Do

1. Sort by estimated savings — fix the biggest time savings first
2. Screenshot the report and share with your dev team
3. Focus on image-related issues — these are often the easiest wins
4. Ask about third-party scripts — your analytics, chat widgets, and tracking pixels may be the problem

The Treemap (JavaScript Analysis)

Lighthouse includes a JavaScript treemap showing which scripts consume the most bytes. Look for:

• Large third-party bundles (analytics, chat, ads)
• Unused JavaScript (code that's loaded but never executed)
• Duplicate libraries (jQuery loaded twice, etc.)

How to Prioritize Fixes

As a marketer, you can't fix everything at once. Here's a priority framework:

Priority 1: LCP (Revenue Impact)

LCP directly affects conversion rates. Every 100ms improvement in LCP can lift conversions by 1-2%. Focus on:

• Hero image optimization
• Server response time
• Removing render-blocking resources

Priority 2: CLS (Trust Impact)

Layout shifts make your brand look unprofessional. Focus on:

• Adding image dimensions
• Reserving space for ads
• Fixing font loading

Priority 3: TBT (Engagement Impact)

Blocking time prevents users from interacting with CTAs. Focus on:

• Deferring third-party scripts
• Removing unused JavaScript
• Code splitting

Running Your Own Lighthouse Report

In Chrome

1. Navigate to your page
2. Open DevTools (F12 or right-click → Inspect)
3. Click the "Lighthouse" tab
4. Select "Mobile" and "Performance"
5. Click "Analyze page load"

Via PageSpeed Insights

1. Go to pagespeed.web.dev
2. Enter your URL
3. Review both mobile and desktop results

Pro Tip

Run the audit 3 times and take the median score to account for variability.

Beyond Manual Checks

Running Lighthouse manually is great for spot checks, but performance changes with every deployment. BadPageSpeed runs automated Lighthouse audits on your pages and tracks scores over time.

Automate your Lighthouse audits →