Latest Performance Report for website
How to Reduce DOM Size in WordPress’
hen analyzing your site through Google PageSpeed Insights you might have seen an error like “Avoid an excessive DOM size”:
excessive dom size google pagespeed
Or in GTmetrix “Reduce the number of DOM elements”:
What is DOM?
This ‘tree’ like structure is called DOM or Document Object Model.
render tree construction
Image credits: Google Developers
Nodes – All HTML elements in the DOM are called Nodes. (aka “leaves” in the tree).
Depth – How long does the “branch” goes in a tree is called the depth. For example, in the above diagram, “img” tag has a depth of 3. (HTML -> body -> div -> img).
Child Elements – All the child nodes of a node (without any further branching) are child elements.
Lighthouse and Google PageSpeed Insights starts to flag pages if any of the following conditions are met:
Have more than 1,500 nodes in total.
Have a depth greater than 32 nodes.
Have a parent node with more than 60 child nodes.
How DOM Size Impact Performance?
Excessive DOM size can impact performance in different ways.
Higher parse and render time (FCP) – A large DOM tree and complicated styles rules make a huge work for the browser. The browser has to parse the HTML, construct render tree etc. Every time user interacts or something in HTML changes, the browser has to compute this again.
Increases TTFB – As your DOM size increases, the size of the HTML document increases (in KBs). Since more data has to be transferred over the network, this increases TTFB.
How to Reduce DOM Size Technically?
For example, technically reducing DOM size is simple as:
Basically, get rid of every possible HTML element. You can also use Flexbox or Grid to further reduce DOM size.
But since you’re using WordPress, this isn’t gonna help you much!
How to Reduce DOM Size in WordPress?
Lazy Render below-fold contents
You can tell the browser to lazy render the contents (or elements) if it’s not required for the above fold. It’s just like lazy loading images, but for HTML elements.
Here is how to lazy render contents using FlyingPress: