DOM Size Test
The DOM Size Checker counts the total number of DOM elements on a page, the maximum nesting depth, and the largest single parent's child count. Lighthouse warns at 800 elements and fails at 1,500 — and the slowdowns at scale are real. Large DOMs cost CPU on style recalculation, layout, paint and JavaScript queries, all of which compound into slower interaction (INP) and a heavier memory footprint. Most over-large DOMs come from un-virtualised lists, deeply nested wrappers, or repeated component templates.
What This Tool Checks
- Total DOM element count
- Maximum DOM nesting depth
- Largest single parent's child count
- Lighthouse DOM size warning / failure threshold
- Repeated patterns that should be virtualised
- Memory footprint of the rendered DOM
Why It Matters for SEO
Large DOMs slow every browser operation: style recalc, layout, paint, query selection, JavaScript traversal. On lower-end devices this compounds into visible jank and poor INP scores. Lighthouse explicitly warns about DOMs over 800 elements. Virtualising long lists, flattening unnecessary wrapper divs and removing duplicate templates are the standard fixes — usually one component refactor each.
How to Fix It
Virtualise long lists with react-window or similar libraries. Flatten unnecessary wrapper divs. Lazy-mount tab and accordion contents. Remove closed modals from the DOM. Audit your CSS framework and remove gratuitous nested wrappers. Aim for under 800 total elements per page.
How It Works
We render the page in headless Chrome, walk the document, and measure total nodes, depth and max children. Patterns indicative of un-virtualised lists or template duplication are flagged so you know which component to fix.
Common Mistakes to Avoid
- Rendering a 1,000-row table without virtualisation
- Deeply nested wrapper divs from CSS framework defaults
- Forgetting to clean up closed modals or dropdowns from the DOM
- Loading every product image even when off-screen
- Server-rendering hidden tabs / accordion contents instead of lazy mounting
Quick Checklist
- Total DOM elements under 800
- Maximum depth under 32
- No single parent with >60 children
- Long lists virtualised
- Hidden tabs / accordions lazy-mounted