As covered by Google, an excessive DOM (Document Object Model AKA web page) can harm your web page performance. It is recommended that your web page have no more than 1500 nodes, be no more than 32 nested levels deep, or have any parent node that has more than 60 child nodes.
What this basically breaks down to is, if you have a web page that uses an excessively large DOM size, it will take longer to render the page, and run JavaScript on the page.
Without completely redesigning your web page from scratch, you cannot resolve this warning. Understand that this warning is significant and if you get it for more than one or two pages in your site, you should consider:
 |
| How to FIX excessive DOM size elements in Google pagespeed insights - Techzost blog |
What this basically breaks down to is, if you have a web page that uses an excessively large DOM size, it will take longer to render the page, and run JavaScript on the page.
Without completely redesigning your web page from scratch, you cannot resolve this warning. Understand that this warning is significant and if you get it for more than one or two pages in your site, you should consider:
- reducing the amount of widgets / sections within your web pages or page layouts
- using a simpler web page builder as many page builders add a lot of code bloat
- using a different theme
- using a different slider
Technical feedback (adding from Google pagespeed recommendation) :
A large DOM tree can harm your page performance in multiple ways.
Network efficiency and load performance. If you server ships a large DOM tree, you may be shipping lots of unnecessary bytes. This can also slow down page load time, because the browser may be parsing lots of nodes that aren't even displayed above-the-fold. Runtime performance. As users and scripts interact with your page, the browser must constantly re-compute the position and styling of nodes. A large DOM tree in combination with complicated style rules can severely slow down rendering. Memory performance. If you use general query selectors such as document.querySelectorAll('li') you may be unknowingly storing references to a very large number of nodes, which can overwhelm the memory capabilities of your users' devices. Recommendations An optimal DOM tree:
Has less than 1500 nodes total. Has a maximum depth of 32 nodes. Has no parent node with more than 60 child nodes.
