Shopify DOM tree depth and the Core Web Vitals

Sites with under 15 DOM levels maximum DOM depth have a good INP most often: 100%, against 93% of all Shopify sites. Sites with 21 to 31 DOM levels DOM depth have it least often, at 92%.

21 to 31 DOM levels is the most used: 49.2% of Shopify sites. Under 15 DOM levels is 4.9% of Shopify sites.

On jQuery, 47% of sites use 15 to 20 DOM levels maximum DOM depth, and 92% of jQuery sites have a good INP, against 93% of all sites. On Vue, 53% of sites use 21 to 31 DOM levels, and 91% of Vue sites have a good INP.

FrameworkMaximum DOM depth on its sitesGood INP

All Shopify sites 8,246 sites21 to 31 levels deep 49%15 to 20 levels deep 44%93%

jQuery 3,153 sites15 to 20 levels deep 47%21 to 31 levels deep 42%92%

Vue 933 sites21 to 31 levels deep 53%15 to 20 levels deep 43%91%

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

Does the framework explain the maximum DOM depth difference?

On jQuery, 100% of sites with under 15 DOM levels maximum DOM depth have a good INP, against 90% of jQuery sites with 21 to 31 DOM levels. Within jQuery, sites with under 15 DOM levels have a good INP more often. On Vue, 89% of sites with 21 to 31 DOM levels maximum DOM depth have a good INP, against 94% of Vue sites with 15 to 20 DOM levels. Within Vue, 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 3,655 sites (44.3%) at 15 to 20 levels, 95% achieve good INP (106ms median). Another 49.2% (4,053) nest 21 to 31 levels deep (92% good INP, 116ms median), while the 1.6% (134) exceeding 32 levels drop to 80% good INP (145ms median).