How improve performance in a web application?

Hi, this is a common question in interviews so in this post I will write some points that we can handle to improve performance in our web application.

1.- Reduce the number of HTTP request

For example if your App only have a single hostname for your assets then your experience will be faster as result.  

2.- Reduce the number of images that your site need for the initial page loading and make sure that you compress your images to be smaller. 

For example try to compress the image to extensions like MozJPEG, Webp, Svgo.

In addition in your code use the srcset attribute for different screen pixel densities, like: 

<img srcset="
  examples/images/image-384.jpg 1x, 
  examples/images/image-768.jpg 2x
" alt="…">

And also use the “<picture> </picture>” element to allow you manually to add different sources types in that way the browser can select which image use:

3.- Caching your assets

We can implement a CDN PoP that will give us a benefit of faster load time when a user use out App.

Also using local caching is another strategic, this will allow the user to be available even if the user is offline. 

5.- Optimize your animations to avoid slow down in your Application, if you are using CSS animations you can use the property called “will-change:” this mean that animation will change once the animation was trigger. 

Also avoid to use setInterval or setTimeOut to animate your application, because this will consume user battery and your application will be slow. 

6.-  On-demand loading of assets

You can perform your App implementing On-demand or lazy loading of assets.

By Cristina Rojas.