Fix avoid excessive-DOM size lighthouse warning

Last reviewed by Arjen Karel on February 2026

What is the 'avoid excessive-DOM size' Lighthouse warning?

What is the avoid excessive-DOM size warning in Lighthouse? Lighthouse flags pages that have either:

• more than 1,500 DOM nodes in total.
  This means that there are more than 1,500 HTML elements on your page.
• a maximum node depth greater than 32 nodes.
  This happens when an element is nested 32 levels deep.
• a parent node with more than 60 child nodes.
  This can happen when a parent element (like a table or a list) has more than 60 children (table rows, or list elements).

To put these numbers in perspective: according to the 2024 Web Almanac, the median page has 594 DOM elements. At the 90th percentile it jumps to 1,716, which already exceeds the Lighthouse threshold. Roughly 10% of all pages on the web trigger this warning.

Since Lighthouse 13 (October 2025), this audit has evolved into the "Optimize DOM size" insight. It now triggers based on actual style recalculations and layout work that exceed 40ms, not just static node counts. The thresholds above are still reported as reference points.

A quick reminder: what is the DOM?

DOM stands for Document Object Model. The DOM is a tree-structured object representation of your HTML where each HTML element (for example: the body or h1) is represented by its own node.

What causes an excessive DOM size?

An excessive DOM size can have any number of reasons. An excessive DOM size is usually caused by:

• Badly coded plugins in your CMS.
• DOM nodes created by JavaScript.
• Page builders that generate bloated HTML (for example: Elementor or WP Bakery).
• Text that is copied and pasted into a WYSIWYG editor (like TinyMCE).
• Bad template coding.

The 2024 Web Almanac found that <div> elements alone make up 28.7% of all page elements. This "divitis" is a major contributor to excessive DOM sizes, especially in page builder output.

How does excessive DOM size affect page speed?

A large DOM does not directly impact the Lighthouse metrics. It does make rendering a webpage unnecessarily complicated, making it almost impossible to get a high Lighthouse score. Your browser will need to do more work before the webpage can be displayed on screen. There are 4 problems with a large DOM:

• The size of your HTML is larger because your code is bloated. This will increase the time it takes to download your page.
• A large DOM size will slow down rendering performance. Your browser needs to do more (DOM) calculations on first load and each time a user or a script interacts with your page.
• Your browser may use much more memory when interacting with the DOM via JavaScript.
• A large DOM directly impacts Interaction to Next Paint (INP). Every time a user clicks, taps, or types, the browser must recalculate styles and layout for affected elements. The more DOM nodes on the page, the longer this takes. When style recalculation affects more than 300 elements or takes longer than 40ms, it becomes a measurable problem for INP. This is why pages with thousands of DOM nodes often fail INP even when their JavaScript is fast.

The 'avoid excessive DOM size' warning will most likely indirectly affect important Core Web Vitals like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). But the biggest impact is on INP, which is the most commonly failed Core Web Vital.

How to fix 'avoid excessive-DOM size'

To fix the 'avoid excessive-DOM size' warning you will first need to trace its origins. Lighthouse will give you an indication of where the Maximum DOM Depth and Maximum Child Elements are located. From there you need to do a bit of searching. Use the DOM inspector in Chrome DevTools and check out the DOM. Try to figure out what is creating a large number of DOM nodes. There are 5 usual suspects:

1. Badly coded plugins in your CMS.
   When a plugin, for example a slider or a calendar plugin creates a large amount of DOM nodes you could consider replacing this plugin with a more streamlined plugin.
2. DOM nodes created by JavaScript.
   A JavaScript, for example a chat widget, might inject a large number of DOM nodes into the DOM. In this case remove the JavaScript file or find a replacement with the same functionality.
3. Page builders that generate bloated HTML.
   Page builders like Elementor or WP Bakery often create bloated code that has a large number of DOM nodes. There is no easy fix for this. Page builders are often a part of the workflow. The solution includes cleaning up your bloated code and changing your workflow.
4. Text that is copied and pasted into a WYSIWYG editor.
   Most WYSIWYG editors like TinyMCE do a bad job at cleaning up pasted code, especially when pasted from another rich text source like Microsoft Word. It will not only copy the text but also the styles. Those styles may be embedded in a large number of DOM nodes. The solution to this issue is simple. Stop pasting content into your editor and clean up pages that already have pasted, bloated text.
5. Bad (template) coding.
   When a large DOM size is created by your editor or caused by your template things could get ugly. This means that bloated code is part of your website's core. You will need to switch editors, rewrite parts of your template or even start from scratch.

Techniques to reduce the impact of a large DOM

Sometimes it is not possible to remove the excessive DOM size without rewriting large parts of your site and changing your entire workflow. There are several techniques to lessen the impact of an excessive DOM size:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Lazy load parts of your webpage.
  To speed up initial rendering you might consider lazy loading parts of your website. For example the footer.
• Use content-visibility: auto to skip rendering off-screen content.
  The CSS content-visibility property tells the browser to skip styling, layout, and paint for off-screen elements until the user scrolls near them. It now has 93% browser support (Chrome 85+, Firefox 125+, Safari 18+). Always pair it with contain-intrinsic-size to prevent layout shifts:
• Split large pages into multiple pages.
  Splitting large pages into multiple pages might reduce the number of DOM nodes when the content itself creates many DOM nodes.
• Implement virtual scrolling.
  For long lists, data tables, or image galleries, virtual scrolling only renders items visible in the viewport. Libraries like react-window (React) and the CDK Virtual Scrolling module (Angular) keep the DOM node count to just the visible items (typically 10 to 30 nodes) instead of thousands.
• Avoid memory-intensive JavaScript.
  When dealing with a large amount of DOM nodes on your page be extra careful with JavaScript. document.getElementsByTagName('div'); might load a large number of DOM nodes which increases memory usage.
• Avoid complicated CSS declarations.
  When dealing with a large amount of DOM nodes on your page be extra careful with complicated CSS declarations. div:last-child; needs to check the last-child status for every div on your page. Simpler selectors mean less traversal work for the browser. This matters most for INP, where every millisecond of style recalculation counts.

After reducing your DOM size, track the impact on real users with Real User Monitoring. In our CoreDash data, reducing DOM node count below 1,500 typically improves INP by 35% on mobile devices.