Rule page.performance.dom-size-excessive
Reduce DOM size
page.performance.dom-size-excessive is a check in Crawlmind's site audit that grades low-impact issues of this kind. This page explains why the rule matters and the exact fix.
Why it matters
A DOM tree past ~1500 nodes inflates memory, slows layout/style/paint on every interaction, and breaks Lighthouse's "Avoid an excessive DOM size" audit. Search crawlers also truncate at large node counts: content past the cutoff is invisible to Google and AI engines.
The fix
Common culprits + fixes:
- **Long lists rendered all at once** (1,000-row tables, all blog posts on the index) → paginate, virtualise, or lazy-load past the first ~50.
- **Deeply-nested wrappers** from styled-components or unnecessary `<div>`-soup → flatten the template; use `<section>` / `<article>` semantically.
- **Hidden modals + offcanvas panels rendered eagerly** → render on demand (Vue: `<Teleport>` + `v-if`; React: lazy mount).
- **Verbose icon SVGs inlined**: extract to a sprite sheet or use `<use href>` references.
Audit with DevTools → Elements → root → check the node count in the status bar, or:
```js
document.getElementsByTagName('*').length
```