DOM Size

Detects excessive DOM complexity that impacts performance

Solution

Large DOMs slow page rendering, increase memory usage, and harm mobile performance. Google recommends keeping total nodes under 1500.

Fixes for large DOMs:

• Use virtualization for long lists (e.g., react-window)
• Lazy-load off-screen content
• Reduce unnecessary wrapper elements
• Use CSS instead of DOM for visual effects
• Paginate large content sections

Options

This rule supports the following configuration options:

Configuration Example

[rules."perf/dom-size"]
warn_threshold = undefined
error_threshold = undefined
max_depth = undefined
max_children = undefined

Enable / Disable

Disable this rule

[rules]
disable = ["perf/dom-size"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/dom-size"]
disable = ["*"]