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