Frontend Performance Optimization

This week I spent some time on researching performance optimization in frontend and to be honest, I was a little overwhelmed with the amount of results and methods there were to achieve the optimum performance boost on frontend. I have listed down some of the best practices out there where developers use to achieve the most performance out of their websites/webapps.

Reduce HTTP Requests

One of the major point to increase the frontend performance is to minimize the number of DNS or Domain Name System lookups in your website.

When you type in a website hostname in your browser, for example: www.xyz-website.com, the browser takes that hostname and maps it to its corresponding IP address in the DNS. It takes around 20 to 120ms for the browser to complete the lookup and receive the response back from the DNS resolver. The time taken doesn't look that bad but when the assets used in the website depend on multiple hosts in a different domain then the time adds and multiplies and hence increasing the load time of the website.

If your website only have to resolve a single hostname to load the required asset then the client experience will be a lot faster and efficient. Its for this reason CDN or Content Delivery Network are very popular among developers.

Images Optimization

Images are one of the most resource-heavy elements of a webpage and are responsible for slowing down the load times in many occasions.

Optimizing the images for your website or applications through lossy or lossless compression will definitely produce faster load times, reduce load on the origin server and result in better user experience. One other way to achieve better load time performance is through Lazy Loading the images. It is a technique where only the images available on the viewport of the user is loaded first whereas the ones not seen are not loaded. Once the not loaded images get near the border of the viewport, the image is loaded.

This is a blog I found in the frontend weekly of Medium for image optimization.

Cache Optimization

Caching is basically storing the copies of your files in the user's local cache (or you could say local drives) so that the contents can be easily accessed.

HTTP Cache Headers are crucial in cache management in a browser as its policies include how a resource is cached, where it's cached and its maximum age before expiring.

File Minification or Compression

We know that your website is built from a collection of files that consists of HTML, CSS, JavaScript and other bunch of code files. Hence if the website ends up more complex, the larger and heavier will the code files be ultimately resulting in longer load times.

Gzip is a very popular file compression choice among many as it can shrink a code file by as much as 60 or 80%. When the files are shrunk to a fraction of their original size, the frontend performance on the site increases drastically.

Optimize Animations

To make sure you minimize as much JANK with your web animations and make your website frontend experience as smooth as butter, you could use the CSS property will-change to optimize the animations by letting the browser know which properties and elements are about to be changed hence potentially increasing the performance of that animation.

Here is the required documentation on this particular CSS property which might come in handy. However, the documentation recommends that the property to be used as a last resort for existing performance issues.

Bonus

There is actually an entire free course in Udacity on Website Performance Optimization by Google. This course focuses on Chrome Developer Tools and how to exploit its uses to benefit the web performance in both mobile and desktop.

Thats all for today.
Stay Safe and Happy Coding!!