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.

Using a dependency manager like RequireJS, which Magento natively incorporates, allows your scripts to load asynchronously, enabling users to see your application’s layout before it becomes fully 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 negatively impact performance. This redundancy creates 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 frequently these events are triggered on the same page, the greater the performance decrease. 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.