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 your 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.
Good frontend performance is especially important for users with:
- older devices - because your service will load more quickly even on slower hardware
- poor mobile signal or data limits - because your service will use less data
- limited battery life - because your service will use less energy
You’ll also have good quality code that’s easy to maintain.
Use performance as a metric
Frontend performance isn’t 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 wouldn’t find testing solely on high-end laptops
- involving the whole team from start to finish
- 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: Analyse Network Performance
- Webpage Test
- Pagespeed Insights
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.
- Published by:
- Technology community (frontend development)
- Last update:
Guidance first published