Auditing Performance

Why and what?

You've probably heard about all the good things that Progressive Web App techniques can do for your
site. You might feel tempted to jump straight in and add PWA features. That's possible, but you'll
be much better off if you get 'PWA-ready' first.

No amount of PWA magic will fix problems such as blocking JavaScript or bloated images. PWAs need a
solid foundation.

So how do you check the health of your website? The first step is to do a site audit: an objective
review of what works well and where (and how) there could be improvement.

Auditing your site or app will help you build a resilient, performant experience — and highlight
quick wins that can be implemented with minimal sign-off. An audit also gives you a baseline for
data-driven development. Did a change make things better? How does your site compare with
competitors? You get metrics to prioritize effort, and concrete evidence to brag about once you've
made improvements.

If you only have 5 minutes...

Run Lighthouse on your homepage and save the
report data. You get a quantified
baseline and a todo list for improvements to performance, accessibility, security and SEO.

If you only have 30 minutes...

Lighthouse is probably still the best place to start, but with a little
more time you can also record results from other tools:

Chrome Task Manager: if your site constantly uses significant CPU or more memory than other apps
then you may need to fix memory leaks, task running or resource loading problems. Make sure to test
your site on devices representative of your users.

WebPagetest: performance for different locations
and connection types, caching, time to first byte, CDN usage.

Make sure to test your website as a
first-time user sees it. Open the site an Incognito (Private) Window, or use browser tools to
disable caching and clear storage. This ensures that every asset is retrieved from the network and not
from a local cache, so you get an accurate picture of first-load performance.

WebPagetest is a free service that runs performance tests from multiple locations globally using real browsers with real connections, to provide detailed metrics and optimization advice.

Who are your stakeholders, and what are their priorities? This will affect the way you structure,
present and share your audit data.

If you can't audit your whole site, check page analytics to get an idea of where to focus. High
bounce rates, low time-on-page and unexpected exit pages can be a good indicator of where to begin.
Likewise business metrics such as hosting costs, ad clicks and conversions. Get an overview from
stakeholders of what data matters to them.

Test, record, fix, repeat

Record the state of your site before making any changes, to uncover problems and
set a starting point for improvements or regressions. That gives you data to justify and reward
development effort.

Make sure to test multiple page types within your site — not just the home page. For single page
apps, test different components, routes and UX flows, and not just the first load experience.