DOM size is the total number of elements in the Document Object Model of a web page, the in-memory tree the browser builds from the HTML. A very large DOM can slow down rendering and interactions.
Why does it matter?
DOM size is not a ranking factor, but it affects performance. According to web.dev, a large DOM makes the initial render more expensive (layout, styling, paint), makes layout work after interactions more expensive, which can hurt Interaction to Next Paint (INP), and uses more memory when JavaScript holds references to many nodes.
Which limits apply?
The earlier Lighthouse audit “Avoid an excessive DOM size” warned at about 800 nodes in the body and failed at about 1,400. It reported total elements, maximum depth and the element with the most children. Since Lighthouse 13 the audit lives on as the “Optimize DOM size” insight. Chrome documents that this insight only fails when a layout or style recalculation takes longer than 40 ms and affects more than 100 layout objects (layout) or more than 300 elements (style).
Example
The element count can be read in the browser console:
document.querySelectorAll('*').length;
How can it be reduced?
web.dev suggests flatter markup, avoiding wrapper elements, lazy-loading content that starts out hidden, simpler CSS selectors, and the CSS property content-visibility for off-screen sections. Long lists can use virtual scrolling or windowing libraries.
Sources
- Avoid an excessive DOM size – Lighthouse, Chrome for Developersdeveloper.chrome.com
- How large DOM sizes affect interactivity – web.devweb.dev
- Optimize DOM size – Chrome for Developersdeveloper.chrome.com
Last updated: