How to test frontend performance
Websites that perform badly can frustrate users and drain their data plans and battery life. You can address this by making sure your service frontend is as fast and lightweight as possible.
This will also mean your service works well on a range of devices.
Why frontend performance matters
By focusing on frontend performance, you can improve both the speed and overall user experience of your service. This will allow users to do what they need to do quickly and efficiently, and you’ll have good quality code that’s easy to maintain.
It’s important that everyone can use government services. Improving frontend performance means you’re less likely to exclude:
- users who cannot afford the latest devices - because your service will load more quickly even on older, slower hardware
- users on limited data plans - because your service will use less data
- users who live in an area with a poor mobile signal
Services with optimised frontend performance are also better for the environment, because they use less power. And since users do not have to upgrade their devices as often to keep up with performance demands, fewer devices get thrown away.
Use performance as a metric
Optimising frontend performance is not just a task for developers. The whole service team should be:
- including frontend performance in service documentation
- prototyping and designing in the browser as soon as possible - this reveals performance and design issues early in the process
- testing on a wide range of devices - this helps you spot problems you would not find testing solely on high-end laptops
- building prototypes to show the impact of design decisions and highlight performance issues
Set a performance budget
A performance budget is where you set a limit for a specific feature of your page. This could be a specific load time, the number of requests a webpage makes, the size of the page, or a combination of these things.
Once a budget is set you need to follow it. Every time you modify a page or add to it, check to see if you’re still within your budget. If you’re outside of the budget you can fix this by:
- optimising a feature on your page
- removing a feature from your page
- not adding the new feature to your page
A performance budget provides a framework that the whole service team can work with. This will help to guide conversations around what features your team can add to a page. It will also allow teams to clearly explain decisions they make about the service frontend.
It’s important to set your performance budget as early as possible in the service design process. Applying a budget halfway through building a service will limit its effectiveness, as your team may then have to go back and fix pages designed before the budget was set.
How to run performance tests
There are free testing tools that you can use to test your service’s frontend performance:
- Google lighthouse
- Chrome DevTools: Analyse runtime performance
- Chrome DevTools: Inspect network activity
- Webpage Test
- Pagespeed Insights
- Sitespeed.io
You should measure performance throughout the whole development process. Setting performance metrics and integrating performance testing into your release process makes it easier to tackle performance issues as they occur.
A simple performance workflow for developers to follow is:
-
Benchmark the current performance using one or more of the tools available.
-
Optimise any bottlenecks you discover.
-
Quantify the performance difference and user experience before and after optimisation.
-
Repeat until your frontend reaches the required performance metrics.
- Last update:
-
Expanded explanation of why frontend performance is important.
-
Guidance first published