8 Tips to Improve Your Frontend Performance

Photo by Mimi Thian on Unsplash

Performance improvement is one of the most common issues we face in any frontend application. In almost every project, at some point (usually at the late stage), you would encounter this issue. In this article, I’d like to address some techniques that I’ve used in many projects and hope these guidelines and patterns can help you in yours too.

There are some points I have already covered in my other article here, but apart from that, there are also other aspects that need to be looked into before you actually do the improvement.

Before any changes

First thing first, when we talk about performance tuning, we need to set up some measurement mechanism. You cannot rely on intuition as it can easily lead you in the wrong direction. What we think may be the cause behind performance issues usually doesn’t have any issues at all. Once you have the measurement, just as we have unit tests to cover all logic, generally it can lead to a right way — or at least you will notice when you’re on the wrong path.

Define your goal

Having your definition of your goal before the performance tuning project is critical. It determines if you’ll meet your goal or not. So the questions here should be — what does good performance mean? Reaching what point can we say there has been a substantial improvement? You cannot just say the faster the better.

For example, if the page loading time getting reduced by 20% means success, then every following step should aim to achieve this goal.

Setup measurement

Now we know what improvement means, we can look into ways for measurement and set up the baseline. It’s a step to implement the measurement defining step and you need to set up a performance test into the build pipeline, and visualise the DoD you defined above. You may not have to run them for each commit, but maybe a regular check (daily build) is needed to understand what's the gap between your goal and the current state.

For example, from a request sent from the browser to have something rendered on the screen takes 5 seconds, we can then set the 5 seconds as a baseline and all the changes your team made should not be slower than it. Just like…