Top left The PSI score
(json.lighthouseResult.
categories.performance.
score) is determined by
running Lighthouse to
analyse lab data about the
page. See the FAQ (https://
netm.ag/2RY5sFZ) for
further detailsTop right The Lighthouse
report opportunities (eg
json.lighthouseResult.
audits [‘uses-rel-preload’],
json.lighthouseResult.
audits[‘offscreen-images’])
provide suggestions how
to improve the page’s
performance metricsMiddle Thumbnails from
the load of your site are
available as base64 images
via json.lighthouseResult.
audits[‘screenshot-
thumbnails’]. The final one
of pageload is available
via json.lighthouseResult.
audits[‘final-screenshot’]Above If available, PSI will
report field metric values
(json.loadingExperience.
metrics) for First Contentful
Paint and First Input Delay
data from the Chrome User
Experience Report for the
origin or page URLCould you share which metrics will be added to
Lighthouse and PageSpeed Insights this year?
For sure! There are two field metrics – Largest
Contentful Paint (LCP) (https://web.dev/lcp) and
Cumulative Layout Shift (CLS) (https://web.dev/
cls). Oh, and a new lab metric – Total Blocking
Time (TBT) (https://web.dev/tbt).
LCP reports the time when the largest content
element becomes visible in the viewport.Awesome! And it’s more accurate than First
Meaningful Paint?
Before LCP, First Meaningful Paint and Speed
Index captured the loading experience after theinitial paint but these metrics are complex and
often do not identify when the main content of
the page has loaded.
Research has shown that simply looking
at when the largest element on the page is
rendered better represents when the main
content of a page is loaded.You also mentioned Cumulative Layout Shift –
what does that track?
Cumulative Layout Shift measures visual
stability of a page and quantifies how often
users experience unexpected layout shifts.
Unexpected movement of content can befrustrating and this new metric helps you
address that problem by measuring how often
it occurs.
Additionally, Total Blocking Time measures
the total amount of time that transpires
between First Contentful Paint and Time
to Interactive where the main thread was
blocked for long enough in order to prevent
input responsiveness.
These are all coming soon!O Passed Audits indicates the audits that
have been passed by the page.
Optimising performance
There are several optimisations you
can apply to improve your Lighthouse/
PageSpeed Insights metrics.
To improve First Contentful Paint:
O Minify CSS and remove unused CSS
O Eliminate any render-blocking
resources
O Preconnect to required origins
O Reduce server response times
O Avoid multiple page redirects
O Avoid an excessive DOM size
O Ensure text remains visible during
the loading of web fonts (eg with
font-display)
Sending large JavaScript payloads
significantly impacts the speed of your
site, in particular how soon users can
interact with your pages. To improve time
to interactive for a site, you could:
O Minify and compress JavaScript
O Deliver only the JavaScript users need
when they need it (eg with code-
splitting)
O Reduce the impact of third-party code
(eg lazy-loading these resources)
O Reduce JavaScript execution time by
optimising costly long tasks
Above LCP marks the point in the page load timeline when
the page’s main content has likely loadedNew performance metrics
Elizabeth Sweeny, PM for Web Developer Insights (Chrome)Boost your PageSpeed Insights score