Published: Oct 8, 2025
A large DOM can increase the duration of style calculations and layouts, impacting page responsiveness. A large DOM also increases memory usage.
A deep DOM tree is not a performance issue on its own, however it is a symptom of design patterns that use unnecessary element nesting.
This insight considers the entire DOM, including within shadow roots. It ignores DOM nodes that are not also elements. It also ignores <iframe> contents.
What to look for:
- Total elements: The overall number of elements in your page's DOM.
- DOM depth: The maximum depth of the DOM tree.
- Most children: The element with the most child elements.
How to pass this insight
This insight only fails if there is a large layout or style recalculation exceeding a duration of 40ms.
- A large layout update involves over 100 layout objects (which are roughly elements).
- A large style recalculation affects more than 300 elements.
On failure, in the Performance panel, this insight highlights these events in the flame chart.
To reduce the cost of these events:
- Learn how to measure the cost of CSS selectors and reduce style complexity.
- Minimize the depth of the DOM by reducing unnecessary nesting.
- Consider adopting Web Components to use the Shadow DOM–while this won't reduce the DOM size, it does reduce the cost of style recalcs.
Stack-specific guidance
This insight also offers stack-specific guidance for pages using the following technologies:
Angular
If you're rendering large lists, use virtual scrolling with the Component Dev Kit (CDK).
React
- Use a "windowing" library like
react-windowto minimize the number of DOM nodes created if you are rendering many repeated elements on the page. - Minimize unnecessary re-renders using
shouldComponentUpdate,PureComponent, orReact.memo. - Skip effects
only until certain dependencies have changed if you are using the
Effecthook to improve runtime performance.