O Preload key scripts, especially if your
site is a single-page applicationMany of these optimisations can also
improve your Speed Index. Get more
performance tips for Lighthouse /
PageSpeed scores at https://web.dev/fast.PageSpeed Insights API
Related to PSI is the PageSpeed Insights
API (https://netm.ag/31eoRVT), which
provides free access to performance
monitoring for web pages and returns
data with suggestions for how to
improve. The V5 API includes lab data
from Lighthouse (https://netm.ag/2Tq1nJ1)
and real-world data from the Chrome
User Experience Report (CrUX).```js
const url = ‘https://wordpress.org’;
const apiCall = `https://www.
googleapis.com/pagespeedonline/v5/
runPagespeed?url=${url}`;
const response = await fetch(apiCall);
const json = await response.json();Teams use the API to build dashboards,
custom reports and custom integrations
with other user-experience measurement
tools. The responses (https://
netm.ag/2UqHdSy) from the API could be
used to monitor and graph any of the data
from the PSI tool we covered earlier.
It’s possible to build highly-customised
reports using PSI data. For example, Vrbo,
a vacation rentals site, graphs real-world
data from the PSI API to track long-termperformance trends (https://youtu.be/
iaWLXf1FgI0?t=650) to ensure its speed
remains competitive within the travel
industry.
Web.dev Measure (https://web.dev/
measure) uses the same back end as
PSI and uses this data for historical
measurement over time.
It’s helpful to become familiar with the
structure of the PSI API response (https://
netm.ag/2u6fxHH). There’s metrics info
available for lab and field / real-world:```js
const url = ‘https://wordpress.org’;
const apiCall = `https://www.
googleapis.com/pagespeedonline/v5/
runPagespeed?url=${url}`;
fetch(apiCall)
.then(response => response.json())
.then(json => {
// Real-world metrics
const cruxMetrics = {
“First Contentful Paint”: json.
loadingExperience.metrics.FIRST_
CONTENTFUL_PAINT_MS.category,
“First Input Delay”: json.loadingExperience.
metrics.FIRST_INPUT_DELAY_MS.category
};
// Lab metrics
const lighthouse = json.lighthouseResult;
const lighthouseMetrics = {
‘First Contentful Paint’: lighthouse.
audits[‘first-contentful-paint’].displayValue,
‘Speed Index’: lighthouse.audits[‘speed-
index’].displayValue,
‘Time To Interactive’: lighthouse.
audits[‘interactive’].displayValue,};
// ...
});Responses from the PSI API are focused
on performance data. That said, you
can supply the ?category argument to
specify any additional Lighthouse audit
categories you would like data for.```sh
curl -i “https://www.googleapis.
com/pagespeedonline/v5/
runPagespeed?url=https://web.dev&ca
tegory=pwa&category=performance&c
ategory=accessibility&category=best-
practices&category=seo”You can a lso supply a locale or strategy
argument (desktop or mobile – which
simulates a page load on a median-class
device – for example a Moto G4 – on a
mobile network).
Lighthouse is starting to support
Stack Packs (https://netm.ag/31oe8bL),
stack-specific recommendations thatTop The PageSpeed Insights Tool also supports fetching PSI
API data and rendering it with the official Lighthouse Viewer
Above web.dev Measure uses the same back end as PSI and
uses this data for historical measurement over timeAbove The output of psi looks a little like this when used as a
CLI with PageSpeed Insights V5FEATURES
Boost your PageSpeed Insights score