The Developer's Guide to Google Lighthouse Scores
Demystifying the green circles. Understand exactly how your score is calculated and how to fix the red.
Google Lighthouse is the industry standard tool for auditing Web Performance. However, achieving a perfect "100" can be incredibly frustrating if you don't understand how the underlying algorithm weights different metrics.
The Lighthouse Scoring Weighting (v10+)
Lighthouse calculates the final Performance score using a weighted average of five specific metrics. Understanding this weighting is the key to prioritizing your optimization efforts.
Largest Contentful Paint (LCP)
Measures loading performance. When does the biggest element render?
Total Blocking Time (TBT)
Measures interactivity. How long is the main thread blocked by long tasks?
Cumulative Layout Shift (CLS)
Measures visual stability. Does the page jump around while loading?
First Contentful Paint (FCP)
Measures when the very first piece of DOM content renders.
Speed Index (SI)
Measures how quickly the contents of a page are visibly populated.
The Takeaway: LCP, TBT, and CLS (the Core Web Vitals) account for 80% of your total score. If you ignore these and focus only on First Contentful Paint, you will never achieve a high score.
Lab Data vs. Field Data
It's crucial to understand the context in which your score is generated.
Lab Data (Lighthouse)
When you click "Generate Report" in Chrome DevTools or use PageSpeed Insights, you are generating Lab Data. The browser creates a simulated, controlled environment. For a mobile audit, it intentionally throttles your CPU (often 4x slowdown) and simulates a slow 4G network. This is great for debugging and finding specific bottlenecks.
Field Data (CrUX)
Field Data is collected by Google from actual Chrome users interacting with your site in the real world (the Chrome User Experience Report). This data is what Google actually uses for Search ranking signals. It accounts for real network speeds, real devices, and real caching.
How to Improve Your Score (Checklist)
1. Fixing Largest Contentful Paint (LCP)
LCP is often an image or a large block of text.
- Find the LCP Element: Look at the Lighthouse "Diagnostics" section. It will explicitly list the "Largest Contentful Paint element".
- Preload it: If it's an image, use
<link rel="preload" as="image" href="...">in your<head>. - Optimize it: Convert the image to WebP or AVIF and compress it. See our Image Optimization Guide.
- Don't Lazy Load it: Never use
loading="lazy"on your LCP image. It delays the download.
2. Fixing Total Blocking Time (TBT)
TBT correlates closely with the real-world INP metric. High TBT means your JavaScript is keeping the browser too busy to respond to user clicks.
- Code Split: Don't send a massive JS bundle. Read our JS Bundle Optimization Guide.
- Defer Third-Party Scripts: Ensure all analytics and ad scripts have the
deferorasyncattribute. - Remove Unused Code: Check for unused imports and ensure tree shaking is working.
3. Fixing Cumulative Layout Shift (CLS)
CLS is usually the easiest to fix, as it's almost always an HTML/CSS issue, not a complex JavaScript problem.
- Add Dimensions: Every
<img>and<iframe>must have explicitwidthandheightattributes. - Reserve Space: If you are fetching an ad or a dynamic widget via JS, create a placeholder
<div>with a setmin-heightso the layout doesn't jump when it loads. - Optimize Fonts: Use
font-display: swapto prevent invisible text. See our Font Loading Guide.
The Truth About 100/100
A score of 100 is a great vanity metric, but it should not be the sole focus of engineering. Moving from 95 to 100 often requires extreme micro-optimizations that offer diminishing returns in the real world. A score of 90+ (the "green" zone) indicates a fast, healthy site that will satisfy both users and search engines.
Frequently Asked Questions
How is the Lighthouse Performance score calculated?
The Lighthouse Performance score is a weighted average of several metrics. Currently (Lighthouse v10+), Largest Contentful Paint (LCP) and Total Blocking Time (TBT) are the most heavily weighted, making up over 50% of the total score.
Why is my Lighthouse score different on mobile vs desktop?
Lighthouse simulates a mid-tier mobile device (like a Moto G4) on a slow 4G network when running a mobile audit. Desktop audits simulate a fast wired connection and a powerful CPU. The slower CPU and network on mobile heavily penalize large JavaScript bundles and unoptimized images.
What is the difference between Lab Data and Field Data?
Lab Data (like a local Lighthouse run) is collected in a controlled, simulated environment. Field Data (like the Chrome User Experience Report) is collected from actual users in the real world on their actual devices, providing a true picture of real-world performance.