net - UK (2020-04)

To help ensure that the metrics are

relevant to users, we frame them around

a few key questions:

O Is it happening? Did the navigation

start successfully? Has the server

responded?

O Is it useful? Has enough content

rendered that users can engage with it?

O Is it usable? Can users interact with the

page or is it busy?

O Is it delightful? Are the interactions

smooth and natural, free of lag?

There are a number of important

metrics to measure and Lighthouse and

PageSpeed Insights try to capture a few

key ones.

O First Contentful Paint marks the time

at which the first text or image is

painted

O Time to Interactive is the amount of

time it takes for the page to become

fully interactive (eg the user can click

and see a response)

O Speed Index shows how quickly the

contents of a page are visibly populated

And there are some exciting new metrics

that will be coming to our tools this year:

O Largest Contentful Paint (LCP):

measures the time from when the page

starts loading to when the largest text

block or image element is rendered on

the screen.

O Total Blocking Time (TBT): measures

the total amount of time between FCP

and TTI where the main thread was

blocked for long enough to prevent

input responsiveness.

Learn more about modern performance

metrics on https://web.dev/metrics.

Real-world field data

When PSI is given a URL, it will look it

up in the Chrome User Experience Report

(CrUX) dataset. If available, PSI reports

the First Contentful Paint (https://web.

dev/fcp) (FCP) and the First Input Delay

(https://web.dev/fid) (FID) metric data for

the origin and potentially the specific

page URL.

Classifying fast,

moderate and slow

PSI also classifies field data into three

buckets, describing experiences deemed

fast, moderate or slow. PSI sets the

following thresholds for fast/moderate/

slow, based on the CrUX dataset:

FCP:

Fast: 0 - 1,000ms

Medium: 1,000ms - 3,000ms

Slow: over 3,000ms

FID:

Fast: 0 - 100ms

Medium: 100ms - 300ms

Slow: over 300ms

Lab data

PSI uses Lighthouse to analyse the given

URL, generating a performance score

that estimates the page’s performance

on different metrics, including: First

Contentful Paint, Speed Index, Time to

Interactive and estimated input latency.

Each metric is labeled with an icon:

O A fast metric is indicated with a green

check mark

O Moderate is indicated with orange

informational circle

O Slow is indicated with a red warning

triangle

Audits

Lighthouse separates its audits into three

different sections:

O Opportunities provides suggestions

for how to improve the page’s

performance metrics. Each suggestion

in this section estimates how much

faster the page will load if the

improvement is implemented.

O Diagnostics provides additional

information about how a page adheres

to best practices for web development.

Right Lighthouse and

PageSpeed Insights

capture a few key metrics:

First Contentful Paint,

Speed Index and Time

to Interactive. Largest

Contentful Paint is being

added later this year

Far right PageSpeed

Insights compares real-

world field data on the First

Contentful Paint and the

First Input Delay

Bottom right Lighthouse

estimates the page’s

performance on different

metrics, including: First

Contentful Paint, Speed

Index, Time to Interactive

Bottom far right

Lighthouse’s audits

outline your opportunities

to improve metrics and

diagnostics on how a page

adheres to best practice

FEATURES
Boost your PageSpeed Insights score