DOM Size & HTML Bloat Analyzer

Before you try to reduce DOM size, you need to know where the size comes from. This analyzer counts the elements in a page body, finds the deepest nesting and the element with the most children, and measures them against the Lighthouse thresholds. It also finds inline SVG, base64 images and inline CSS, and lists the tags and classes that repeat most, which usually points straight at the block to fix.

What "DOM size" means

The DOM is the tree of elements the browser builds from your HTML: every div, span, link, list item and icon path is one node. A short blog post may have 300 elements. A shop category page with mega menus, filters, product cards and a big footer can pass 3,000.

Lighthouse, the audit inside Chrome DevTools and PageSpeed Insights, warns when the body has more than 800 elements and marks it poor above 1,400. It also reports the deepest nesting and the parent with the most children.

Why a large DOM slows a page

• Slower style and layout. Every time something changes, the browser may need to recalculate styles and positions across the tree. More nodes means more work.
• Slower clicks and taps. That work delays the next frame after an interaction, which shows up in Interaction to Next Paint (INP), one of the Core Web Vitals.
• More memory. Cheap phones feel it first.
• Bigger HTML. More bytes to download and parse before the page is ready.

DOM size is not a ranking factor on its own. Google uses Core Web Vitals as one signal among many, and a large DOM is only one possible cause of a poor INP. Fix it when the page feels slow or your Core Web Vitals report shows a problem, not to chase a number.

How to use the analyzer

1. Enter a page address and press Analyze. The tool reads the HTML your server sends.
2. For pages built by JavaScript, open "Or paste HTML". In Chrome, right-click the page, choose Inspect, right-click the html element and choose Copy outerHTML. Paste it and analyze.
3. Read the cards. Green is fine, orange is a warning, red is poor.
4. Read the notes and the table. They name the biggest causes.
5. PRO checks up to 25 pages in one run, handy for comparing templates: home, article, category and product.

The "visible text vs HTML" number is for information only. A low share is common on modern pages and is not a problem by itself.

Where the extra elements come from

Reading the numbers together

One number alone rarely tells the story. A page with 1,600 elements but shallow nesting and short lists is often fine; the extra elements may simply be a long article with many paragraphs. A page with 900 elements, nesting 40 levels deep and one list with 300 children is the one to fix first. Look at the "most used classes" row: when one class appears hundreds of times, you have found the repeated block. Then check the same template on two or three other pages to see if the problem is site-wide.

How to reduce DOM size safely

1. Remove duplicates. One responsive block instead of a mobile copy and a desktop copy.
2. Shorten menus. A menu with 200 links helps neither visitors nor crawlers. Keep the main sections; link the rest from section pages.
3. Load on demand. Show the first 10 comments or products and load more on click. Put rarely opened tab content behind a request.
4. Flatten wrappers. If your page builder nests six divs around every heading, try a lighter block or a simpler layout. CSS grid and flexbox rarely need extra wrappers.
5. Reuse icons. One SVG sprite with <use>, or icons as image files, instead of the same inline SVG fifty times.
6. Move heavy data out. Base64 images inside HTML cannot be cached; save them as files. Large inline CSS belongs in a cached stylesheet.

For long pages that you cannot shorten, the CSS property content-visibility: auto lets the browser skip layout work for sections that are off screen. It does not reduce the element count, but it reduces the cost.

Change one thing at a time. Run the analyzer before and after each change: it is the simplest way to reduce DOM size step by step and see what each fix was worth.

Frequently asked questions