You may have heard about the good things that Progressive Web App (PWA) techniques can do for your site. You might feel tempted to add PWA features without improving the foundation of your site's performance. But no amount of PWA features can fix problems with blocking JavaScript and bloated images.
Instead, your first step is to perform a site audit, an objective review of what works well, and where it can be improved.
Auditing your site or app helps you build a resilient, performant experience. Plus, highlight quick wins that can be implemented with minimal sign-off. An audit creates 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.
With only 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.
With only 30 minutes
Lighthouse is probably still the best place to start, but with more time you can also record results from other tools:
- Chrome DevTools Security panel: HTTPS usage.
- Chrome DevTools Network requests panel: load timings; resource sizes and number of requests for HTML, CSS, JavaScript, images, fonts and other files.
- Chrome Task Manager: If your site regularly uses significant CPU or more memory than other apps, you may need to fix memory leaks, task running, or resource loading problems.
- WebPagetest: caching, time to first byte, CDN usage.
- Pagespeed Insights: load performance, data cost and resource usage, including Chrome User Experience report data highlighting real-world performance statistics.
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.
Nothing beats real world testing. Make sure to test your site on devices and with connectivity that are representative of your users, and keep a record of your subjective experience.
If you're bewildered by tools
Take a look at our guide: How To Think About Speed Tools.
If nothing else, use Lighthouse to check for:
- HTTPS: every site should deliver all assets over HTTPS.
- Server settings: your web server or CDN should use compression correctly, use HTTP/2, and include appropriate headers to enable your browser to cache resources.
- Script elements that can be moved to the bottom of the page or given an async or defer attribute.
- JavaScript and libraries that can be removed.
- Unused code, such as CSS and JavaScript libraries.
- Image pixel size reduction opportunities.
- File format changes that would improve an image's size, such as changing a PNG to a JPG.
Audience, stakeholders, context
Priorities for refactoring depend on your audience, content and functionality. Who visits your site? Why and how do they use it? What's your performance budget?
Who are your stakeholders, and what are their priorities? This affects how 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.
Test multiple page types within your site. For single page apps, test the components, routes and UX flows, rather than just the first load experience.