DOM X-Ray

Your HTML has a shape

Every web page is a tree: elements inside elements inside elements. Browsers walk that tree thousands of times, for every style recalculation, every layout pass, every querySelector. Developers almost never see it, because devtools show the tree one collapsed branch at a time. DOM X-Ray shows you the whole thing at once: paste a URL and the page’s structure rises out of the ground as a city of glowing blocks, districts for sections, towers where the nesting runs deep, red lights where something is actually wrong.

Why DOM size and depth matter

Lighthouse’s “avoid an excessive DOM size” audit exists because big trees have real costs. Memory first: every element is an object the browser keeps alive. Then style: when CSS changes, the browser re-matches selectors against affected subtrees, and the bigger the tree, the bigger the bill. Then layout: deep nesting means long chains of boxes whose sizes depend on each other. On a fast desktop you may never notice. On a mid-range phone, a 3,000-element page with 20-deep nesting is the difference between instant and sluggish, and Interaction to Next Paint (a Core Web Vitals metric) suffers with it.

The thresholds we grade against are the ones Lighthouse publishes: around 800 elements earns a warning, past roughly 1,400 is flagged as a problem. Depth and width have softer guidance, so we grade a page more gently there: full credit up to 10 levels deep and 40 children per parent, falling to zero by 25 levels and 100 children.

Reading the city

Colour is tag family: blue for structure (div, section, nav, lists, tables), green for text (headings, paragraphs, spans), purple for media (images, video, SVG, iframes), yellow for interactive elements (links, buttons, form fields), grey for everything else. Red overrides all of them: a red building is a concrete finding, a deprecated tag, an image without alt text, an inline event handler.

Height is nesting. A healthy page reads as a low, even skyline. Div-soup reads as needle towers; a page built from nested tables (they still exist) reads as a stepped pyramid. Hover any building for its breadcrumb path; click it for the full story: tag, id or class, nesting level, direct children, subtree size. The legend chips filter families in and out, and the “Flagged only” chip strips the city down to just its problems.

The DOM Health score

Seven sections feed the A to F grade, on the same scorecard scale as our SEO Analyzer and Security Scanner: total elements (weighted heaviest, Lighthouse-aligned), maximum nesting depth, the widest single parent, deprecated tags, images missing alt text, inline styles and event handlers, and raw HTML weight. Each fix pill is specific, with the path to the exact element so you can find it in your templates.

What to do about a heavy tree

Find the tallest tower first: it is usually a component wrapped in six styling divs that modern CSS (flexbox, grid, gap) no longer needs. Find the widest district next: a 1,000-item list nobody scrolls to the end of wants pagination or virtual rendering. Replace deprecated tags with CSS equivalents. Give every content image an alt attribute. And if the page comes out of a page builder, audit what the builder emits: builders are the single most common source of DOM bloat we see.

For AI agents

This tool exposes a plain-text endpoint designed for language models and agents:

GET https://nitrosites.com/tools/dom-xray/scan.php?url=<target>&format=agent

It returns a token-cheap digest of the same analysis: the DOM Health score, node count, depth and width with their exact paths, family percentages, flag counts and the findings list. Soft rate limits apply; results are cached briefly. No key or login required.

Frequently asked questions

What is DOM size and why does it matter?

The DOM is the tree of elements a browser builds from your HTML. Big trees cost memory, slow style and layout work, and make every JavaScript query slower, especially on phones. Lighthouse warns above roughly 800 elements and flags pages past about 1,400.

What does building height mean in the city view?

Height is nesting depth, how many wrappers sit inside wrappers at that spot. Tall thin towers are div-soup; wide flat districts are long lists. Healthy pages are low-rise and evenly spread.

Why are some buildings red?

Red marks a concrete problem on that element, such as a deprecated tag like font or center, an image with no alt text, or an inline event handler. Click any building to see exactly what and where it is.

How do I reduce DOM size?

Remove wrapper divs that exist only for styling (modern CSS rarely needs them), paginate or virtualise long lists, lazy-render off-screen sections, and audit page builders, which are the usual source of bloat.

Is this the same as Firefox's old Tilt 3D inspector?

Same spirit, new life. Tilt visualised your own browser's live DOM and was retired in 2013. DOM X-Ray works on any public URL, adds Lighthouse-aligned scoring and fix lists, and needs no extension.