22
4 Levels of Boosting your (Our) Front-End Performance
At ease, Comrade. Congratulations, you finally finished the MVP, and the Party is satisfied for a while. Time goes, the service grows, each day becoming slower, and sluggish rendering treacherously giving you away. And that means it is time to take action. You still have your requests to the DB that take 5 seconds, but that is another story. Here are 4 levels of improving UI performance. I will not go into detail telling you too much about each technique, as this is just a quick recap of existing approaches and an attempt to categorize it.

Ahaha, nice joke. Nope, that is not a joke, Comrade. While it is obvious, it’s still an important step to always keep in mind. In order to improve UI performance, not to fix it, stick with best performance practices/recipes for your framework and be mindful of what you are doing.
Client-side performance also can be leveraged via UI/UX design. Graphical content can easily account for 60%-85% of a typical website’s total bandwidth.
Remove irrelevant content. Fonts, that number should be no more than 3, unnecessary heavy images, remove it all. Give your site some air, make it fluffy and light. If you sell propane and propane accessories and think that a super flame animation on the first page will attract more customers, the answer is NO. Unless you really need it, like those art websites, which plenty of them can be found on awwwards.com, that my PC can barely load.!

Choose the right things to animate. Bad animations can introduce an extra idle time or add flicking things on the screen which is always annoying. As an example, Google suggest removing ease-out animation in dialogs to make it quicker to dismiss. While it is not an issue you will give an impression of a minimum response time and will provide a better user experience to the end user. While it can seem like minor things, it is the little details that are vital and little things make big things happen. ©
It is not a secret that the bottleneck of the fastest web is network and resources. At this level you can boost website performance using techniques that can be applied to your application straight away. There are plenty of them and I’m sure you know most of them, so I will just list some of the most popular approaches.
While the above methods basically are “must have”, there are some other advanced techniques that you might want to use to get your application to the next level. It’s definitely something that you shouldn’t start with, but rather keep in mind and foresee where your application can grow up.
Clearly, there are more methods exist, like prefetching resources, optimizing critical path, making scripts load asynchronously, or other techniques specifically for your framework. Similarly, there are some UI tricks that can create an impression of a small response time. For instance, Optimistic UI. Optimistic UI is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. As an example, “like” button in popular social medias.
Essentially, you should start from measuring performance and gathering metrics. I deliberately did not put anything about it here, as it’s quite a broad topic and should be discussed separately. I hope it will help you to make a substantial contribution to the Party and set yourself apart from the rest, good luck.
22