Avoid an excessive DOM size
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page.
The HTML DOM model is constructed as a tree of Objects:
Image source: https://www.w3schools.com/whatis/whatis_htmldom.asp
All the objects that constitute the HTML structure of the page, i.e. all the tags included in it (HTML, BODY, DIV, H1, H2, etc), are called nodes and the sum of them is translated as the DOM size.
How is the DOM size increased?
Every time you add an image, a paragraph, a link, a module/widget from your page builder etc, you're adding more elements (nodes) to the DOM and increasing its size.
The distance between each node and the root element is known as the depth, and all the elements below each (parent) node are called child nodes.
Lighthouse flags pages with DOM trees that:
- Have more than 1,500 nodes total (other tools like GTmetrix will warn about this if the DOM size exceeds 818).
- Have a depth greater than 32 nodes.
- Have a parent node with more than 60 child nodes.
What's the impact of the DOM size on page performance?
There are different ways that having an excessive DOM size will negatively affect the performance of your page:
- Amount of data transferred: Large DOM trees often include nodes that are invisible upon first load. This will increase the amount of data costs to your users and will slow down the page load time.
- Render time: When there are complicated style rules in place along with a large DOM tree, the browser will have to recompute the position and styling of each node whenever the user or scripts interact with your page, and this can hugely slow down the rendering process.
- Use of visitor’s device memory Depending on how the JavaScript on the site is coded (e.g. if it includes several general query selectors), it could overwhelm the memory capabilities of your users' devices.
How to fix this
Unfortunately, neither WP Rocket nor any other caching plugin can help to reduce the number of DOM elements, this can be only addressed directly through the design of your site.
You could try to:
- Reduce the number of sections of the page.
- Remove hidden elements.
- Switch to a simpler or less overloaded theme.
- Limit the number of posts/products displayed on a page, etc.
Basically, reduce the amount of content displayed on each page.
Also, keep in mind that some themes/page builders could be adding more DOM elements than others to the same type of content/blocks:
In this example, the <div> node could be easily removed:
<div id=”first-paragraph”>
<p>This is the First Paragraph.</p>
</div>
Resulting in:
<p id=”first-paragraph”>This is the First Paragraph.</p>
If you have advanced knowledge about HTML, and you’d like to check this, you can switch to the HTML view of a block by selecting it on the page’s Edit screen and clicking on Edit as HTML:
Heads up! Any changes to the HTML should be carefully applied. We recommend you test this thoroughly on a staging/development environment before applying any changes to the live site.
More information:
https://web.dev/dom-size/
https://gtmetrix.com/avoid-an-excessive-dom-size.html