DOM tree depth on React sites

Sites with 32+ DOM levels maximum DOM depth have a good INP most often: 99%, against 99% of all React sites. Sites with under 15 DOM levels DOM depth have it least often, at 98%.

21 to 31 DOM levels is the most used: 42.5% of React sites. 32+ DOM levels is 40.1% of React sites.

Wix sets the maximum DOM depth to 32+ DOM levels on 62% of its sites, and 100% of Wix sites have a good INP, against 99% of all sites.

PlatformMaximum DOM depth on its sitesGood INP

All React sites 9,570 sites21 to 31 levels deep 43%32+ levels deep 40%15 to 20 levels deep 14%99%

Wix 5,824 sites32+ levels deep 62%21 to 31 levels deep 37%100%

WordPress 2,342 sites21 to 31 levels deep 49%15 to 20 levels deep 38%100%

21 to 31 levels deep 32+ levels deep 15 to 20 levels deep Under 15 levels deep

Does the platform explain the maximum DOM depth difference?

On Wix, 100% of sites with 32+ DOM levels maximum DOM depth have a good INP, against 100% of Wix sites with 21 to 31 DOM levels. Within Wix, sites with 32+ DOM levels and 21 to 31 DOM levels have a good INP about equally often. On WordPress, 100% of sites with 21 to 31 DOM levels maximum DOM depth have a good INP, against 99% of WordPress sites with 15 to 20 DOM levels. Within WordPress, sites with 21 to 31 DOM levels and 15 to 20 DOM levels have a good INP about equally often.

Why deeply nested wrapper chains slow down event bubbling and layout

Maximum DOM depth measures the longest chain of nested parent-child elements from the root html tag to the deepest leaf node. Across 1,315 sites (13.7%) at 15 to 20 levels, 99% achieve good INP (53ms median). Another 42.5% (4,070) nest 21 to 31 levels deep (99% good INP, 50ms median), while the 40.1% (3,841) exceeding 32 levels drop to 99% good INP (43ms median).