Why DOM size is important?
We now know that Excessive DOM size negatively impacts web performance. So how exactly does it do this? Let’s examine it together!
The decrease in Network Efficiency & Load Performance
The high DOM size causes decrease in network efficiency and load performance. Having a high DOM tree means a lot of actors that need to be loaded with the page. Loading a large number of details that are not even visible to the user each time causes the page to open much more slowly and reduces the user experience.
The decrease in Runtime Performance
The higher the DOM size, the lower the runtime performance. Runtime performance is a metric that measures how your website performs while running in the normal process, not while it is being loaded. The large size of DOM causes you to experience a slowdown in standard running times.
The process is like this: Each time a user enters your web page, the browser continuously recomputes the position and styling of nodes. The more complex it takes to perform this recomputing process, the slower the rendering will be.
The decrease in Memory Performance
At this point, you need to check your JavaScript. The high size of DOM sometimes results in general query selections that will probably reduce your memory performance. Because in such a case, you may be storing a large number of references to a high number of nodes. This will cause your memory performance to decrease in users’ devices.
Using Lighthouse to Avoid Excessive DOM Size
In Lighthouse 13 and later, the former “Avoid an excessive DOM size” audit moved to the “Optimize DOM size” insight. The former audit's count-based thresholds are not universal current failure rules. See Chrome's official migration notice.
The insight reports total elements, maximum DOM depth, and the element with the most children. Use these measurements to locate unnecessary markup; a high element count or a deep tree alone does not establish a performance problem.
The insight fails only when a large layout update or style recalculation takes more than 40 ms:
- A large layout update involves more than 100 layout objects (roughly elements).
- A large style recalculation affects more than 300 elements.
See the official Optimize DOM size documentation for the current criteria. Record a representative page interaction in Chrome DevTools' Performance panel and inspect the highlighted layout and style recalculation events. Simplify unnecessary markup or costly styles, then repeat the same interaction at the same viewport and application state to compare the measured cost.
Historical screenshot from this guide's October 2020 version: it illustrates the former audit, not the Lighthouse 13+ insight.
What Can You Do To Optimize DOM Size?
So, what are the main ways to optimize the DOM for you, especially as requested by Google and other browser systems?
The main thing you need to do is use systems that will destroy unnecessary DOMs and generate the necessary ones at the right time. What does it mean?
When to create nodes?
For example, let’s say you are currently submitting a large DOM tree. In this case, all you have to do is load your page. Then to determine in detail which nodes are shown. After taking your note, you will have the chance to destroy the invisible nodes that are not displayed on the page. You should only generate those nodes when the user has a behavior that will cause you to display the nodes in question, for example when the user exhibits an expected scroll behavior or clicks a button.
What if you cannot avoid a large DOM tree?
If it is not possible to reduce the large DOM tree you have due to some software features of your web page, let’s tell you what to do: Simplify CSS selectors. In this way, you will improve rendering performance. Google has content on Reduce the Scope and Complexity of Style Calculations. You can also have a look at it.