Few tips for Improving JavaScript Performance

We think that JavaScript is a very important part of web developing today. But sometimes we do not think about simple tips that can increase the performance of the JS. In the post we try to overview some common issues of JS and also the simple solution that helps improve the performance of Magento site.

1. Decrease amount of DOM changes.

Every time you make DOM changes, group them up to prevent DOM rendering. If you’re making some style changes or adding an attribute, try to make all of your modifications at once rather than applying changes to each element individually.

2. Limit third-party library and components dependencies.

Third-party library and components add a lot to loading times, so strive to keep their use to a minimum, and avoid the library or components entirely if that’s possible. One way to reduce your dependency on external libraries is to use in-browser technology.

3. Use a dependency manager.

Also, a good way to use a dependency manager, like RequireJS, Magento natively uses the dependency manager to your load scripts letting the user see your application’s layout before it becomes functional. This can have a positive impact on conversions for first-time visitors.

4. Don’t use the same script twice or more.

Using the dependency manager makes it much easier to avoid duplicate of scripts. Duplicate scripts will have a bad impact on performance. Duplicate scripts will create unnecessary requests.

5. Carefully choose an event handler.

Some events like ‘mousemove’ or ‘resize’ are executed hundreds of times per second, pay special attention to any event handlers bound to those events. The more these events are executed on the same page the more they can decrease the performance. Also, pay attention if you have some requests being called by these events.

6. Favor native functions and constructs.

Rather than writing your own algorithms or relying too much on some solutions, take advantage of native functions and constructs as much as you can. JS provides huge lists with hundreds of native constructs for you to choose from.

7. Don’t use nested loops if not required.

Avoid unwanted and nested loops, such as for/while, in order to prevent from having to go through thousands of objects. Unwanted loops can cause the browser to work harder to process the codes and can slow down the page rendering.

8. Try not to use global variables.

The scripting engine needs to look through the scope when referencing global variables from within a function or another scope, the variable will be destroyed when the local scope is lost. If variables in global scope cannot persist through the lifetime of the script, the performance will be improved.
Please note that some old browsers do not support “let” variable.

9. Move JavaScript to the bottom of the page.

Moving the scripts to the bottom of the page will decrease the rendering progress, and increase performance. It will result in faster page loading.

10. Merge and minify JS Files.

The general Magento 2 settings to improve performance is merging and minifying JS Files from Admin. It allows a web page to be as light as possible for the fast loading.
Go to the backend, Stores -> Configuration -> Advanced -> Developer -> JavaScript Settings and set Merge JavaScript Files to Yes and set Minify JavaScript Files to Yes:

Magento 2 Merge JS files setting screenshot

All of the tips above give your JavaScript a very small performance boost, however, if implemented it together, users should notice significant improvement in how fast your websites and applications run. It may be difficult for you to remember all of these tips when working under a deadline, but the sooner you start implementing best practices, the less likely you are to encounter JavaScript performance problems later on.