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.
- Results in seconds
- Pass / fail + fix guidance
- No account required
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
Put your whole site on autopilot — SEO and AI search
PositionMySite monitors every signal on this page across your entire website 24/7 — plus keyword rankings, competitor moves and AI-search readiness (llms.txt, schema, ChatGPT & Gemini visibility). When something breaks, you know before Google does.
Every feature unlocked · No commitment · Cancel anytimeFrequently Asked Questions
Lighthouse warns at 800 elements and fails at 1,500. Browsers can technically handle far more, but performance degrades visibly beyond 1,000-1,500 even on fast devices.
How many levels deep the most-nested element sits. Lighthouse flags pages with depth over 32 levels because each level multiplies CSS selector and layout cost.
Every browser operation (style recalc, layout, paint, query) scales with DOM size. Large DOMs slow page load, hurt INP, and consume more memory — especially noticeable on low-end mobile devices.
Virtualise long lists, flatten unnecessary wrapper divs, lazy-mount hidden content (tabs, accordions, modals), and remove duplicate templates. Each component cleanup typically removes hundreds of nodes.
Indirectly. Large DOMs hurt INP and overall performance, which feed Google's page-experience ranking signal. Pages with manageable DOMs consistently score better on Core Web Vitals.