Lighthouse DOM Treemap - How to Reduce the Size of the DOM
In the last few years Google has issued many warnings regarding the excessive size of your web application. This comes at a very high cost to the user: slow rendering and poor performance of the browser and user experience.
In order to improve the performance of your application, Lighthouse has introduced the option to reduce the size of the DOM. For many companies, this measure has been implemented in order to reduce the memory consumption and as a result, the size of the overall document. Unfortunately, a very small improvement in memory consumption, at least in Chrome, could bring back this performance issue.
To help you with this, in Chrome we now have a new feature to help you locate the places in the DOM tree which are really heavy: DOM Treemap.
The Treemap is an extension to Chrome Developer Tools, where you can add an extra tab for DOM tree visualization.
You can see the location of all DOM nodes in your current page. To find which elements have the most children, simply click on the "Children" button in the lower-right corner of the toolbar.
The tool has also been extended with a feature to visualize BEM affiniciados. This allows you to see how node intensive your BEM component are in average.
