Frontend Architecture for Design Systems

Chapter 12. Performance Testing

The purpose of any testing is to protect users from a degraded or broken experience, and poor website performance is one of the quickest ways to give your users a degraded and broken experience. Therefore, performance testing, while not a test that points out system or visual regressions, is an important part of our testing arsenal.

Performance testing measures key metrics that affect a user’s ability to use your website, including page weight, number of requests, time to first byte (TTFB), load time, and scrolling performance.

The key to performance testing is to set a proper budget and stick to it. How you set the budget and stick to it will determine how effective the tests will be in your project.

Setting a Performance Budget

Creating a performance budget means setting target values for each key metric and then continually testing those metrics before each code merge or deployment. If any of the tests fail, the new feature will need to be adjusted, or some other feature may need to be removed.

As with financial budgets, very few people are really excited about the prospect of performance budgets. To most, a budget means spending less, getting less, having less fun, and most importantly...less! Less isn’t much fun in a world where we are always being told that we deserve more. As designers, we feel that our creativity is being stifled if we can’t toss around hi-res images and full-screen video with reckless abandon. As developers, we think that ...