Quick summary ↬
Let’s make 2021… fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016. Table Of Contents Getting Ready: Planning And Metrics Setting Realistic Goals Defining The Environment Assets Optimizations Build Optimizations Delivery Optimizations Networking, HTTP/2, HTTP/3 Testing And Monitoring Quick Wins Everything on one page Download The Checklist (PDF, Apple Pages, MS Word) Subscribe to our email newsletter to not miss the next guides. Testing And Monitoring Have you optimized your auditing workflow? It might not sound like a big deal, but having the right settings in place at your fingertips might save you quite a bit of time in testing. Consider using Tim Kadlec’s Alfred Workflow for WebPageTest for submitting a test to the public instance of WebPageTest. In fact, WebPageTest has many obscure features, so take the time to learn how to read a WebPageTest Waterfall View chart and how to read a WebPageTest Connection View chart to diagnose and resolve performance issues faster.
You could also
drive WebPageTest from a Google Spreadsheet and incorporate accessibility, performance and SEO scores into your Travis setup with Lighthouse CI or straight into Webpack.
Take a look at the recently released
AutoWebPerf, a modular tool that enables automatic gathering of performance data from multiple sources. For example, we could set a daily test on your critical pages to capture the field data from CrUX API and lab data from a Lighthouse report from PageSpeed Insights.
And if you need to debug something quickly but your build process seems to be remarkably slow, keep in mind that "
E.g. you might want to ensure that
no images above the fold are lazy loaded. You can customize the snippet for you needs, e.g. to highlight web fonts that aren't used, or detect icon fonts. A great little tool to ensure that mistakes are visible during debugging, or just to audit the current project very quickly.
/* Performance Diagnostics CSS */
/* via Harry Roberts. http://twitter.com/csswizardry/status/1346477682544951296 */
outline: 10px solid red;
Have you tested the impact on accessibility? When the browser starts to load a page, it builds a DOM, and if there is an assistive technology like a screen reader running, it also creates an accessibility tree. The screen reader then has to query the accessibility tree to retrieve the information and make it available to the user — sometimes by default, and sometimes on demand. And sometimes it takes time.
When talking about fast Time to Interactive, usually we mean an indicator of how
soon a user can interact with the page by clicking or tapping on links and buttons. The context is slightly different with screen readers. In that case, fast Time to Interactive means how much time passes by until the screen reader can announce navigation on a given page and a screen reader user can actually hit keyboard to interact.
Léonie Watson has given an and specifically the impact slow loading has on screen reader announcement delays. Screen readers are used to fast-paced announcements and quick navigation, and therefore might potentially be even less patient than sighted users.
Is continuous monitoring set up? Having a private instance of WebPagetest is always beneficial for quick and unlimited tests. However, a continuous monitoring tool — like Sitespeed, Calibre and SpeedCurve — with automatic alerts will give you a more detailed picture of your performance. Set your own user-timing marks to measure and monitor business-specific metrics. Also, consider adding automated performance regression alerts to monitor changes over time.
Look into using RUM-solutions to monitor changes in performance over time. For automated unit-test-alike load testing tools, you can use
k6 with its scripting API. Also, look into SpeedTracker, Lighthouse and Calibre. Table Of Contents Getting Ready: Planning And Metrics Setting Realistic Goals Defining The Environment Assets Optimizations Build Optimizations Delivery Optimizations Networking, HTTP/2, HTTP/3 Testing And Monitoring Quick Wins Everything on one page Download The Checklist (PDF, Apple Pages, MS Word) Subscribe to our email newsletter to not miss the next guides.