DEV Community

Cover image for Frontend Performance Optimization
Nation Shakya
Nation Shakya

Posted on

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.

Caching Diagram

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

Top comments (6)

Collapse
 
tomavelev profile image
Toma

The work for performance on the web feels endlessly lost because of the framework-ization, 3rd party integration, application-ization of the front end.

Nevertheless, here are some tips from me:

  • With service worker, the rarely changed resources could go offline, Even without the not- modified http call,
  • I rarely see someone use progressive PNG (Even I haven't used them a lot).
Collapse
 
jkhaui profile image
Jordy Lee

Well I somewhat disagree, frameworks like React have all these optimisations baked into the core
Of course a framework will never be as fast as vanilla is, but the trade-off is it wouldn't be feasible to create a lot of modern web apps without a framework

Collapse
 
tomavelev profile image
Toma

While you have few dependencies, the optimizations will/may work. I agree - there are tons of advantages about using a framework, beyond speed. If we still code long enough, will may see performance with the help of - for example - WebAssembly embedded in the cores of frameworks - that is unthinkable done vanilla.

Collapse
 
beckafly profile image
Alex Becker

I believe minification and compression are not interchangeable terms, nor are they mutually exclusive, you should use both:) Also concatenation will help to reduce those costly HTTP requests. And it's not just the DNS that makes HTTP requests so painful, it's the actual download time... Also cashing is only effective the second time and on that the user visits the website, first visit will take exactly the same amount of time whether you have cashing enabled or not. And last but not least, image tag will make sure you only load images that you need for the particular viewport size.

Collapse
 
prajwolgit profile image
Prajwol-git

very nice and helpful

Collapse
 
sumeddhh profile image
Sumedh Bajracharya

Nice!