PerfMaster

Lighthouse Performance Score

Understanding and optimizing your site's loading speed and responsiveness.

What is the Performance Score?

The Lighthouse Performance score is a weighted average of several metrics that measure how quickly your page loads and becomes interactive. A score of 90 or above is considered good, 50-89 needs improvement, and below 50 is poor.

Performance Score Thresholds

90-100

Good

50-89

Needs Improvement

0-49

Poor

How the Score is Calculated

The Performance score is a weighted combination of these metrics:

First Contentful Paint (FCP)
10%
Largest Contentful Paint (LCP)
25%
Total Blocking Time (TBT)*
30%
Cumulative Layout Shift (CLS)
25%
Speed Index
10%

*TBT is a lab metric that correlates with INP (the field metric). In lab tests, TBT is used; in real user monitoring, INP is the standard.

Key Performance Metrics Explained

First Contentful Paint (FCP)

Time until the first text or image is painted on screen.

Good: ≤ 1.8s | Needs Improvement: ≤ 3.0s | Poor: > 3.0s

Largest Contentful Paint (LCP)

Time until the largest content element is rendered in the viewport.

Good: ≤ 2.5s | Needs Improvement: ≤ 4.0s | Poor: > 4.0s

Total Blocking Time (TBT)

Sum of time periods between FCP and Time to Interactive when task length exceeds 50ms.

Good: ≤ 200ms | Needs Improvement: ≤ 600ms | Poor: > 600ms

Cumulative Layout Shift (CLS)

Measures visual stability by summing unexpected layout shift scores.

Good: ≤ 0.1 | Needs Improvement: ≤ 0.25 | Poor: > 0.25

Speed Index

Measures how quickly content is visually displayed during page load.

Good: ≤ 3.4s | Needs Improvement: ≤ 5.8s | Poor: > 5.8s

Top Performance Optimization Strategies

1. Optimize Images

Images are typically the largest assets on a page. Optimizing them has the biggest impact.

  • Use modern formats (WebP, AVIF)
  • Implement responsive images with srcset
  • Lazy load offscreen images
  • Preload LCP images with fetchpriority="high"
  • Use a CDN with automatic image optimization

2. Minimize JavaScript

JavaScript is the most expensive resource - it must be downloaded, parsed, and executed.

  • Code split and lazy load non-critical JavaScript
  • Remove unused code (tree shaking)
  • Defer non-critical scripts
  • Avoid large third-party libraries when possible
  • Use Web Workers for heavy computations

3. Optimize CSS Delivery

CSS blocks rendering until it's fully downloaded and parsed.

  • Inline critical CSS for above-the-fold content
  • Load non-critical CSS asynchronously
  • Remove unused CSS
  • Minify CSS files

4. Use Caching Effectively

Proper caching reduces server load and speeds up repeat visits.

  • Set long cache lifetimes for static assets
  • Use content hashing in filenames for cache busting
  • Implement a CDN for global distribution
  • Consider service workers for offline caching

5. Reduce Layout Shifts

Layout shifts frustrate users and hurt your CLS score.

  • Always include width/height on images and videos
  • Reserve space for ads and embeds
  • Use font-display: optional for web fonts
  • Avoid inserting content above existing content

Performance Diagnostics

Lighthouse provides detailed diagnostics to help identify performance issues:

Opportunities

Suggestions that could speed up page load, with estimated savings.

Diagnostics

Additional information about performance issues that don't directly affect the score.

Passed Audits

Best practices you're already following correctly.

Treemap

Visual breakdown of JavaScript bundle sizes and coverage.

Quick Wins for Performance

  1. Enable text compression (gzip/Brotli)
  2. Serve images in WebP format
  3. Add loading="lazy" to offscreen images
  4. Preconnect to required origins
  5. Use a CDN for static assets

Deep Dive into Core Web Vitals

LCPINPCLSFCPTTFB