THEBLOG  

How Fast Is Enough: Lighthouse Performance Scoring Simplified

The Website Speed Tiers

There are three tiers in Lighthouse Performance Scoring :

Red, Orange, and Green.

1_Lighthouse_Performance_Scoring_Image

Anything below 50 is trash, 50-80 is acceptable but needs improvement, and 90-100 is excellent.

Unfortunately, 80% of websites don’t even pass web vital scores. (That’s a stat).

@Author

So I should aim for Green? 🟢

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

You should ideally aim for a 100!

That’s because your score could fluctuate due to external factors. (Not inherently because of Lighthouse).

Aiming for a specific score isn’t reliable. Focus on optimizing your site as much as possible to achieve the highest score you can.

@Author

What are those external factors you mentioned?

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

External Factors Affecting Website Speed

Here are some things you may not be able to control:

  • Dynamic Pages. Sometimes your pages can change based on different conditions you’ve set. For example, based on location, logged-in/out users, user-generated content, and so on …
  • Bad Network. Your cheap wifi or data network can be unstable or just outright suck.
  • Distance. Requests between distant locations (e.g., US to France) can cause minor delays. Throttling helps mask these delays.
  • Web Server. Are you on a shared hosting plan? Then you are likely more susceptible to this.
  • Your Hardware. Yeah! Like your actual CPU … Running Lighthouse multiple times at once can also cause issues.
  • Browser Issues. This is unavoidable! Maybe test using different browsers to see any changes.

When you measure your website speed in PSI, underneath your score, you will see a list of potential sources of delay, or culprits.

This is found under the DIAGNOSTICStab.

2_Lighthouse_Performance_Scoring_Image

Google says that only METRICS directly affects your Lighthouse Performance score.

But these suggestions directly affect the METRICS, themselves.

@Author

What are METRICS? 🤔

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

There are currently five: FCP, SI, LCP, TBT, and CLS.

You can learn more about them here.

@Author

How are they measured?

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

How Website Speed Metrics Are Measured

They used to be measured using the Window: load event.

Although now, the Chrome team and W3C have come up with a new standard: The Lighthouse Performance Score is a weighted average of these core web vitals standards.

@Author

Weighted average?

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

A weighted average is like a regular average but gives more importance to some numbers than others.

Say you have three numbers: 2, 4, and 6.

If you just average them, you add them up (2 + 4 + 6 = 12) and divide by 3, which gives you 4.

But if each number has different importance (weight), you multiply each number by its weight before averaging. For example:

  • 2 – is worth 20% (0.2)
  • 4 – is worth 30% (0.3)
  • 6 – is worth 50% (0.5)

You calculate it like this:

  • ( 2 \times 0.2 = 0.4 )
  • ( 4 \times 0.3 = 1.2 )
  • ( 6 \times 0.5 = 3 )

Then you add these up (0.4 + 1.2 + 3 = 4.6). So, the weighted average is 4.6, which takes into account the different importance of each number.

@Author

So what are the actual weights?

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
  • First Contentful Paint = 10%
  • Speed Index = 10%
  • Largest Contentful Paint = 25%
  • Total Blocking Time = 30%
  • Cumulative Layout Shift = 25%

Check out the Lighthouse Scoring Calculator.

3_Lighthouse_Performance_Scoring_Image

PSI reports metrics over a 28-day period based on CrUX data.

@Author

Okay but how do the weights …

become a score out of 100?

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

Using a scoring curve that reflects real-world website performance data. (HTTPArchive data).

Two important points on this curve are:

25th Percentile. This represents average performance across websites. A metric value at this level translates to a score of 50.

8th Percentile. This represents good or better-than-average performance. A metric value at this level translates to a score of 90.

@Author

Why should I bother about all this?

@Reader

width=”20″ height=”20″ viewBox=”0 0 20 20″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>

Why Are Lighthouse Scores Important?

  • Website UX

    Higher Lighthouse scores typically correlate with faster-loading websites and smoother interactions. This directly enhances user experience by reducing waiting times and improving usability.
  • SEO Impact

    Search engines like Google consider website speed and performance as ranking factors. Websites with higher Lighthouse scores often rank better in search results, leading to increased visibility and organic traffic.
  • Conversion Rates

    Faster websites tend to have higher conversion rates. Improved performance means visitors are more likely to stay engaged, complete transactions, or interact positively with content.

FAQs

•••

Does Lighthouse consider server response times in its performance scoring?

Yes, Lighthouse measures metrics like Time to First Byte (TTFB), which reflects server response speed. Optimizing server response times can improve Lighthouse scores and overall website performance.

How does Lighthouse handle websites with dynamic content or single-page applications (SPAs)?

Lighthouse can evaluate performance for SPAs by simulating user interactions and measuring metrics like First Contentful Paint (FCP) and Time to Interactive (TTI) after initial load. Optimizing code and resource delivery for SPAs can enhance these metrics.

What impact does third-party content (e.g., ads, social widgets) have on Lighthouse scores?

Third-party content can significantly affect performance metrics like Cumulative Layout Shift (CLS) and Total Blocking Time (TBT). Implementing lazy loading and asynchronous loading techniques can mitigate these impacts and improve scores.

How does Lighthouse evaluate the impact of JavaScript frameworks (e.g., React, Vue.js) on performance?

Lighthouse measures metrics like Time to Interactive (TTI) to assess how quickly JavaScript frameworks render and make a page usable. Techniques like code splitting and lazy loading can optimize framework usage and improve scores.

Summary

We saw that Lighthouse measures and converts each raw metric value into a metric score from 0 to 100 based on where it falls on a log-normal scoring distribution derived from real website performance data.

To boost your performance score, use the Lighthouse scoring calculator to understand your target thresholds.

Learn more about Website Optimization.

Start Exploring the Trends
Page
Quick Tools
Page
Shopify Flow
Trend
Font-Size Clamp() Generator
Page
Website Speed Statistics
Stat
Web Design Manifesto
Page
Email Permutator
Page