How to reduce an excessive DOM size
Pages with thousands of elements are slow to style, lay out and interact with. Page builders and mega menus are the usual culprits.
Step by step, with screenshots: DOM size: why 3,000 nodes is a problem and how to shrink a page →
Check your own site
Runs these 2 checks and the other 191, free, in about 45 seconds.
What it is
DOM size is the number of HTML elements on a page once the browser has built it, including everything added by JavaScript. Every <div>, <span>, link, image and SVG shape is a node the browser must store, style and lay out.
Large DOMs slow down style calculation, layout and every interaction that changes the page, so they hurt Interaction to Next Paint and use more memory on phones. Lighthouse starts warning above about 800 elements and flags pages with more than 1,400, and getReport asks for under 1,400. The report also shows the deepest nesting and the widest parent; nesting deeper than about 32 levels or parents with more than 60 children are further warning signs.
What a passing site looks like
- Page element count: passeswarning · −2 ptseffort L
- No crawled page has more than 500 KB of HTMLinfo onlyeffort M
1. Page element count
Why it matters. Every element costs memory, style calculation and layout time. Very large pages feel sluggish on phones and make layout shifts more likely.
- Remove hidden or duplicated markup (mobile and desktop menus rendered twice, off-screen sliders).
- Paginate or lazy-render long lists and product grids.
- Simplify page-builder nesting: each wrapper div counts.
2. Largest pages
Why it matters. HTML over 500 KB is many times the usual size and has to be downloaded and parsed before the page appears. The cause is usually inline data, a long list rendered in full, or images embedded as text.
- Load long lists, reviews and product grids in pages or as the visitor scrolls.
- Move inline scripts, styles and embedded images into separate files the browser can cache.
- In WordPress, page builders and some themes inline large blocks of data; check the page source for the largest parts.
Questions people ask
How do I avoid an excessive DOM size?
Build pages with fewer wrapper elements, and do not render content nobody sees yet. Load long lists, comments and product grids in pages or as the visitor scrolls, build mega menus and modals only when opened, and replace repeated inline SVG icons with a sprite. Removing duplicate desktop and mobile versions of the same section, one of them hidden, often saves hundreds of nodes.
How do I fix an excessive DOM size in WordPress?
The usual cause is a page builder nesting several containers around every widget, plus a mega menu and footer on every page. Use the builder's leaner flexbox or grid containers, simplify sections that stack columns inside columns, and avoid showing and hiding separate desktop and mobile copies of the same content. A lighter theme and block-based layouts also help.
Why do Elementor pages have a large DOM?
Older Elementor layouts wrap each widget in several nested elements for the section, the column and the widget itself. Elementor's flexbox containers produce far less nesting than that section and column structure. Rebuilding the heaviest templates, usually the header, footer and home page, with containers cuts the element count the most.