DOM size is the number of nodes in the Document Object Model of a page. Every HTML tag, attribute, and text node becomes a DOM element. The larger the DOM, the longer the browser takes to build the tree, compute styles, and render the page. In 2026, DOM size affects Core Web Vitals — specifically LCP and INP. In this guide, you will learn what DOM size is, how to check it, and 8 ways to reduce it.
What is DOM size
The Document Object Model (DOM) is a programming interface for HTML documents. When a browser loads a page, it parses the HTML and builds a tree of objects: each tag becomes a node, text becomes a text node, and attributes become properties.
DOM size is measured in the number of nodes. This is not the file size of the HTML in kilobytes — it is the number of elements in the tree. Two HTML files of the same file size can have different DOM sizes if one contains many small tags and the other contains fewer larger tags.
Google recommends keeping DOM size within these limits:
Good: under 800 nodes.
Needs improvement: 800-1500 nodes.
Poor: over 1500 nodes.
Some sources consider 3000 nodes a critical threshold. If the DOM is larger, the browser spends more time rendering, especially on mobile devices. Check DOM size via the DOM size checker.
Why DOM size matters
Three reasons.
Rendering speed. The more nodes, the longer the browser takes to build the DOM tree, compute styles, and render the page. This affects LCP (Largest Contentful Paint).
Mobile performance. Mobile devices have limited resources. A large DOM slows down the page more than on desktop.
Core Web Vitals. Google uses LCP and INP as ranking signals. A large DOM worsens both metrics.
Check Core Web Vitals via the SEO Audit by SerpMax.
How to check DOM size
Three ways.
Method 1. DOM size checker tool
The fastest way is to use an online DOM size checker. The SerpMax DOM size checker tests any URL and shows:
— total number of DOM nodes;
— maximum depth of nesting;
— maximum number of child elements;
— recommendations for optimization.
The tool works with any website, not just your own.
Method 2. Chrome DevTools
For detailed analysis, use Chrome DevTools.
How:
1. Open the page in Chrome.
2. Press F12.
3. Open the Console tab.
4. Type: document.getElementsByTagName("*").length
5. The console will show the total number of elements.
You can also check nesting depth and child elements via the Elements tab, but this takes more time.
Method 3. Lighthouse
Google Lighthouse shows DOM size along with other performance metrics.
How:
1. Open the page in Chrome.
2. Press F12.
3. Open the Lighthouse tab.
4. Click "Analyze page load".
5. Check the "Diagnostics" section for DOM size.
Lighthouse also shows how much time is spent building the DOM and which elements are the deepest.
What is considered a large DOM
Benchmarks:
Under 800 nodes. Good. Rendering is fast even on mobile.
800-1500 nodes. Acceptable. May have slight delay on low-end devices.
1500-3000 nodes. Poor. Rendering slows down, Core Web Vitals suffer.
Over 3000 nodes. Critical. The browser spends significant time building and rendering the DOM.
What increases DOM size:
— complex HTML structure with many nested elements;
— tables with many rows and cells;
— lists with hundreds of items;
— widgets and plugins that add their own elements;
— dynamic content loaded via JavaScript.
How to reduce DOM size
Eight ways.
1. Simplify HTML structure
Remove unnecessary wrappers. Developers often add <div> where it is not needed. Every extra element adds a DOM node.
What to do: review the HTML and remove nested divs that serve no functional purpose.
2. Use semantic tags
Instead of <div class="header">, use <header>. This does not reduce the number of nodes, but it simplifies the structure and makes it clearer for search engines.
3. Reduce list and table elements
If a page has a list of 500 items — that is 500+ nodes. If a table has 1000 cells — that is 1000+ nodes.
What to do: use pagination, lazy loading, or virtual scrolling for large lists. Split large tables into parts.
4. Remove unused elements
Hidden elements (display:none) are still in the DOM. If they are not needed, remove them from the HTML.
What to do: check which elements are hidden and remove those that are not used.
5. Optimize widgets and plugins
Each widget (chat, social, analytics) adds its own elements to the DOM. If a widget is not needed, remove it.
What to do: check which widgets are actually used and remove the rest.
6. Use CSS instead of extra elements
Developers often add elements only for styling. For example, <div class="spacer"> for spacing. This can be done with CSS (margin, padding).
What to do: check which elements are added only for styling and replace them with CSS properties.
7. Defer non-critical content
If part of the content is not needed for the first render (comments, reviews, related products) — load it later.
What to do: use lazy loading for content below the fold.
8. Check third-party scripts
Third-party scripts (analytics, ads, chats) often add many elements to the DOM. Some add hundreds of nodes.
What to do: check which scripts add the most elements and replace or remove them.
Check DOM size after each change via the DOM size checker.
DOM size and Core Web Vitals
DOM size affects two Core Web Vitals.
LCP (Largest Contentful Paint). A large DOM means the browser takes longer to build the tree and render the page. LCP increases.
INP (Interaction to Next Paint). A large DOM slows down event processing. When a user clicks, the browser takes longer to find the element and update the interface.
Google recommends LCP under 2.5 seconds and INP under 200 ms. A large DOM makes it harder to achieve these values.
How often to check DOM size
Recommended frequency:
— after adding new elements, widgets, or plugins;
— after a CMS or template update;
— once a month as part of a technical SEO audit;
— if you notice the page has become slower.
DOM size can grow unnoticed. Regular checks help catch the problem before it affects rankings.
Frequently Asked Questions
What is DOM size?
DOM size is the number of nodes in the Document Object Model of a page. Every HTML tag, attribute, and text node becomes a DOM element. The larger the DOM, the longer the browser takes to build and render the page.
What is a good DOM size?
Under 800 nodes is good. 800-1500 is acceptable. Over 1500 is poor. Over 3000 is critical. Google recommends keeping DOM size within 800-1500 nodes.
How do I check DOM size?
Use the DOM size checker. Or use Chrome DevTools → Console → document.getElementsByTagName("*").length. Or use Lighthouse.
Does DOM size affect SEO?
Indirectly — through Core Web Vitals. A large DOM worsens LCP and INP, which Google uses as ranking signals. Slow pages lose rankings.
What increases DOM size?
Complex HTML structure, tables with many rows, long lists, widgets and plugins, third-party scripts, dynamic content.
How do I reduce DOM size?
Simplify HTML structure, use semantic tags, reduce lists and tables, remove unused elements, optimize widgets, use CSS instead of extra elements, defer non-critical content.
Does DOM size affect mobile more than desktop?
Yes. Mobile devices have limited resources. A large DOM slows down the page more on mobile than on desktop. For mobile versions, DOM size is more critical.
How often should I check DOM size?
After adding new elements, widgets, or plugins; after a CMS update; once a month as part of a technical audit. DOM size can grow unnoticed.
