The State of Web Vitals

DOM depth

The deepest nesting level in the DOM tree.

Field data PhoneDesktopAll Scope All sites Q1 2026 edition · Phone field outcomes
Metric LCP INP CLS
1

At a glance the headline numbers for DOM depth

The deepest nesting level in the DOM tree.

18
on the typical site
half of sites sit at or below
23
1 in 4 sites exceed this
the top quarter
41
the heaviest 1%
the long tail
94,748
sites measured
phone field data

The typical DOM tree is 18 levels deep.

The State of Web Vitals · Q1 2026 · 94,910 sites · phone field datacorewebvitals.io/state-of-cwv
2

Distribution & median LCP site count and median LCP at each level of DOM depth

0ms 750ms 1500ms 2250ms 3000ms
2.5s
0 16491 32982
0 1 2 3 4 5–6 7–9 10–13 14–18 19–26 27–37 >p98
Good (≤2.5s) Needs improvement Poor (>4s) Site count
The State of Web Vitals · Q1 2026 · 94,910 sites · phone field datacorewebvitals.io/state-of-cwv
3

Passing LCP by DOM depth which level passes the LCP most often

DOM depthSitesPassing LCPLCP
1 217 84% 1.6s
2 904 80% 1.6s
3 303 81% 1.4s
4 259 82% 1.2s
5–6 877 87% 1.2s
7–9 3,241 90% 1.1s
10–13 14,769 89% 1.3s
14–18 30,165 84% 1.5s
19–26 32,982 78% 1.7s
27–37 9,399 76% 1.7s
>p98 1,631 76% 1.6s
Good Needs Improvement Poor Faded rows: under 100 sites

DOM depth 18. p75 23. p99 41. At the low end (1): LCP 1.6s. At the high end (>p98): LCP 1.6s. computed

The State of Web Vitals · Q1 2026 · 94,910 sites · phone field datacorewebvitals.io/state-of-cwv
4

Why this matters for the Core Web Vitals, and where to start fixing it

Depth is a different problem than size. Styles inherit downwards. Toggle a class high in the tree and the browser recalculates everything below it. Layout changes also travel through ancestors, and percentage heights and flexbox make that worse. Selector matching walks the ancestor chain too, so deep trees pay more for every CSS rule.

In practice this shows up as INP. The click is fast and the JavaScript is fast, but the style and layout pass after the update is slow because the change affects too many nested levels. A flatter tree holds the same content but keeps each update local.

How does DOM depth affect the Core Web Vitals?

Nesting levels correlate with the INP. In the flattest trees, 81% of sites pass the INP. In the deepest trees, 87% do. The rise is gradual.

Go fix it Fix excessive DOM size →
Related signals Script coverage (used vs unused) → Image loading attribute → Images per page → Compression mix → Chrome field data from 94,910 sites, representing millions of real page loads · How we measured