The scoring, explained

How the Lighthouse score is actually calculated

Every explanation I found was either three sentences or the source code. This is the middle. Which five things carry marks, how a timing becomes points, and why fixing a slow page often wins you nothing.

Written for people who have a report open and want to know what to do about it. No prior knowledge assumed.

What Lighthouse actually is

Lighthouse is a program that loads your page and times what happens. That is genuinely all it is.

1. Opens your page on a pretend slow phone
2. On a pretend slow connection
3. Writes down how long various things took
4. Turns those timings into a score out of 100
5. Separately runs some yes-or-no checks about accessibility, security and search

It is built into Chrome. Open DevTools, click the Lighthouse tab, press the button. Same program.

What PageSpeed Insights adds

PageSpeed Insights, usually shortened to PSI, is a website that runs Lighthouse for you on Google's machines instead of yours. So the bottom half of a PSI report is a Lighthouse report. Same tool, same score.

But it adds one thing Lighthouse cannot do alone.

PSI also shows what real visitors to your site actually experienced.

Google quietly collects timings from real Chrome users. If enough people visit your site, Google has a record of how it performed for them, and PSI shows that at the top.

PageSpeed Insights
├── Real visitor data        only PSI has this. Google's records.
└── Lighthouse test result   the same thing you can run yourself

If your site is small, that top section says No data. Not enough traffic for Google to have collected anything.

The two numbers everyone confuses

This is the biggest source of confusion in the whole subject, so it comes early.

The score out of 100 is a diagnostic. It exists to show you problems, on purpose, on a slow phone. It is not your grade.

The real visitor data is the grade. That is what affects ranking, and it takes about a month to react to anything you do.

You can score 40 in Lighthouse and still pass Core Web Vitals, if your real visitors are all on fast phones. And the reverse.

The four scores do not add up

A report gives you four numbers.

60   Performance
79   Accessibility
92   Best Practices
100  SEO

These are four separate reports. They do not add up, they do not average, and there is no overall score. Getting 100 on SEO says nothing about your speed.

They also work in two completely different ways. Performance measures things: how many seconds did this take, with partial credit for being a bit slow. The other three are checklists: did you put alt text on your images, yes or no, no partial credit.

The rest of this is about Performance, because that is the one you will spend your life on.

Performance is five numbers added up

One hundred points, split between five timings. Nothing else in the section is scored.

What each one means

How long the page was frozen. 30 points. While a page loads, JavaScript runs, and while JavaScript runs the page cannot respond to you. Tap a button and nothing happens. This measures the total time the page was unresponsive, in milliseconds.

How long until the biggest thing appeared. 25 points. Usually a large image or heading. If it is missing, the page looks broken to a visitor.

How much the page jumped about. 25 points. You go to tap a button, an image loads above it, everything shifts down, you tap the wrong thing. Not a time. A number where 0 means nothing moved.

How long until anything appeared. 10 points. How long the visitor stared at a blank screen before anything showed up.

How quickly the page filled in. 10 points. Not a single moment, but how steadily the page filled up.

How a timing turns into points

Two steps, and this is the part that trips everyone up.

Step one: your timing becomes a percentage

Every one of the five has its own scale, built from two reference points taken from what real websites actually manage.

Read the first row as: a page frozen for 200ms scores 90%, a page frozen for 600ms scores 50%. Roughly, the 90% point is what a good site manages and the 50% point is average.

Step two: percentage times points available

your timing  ->  look it up on its scale  ->  a percentage
             ->  times the points available  ->  your points

So a page frozen for 320ms sits between 200 and 600, closer to 200. On the scale that comes out at 77%. And 77% of 30 points is 23 points.

Do that five times, add them up, and that is your score. Nothing more clever than that.

The five scales in full

Worked out by running Lighthouse's own scoring function. Find your number in the left column and read across.

How long the page was frozen, out of 30

Until the biggest thing appeared, out of 25

How much the page jumped about, out of 25

Until anything appeared, out of 10

How quickly it filled in, out of 10

These are the phone scales. Desktop is stricter, because desktops are faster. Lighthouse picks the right one for you.

One whole report, worked out

A real site, on a phone, on a slow connection. Here is what it measured.

frozen for               320ms
biggest thing appeared    7.3s
jumped about                 0
anything appeared         2.9s
filled in                 5.4s

Each timing looked up on its own scale:

23 + 1 + 25 + 5 + 6  =  60

Performance: 60 out of 100

At the top of every report Lighthouse prints this as FCP +5 LCP +1 TBT +23 CLS +25 SI +6. Those plus numbers are the last column of that table. Add them up and you have your score.

Where the 40 missing points went

24 missing   biggest thing appeared
 7 missing   page frozen
 5 missing   anything appeared
 4 missing   filled in
 0 missing   jumping

24 of the 40 are in one place. Everything else put together is 16. That is the number worth acting on, and no report ranks them for you like this.

Why the scale bends, and why small fixes win nothing

The scales are not straight lines. Look at the biggest-thing scale again.

7.3s  ->   1 point
6.0s  ->   3 points     1.3 seconds faster won 2 points
4.0s  ->  12 points     2.0 seconds faster won 9 points
2.5s  ->  22 points     1.5 seconds faster won 10 points

The same improvement is worth wildly different amounts depending on where you start. At the slow end the scale is nearly flat. Shaving a second off a seven second page wins almost nothing. The points are all bunched at the fast end.

Two things follow from that.

The 44 items that score nothing

The Performance section lists 49 items. Only 5 are scored, the five timings. The other 44 are worth zero points. Including all of these:

Render-blocking requests      save 1,150 ms      0 points
Improve image delivery        save   149 KiB     0 points
Reduce unused JavaScript      save    98 KiB     0 points
Reduce unused CSS             save    32 KiB     0 points
Use efficient cache lifetimes save     2 KiB     0 points

They are not useless. They are the advice, and fixing one often speeds up one of the five that count. But that only happens sometimes, and nothing in the report tells you which.

The trap, worked through

The report above says improve image delivery, save 149 KiB. Images mostly affect how long the biggest thing takes to appear. On this page that measurement was already at 7.3 seconds, earning 1 point of 25.

Saving 149 KiB might take it from 7.3s to 6.8s. Look that up on the scale and it is worth about one extra point.

So you would spend an afternoon compressing images, watch the score go from 60 to 61, and reasonably conclude the tool is lying to you. It is not. You were on the flat part of the curve and nothing said so.

The short version

1. PSI is Lighthouse plus real visitor data. Nothing more.
2. The +23 +1 +25 +5 +6 at the top of a report is your score broken down. Add them up.
3. Only 5 of the 49 items are scored. The other 44 are suggestions.
4. The scale is flat at the slow end. A small improvement to a very slow timing is worth nothing.
5. The score is a lab test. Google ranks you on real visitor data, a different number that takes a month to react.

Where these numbers came from

Nothing here is from memory. Run these against your own report:

# points for each timing
jq -r '.categories.performance.auditRefs[]
       | select(.weight>0) | "\(.weight)  \(.id)"' report.json

# how many items are shown versus scored
jq -r '.categories.performance.auditRefs
       | "shown: \(length), scored: \(map(select(.weight>0))|length)"' report.json

# the scale reference points, from Lighthouse's own source
grep -A6 "defaultOptions" \
  node_modules/lighthouse/core/audits/metrics/largest-contentful-paint.js