net - UK (2020-04)

(Antfer) #1

provide more detailed guidance on how to
implement optimisations (eg WordPress).
PSI’s API responses also support this
so if you’re testing a WordPress site,
these strings are included (eg a demo
URL for wordpress.org would be https://
http://www.googleapis.com/pagespeedonline/v5/
runPagespeed?url=https://wordpress.org).
The PSI tool also supports fetching PSI
API data and rendering it with the official
Lighthouse Viewer (https://googlechrome.
github.io/lighthouse/viewer). Pass ?psiurl
as a parameter (eg https://googlechrome.
github.io/lighthouse/viewer/?psiurl=https://
web.dev&category=accessibility&category=p
erformance&category=pwa&category=best-
practices&category=seo) in order to see this
in action.
One of the tools we built on top
of PSI is the psi (https://github.com/
GoogleChromeLabs/psi) Node module,
offering convenient performance
reporting in your build process.


const psi = require(‘psi’);
(async () => {
// Get the PageSpeed Insights report

const { data } = await psi(‘https://web.dev’);
console.log(‘Speed score:’, data.
lighthouseResult.categories.performance.
score);
// Output a formatted report to the terminal
await psi.output(‘https://theverge.com’);
console.log(‘Done’);
})();



You can also use Google Sheets (https://
sheets.google.com) and a cron job to
automate monitoring multiple URLs
(eg comp et itors) b y reg u l a rly pi ng i ng
the PSI API. A handy guide and sheet
you can copy are available (https://
netm.ag/2Oi2BFv).



Third-party services
Continuous monitoring services such
as SpeedCurve (https://speedcurve.com),
Calibre (https://calibreapp.com) or Treo
(https://treo.sh) leverage tools like
Lighthouse and PageSpeed Insights
under the hood. If you’d rather have a
service take care of regularly checking
your performance scores and send you
reports versus rolling your own, consider
checking them out. Ultimately, use
whichever solution makes the most
sense for your site!



Get fast, stay fast!
When it comes to user experience, speed
matters. It’s vital to understand the
different insights offered by performance
metrics, then establish the ones that
are important to your user experience.
Tools l i ke Light house and PageSpeed
Insights can measure your experience
and highlight opportunities for where to
improve. They can be a helpful part of
your site’s toolbox for getting fast and
staying fast.


Common

myths about

performance

User experience can be captured with a
single metric



Good user experience is not captured
by a single point in time. It’s composed
of a series of key milestones in your
users’ journey. Understand the different
metrics and track the ones that are
important to your users’ experience.



User experience can be captured with a
single ‘representative user’



Real-world performance is highly
variable due to differences in users’
devices, network connections and
other factors. Calibrate your lab and
development environment to test a
variety of such different conditions.



My website loads fast for me, so it
should load fast for my users



The devices and networks that
developers test load performance on are
often much faster than what your users
actually experience. Use field data to
understand what devices and networks
your users are on and ensure you
appropriately mirror those conditions
when you test performance.


Top right You can use Google Sheets and a cron job to
monitor multiple URLs by regularly pinging the PSI API

Above Lighthouse (and PSI’s API) are starting to support
stack-specific recommendations that offer more detailed
guidance on implementing optimisations (eg WordPress)

Top left To try out the PSI API, check out this Glitch demo
(https://netm.ag/2tsv7Nq) using Lighthouse and CrUX data



Learn more common myths about performance
in Google’s How to Think About Speed Tools guide
(https://bit.ly/speed-tools-how)



Boost your PageSpeed Insights score
Free download pdf