DOM Size Checker

A DOM size checker counts how many HTML elements a page contains and how deeply they are nested. A large DOM takes longer to style, lay out and update, which slows rendering and makes a page respond more slowly to clicks and taps. This tool fetches any public URL and reports the total number of elements, the maximum nesting depth, the number of direct children of <body>, and the 12 most-used tags.

Reading the result: up to 1,500 elements is shown as within the recommended limit, 1,501–3,000 gets a warning and more than 3,000 is critical, and nesting deeper than 32 levels is flagged too. For comparison, Lighthouse flags pages with more than about 1,400 elements. The tag breakdown shows where the weight comes from: thousands of div, span, svg or path elements usually point to wrapper-heavy components, inline SVG icons or long lists.

Limits: the count comes from the HTML your server returns, including the <head>, before JavaScript runs. Pages that build most of their content with JavaScript have more elements in the browser than this tool sees; to count the live DOM, run document.querySelectorAll('*').length in the browser console.

DOM size is a common cause of slow Interaction to Next Paint (INP), the Core Web Vitals metric for responsiveness, and a smaller DOM also means less HTML to download and parse. The tag breakdown tells you which template or component to simplify first.