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.

Lvl 0 Do not create any performance issues

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.

Lvl 1 Keep your concept/design as simple as possible

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. ©

Lvl 2 Common resource/network techniques

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.

Optimizing images, audio, and video. Certainly, one of the major ways to get a significant performance boost is to reduce the amount of time that a content takes to load. Among the list of actions that you can do is to remove metadata from the content files, crop images, choose the right format, lazy load them on scroll or after the first meaningful paint etc.
Minify resources (html, css, js). Minification is the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser — e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. You can use different bundling tools to achieve that, one of the most popular today is webpack.
Lazy load 3d party libraries. In order to reduce Time to Interact split the JavaScript bundle to only send the code needed for the initial route. This minimizes the amount of script that needs to be parsed and compiled, which results in faster page load times. Popular module bundlers like webpack, Parcel, and Rollup allow you to split your bundles using dynamic imports.
Make sure all assets run over HTTP/2 (or HTTP/3). HTTP/2 is a great leap forward for HTTP. According to the recent reports, 65% of all requests are running over HTTP/2 already.
HTTP Caching. Caching eliminates both the network latency and the data costs that the transfer incurs. While HTTP caching is standardized per the IETF specifications, browsers may have multiple caches. Here is an excellent article about different caches. A Tale of Four Caches.
Tree shaking. Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has existed for some time. The concept has also found purchase in webpack.

Lvl 3 Advanced techniques

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.

PWA. A progressive web application is a type of application that uses web browser APIs. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. If your application meets baseline “installability requirements”, you can “extend” your web application to be PWA and get advantages of using service workers.
Client hints with Accept-CH header. Client hints describe one of two things: a user device and the network they are using to access your page. You can detect a poor network connection and choose what you want to send and how you want to send it. Combined with service workers, you can create incredibly fast sites that are available offline.
Save-Data header. Save data is also a client hint. But it’s pretty straight forward, it is either on or off. What you can achieve via Save-Data are limited only to what you can come up with. Among different scenarios what is possible are omitting non-essential web fonts, eliminating non-essential images or reducing image resolution.
SSR. Two main reasons to use SSR are better SEO and faster time-to-content. SSR getting more and more popular every year. In Google I/O 2019 a relatively new technique which is called “progressive hydration” was introduced that can be used to speed up server rendering. Unlike previous described methods you can start doing SSR from the beginning, and it’s quite easy to do. If you use React you can try out Next.js or Gatsby frameworks.

Summary

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.