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.
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. Debouncing and Throttling.
These techniques are crucial for optimizing event handlers, especially in cases of rapid-fire events like scrolling or resizing. Debouncing delays the execution of a function until a certain amount of time has passed, reducing the frequency of function calls. Throttling, on the other hand, ensures that a function is only executed at most once in a specified period, preventing overloading
11.Avoid Memory Leaks.
Memory leaks can significantly degrade performance. They often occur in single-page applications where event listeners or DOM elements are not properly managed. Regularly monitor your application for unexpected memory usage and ensure that all components are correctly disposed of when they are no longer needed.
12.Efficient DOM Manipulation.
Direct manipulation of the DOM can be costly. To optimize, batch your DOM updates using Document Fragments or virtual DOM techniques. This approach minimizes reflow and repaint cycles, leading to improved performance.
Loops, particularly nested loops, can be a source of inefficiency. Optimize them by reducing unnecessary computations inside loops and avoiding using high-complexity functions within loop iterations. Sometimes, replacing traditional for loops with forEach or map methods can also lead to performance gains.
14.Use Web Workers for Heavy Tasks.
For computationally intensive tasks, consider using Web Workers. They run in a separate thread from the main browser thread, allowing for parallel execution without blocking the UI. This is especially beneficial for tasks like large data processing or complex calculations.
15. 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.
Google Chrome DevTools: Offers comprehensive profiling and debugging capabilities, allowing developers to analyze runtime performance and optimize accordingly.
Lighthouse: An open-source, automated tool by Google for improving the quality of web pages, with features for auditing performance, accessibility, and more.
WebPageTest: Provides detailed performance insights and allows for testing across different browsers and geographical locations.