DOM Size Test
What is it?
The Document Object Model is the tree of nodes the browser builds from your HTML, and its size and depth directly affect how quickly the page renders. Very large DOMs increase memory usage, lengthen style and layout calculations, and slow down rendering, particularly on mid-tier and lower-end mobile devices that make up the majority of the global web audience. This test measures the DOM size and maximum depth of the page you submit, alongside the elements that contribute most to the total.
Why DOM size matters
The DOM is the data structure the browser walks every time it computes layout, applies styles, or responds to a user interaction. A page with thousands of nodes, or with a tree dozens of levels deep, makes the browser do more work on every interaction, which translates into slower scrolling, jankier animations, and worse Interaction to Next Paint scores. Lighthouse uses 1500 nodes and a maximum depth of 32 as warning thresholds, and these correlate well with smooth rendering on mid-tier mobile devices.
Bloated DOMs usually trace to long lists rendered in full, deep wrapper trees from older layout systems, hidden modals and dropdowns that stay in the DOM with display: none rather than being mounted on demand, or third-party widgets that inject hundreds of nodes. Each of these has a clean modern remedy, and the cumulative impact of cleaning them up is often dramatic on lower-powered devices.
Common causes of large DOMs
- Long lists rendered in full, where pagination or virtualization would render only the visible rows.
- Excessive wrapper divs, often a stack of layout helpers ten deep that modern CSS Grid or Flexbox can flatten.
- Hidden modals and dropdowns that stay in the DOM permanently when they could mount on demand.
- Third-party widgets that inject many nodes; lazy-loading these after main content keeps them out of the initial render path.
This test reports your page's total node count and maximum depth, alongside the elements that contribute most to the size. The fix guide below covers virtualization patterns for long lists, modern layout primitives that reduce wrapper depth, and lazy-mounting techniques for off-screen UI elements.
Pass rate:
-
Top 100 websites: 56%This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 73%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | 17% |
|---|---|
| 2022 | 56% |
| 2023 | 54% |
| 2024 | 56% |
100
75
50
25
0
How do I fix it?
This test fails when the page builds a Document Object Model with too many nodes or excessive nesting depth. Large DOMs increase memory usage, lengthen style and layout calculations, and slow rendering, particularly on mobile devices. Fixing this issue means simplifying the markup so the browser has less work to do on every interaction.
Where to make the change
- Application code or templates: identify the heaviest sections (long lists, repeating components, deep grid wrappers) and either paginate them, virtualize them, or flatten the markup.
- WordPress: heavy page-builder themes often emit deeply nested wrapper divs. Consider switching templates or using a theme that emits cleaner markup.
- Headless or framework sites: use a virtualized list component for long item lists so only visible rows are rendered into the DOM.
Common causes and how to resolve them
- Long lists rendered in full: show a paginated subset or virtualize the list so only on-screen items exist in the DOM.
- Excessive wrapper divs: a stack of layout wrappers ten deep can usually be flattened to two or three with modern CSS layouts (Grid, Flexbox).
- Hidden modals and dropdowns kept in the DOM: render them on demand instead of always emitting them with
display: none. - Third-party widget injecting many nodes: a chat widget or carousel may add hundreds of nodes per page. Lazy-load it after main content renders.
Best practices
- Aim for under 1500 nodes total and a maximum depth of 32: Lighthouse uses these as warning thresholds and they correlate with smooth rendering on mid-tier mobile devices.
- Render only what is visible: long lists, accordions, and modals belong outside the initial DOM until needed.
- Prefer flat semantic markup: a single
<article>with a few children is faster than a deeply nested<div>tree. - Audit with Lighthouse: the DOM size audit reports the worst-offending elements, which often points at a single template that needs rework.
