Shopify DOM element count and the Core Web Vitals

Sites with 800 to 1,499 DOM elements DOM element count have a good INP most often: 100%, against 99% of all Shopify sites. Sites with 400 to 799 DOM elements DOM size have it least often, at 99%.

Sites with 800 to 1,499 DOM elements DOM element count have a good LCP most often: 98%, against 97% of all Shopify sites. Sites with 1,500+ DOM elements DOM size have it least often, at 96%.

1,500+ DOM elements is the most used: 67.6% of Shopify sites. 800 to 1,499 DOM elements is 24.8% of Shopify sites.

On jQuery, 67% of sites use 1,500+ DOM elements DOM element count, and 99% of jQuery sites have a good INP, against 99% of all sites. On Vue, 81% of sites use 1,500+ DOM elements, and 100% of Vue sites have a good INP.

On jQuery, 67% of sites use 1,500+ DOM elements DOM element count, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 81% of sites use 1,500+ DOM elements, and 97% of Vue sites have a good LCP.

FrameworkDOM element count on its sitesGood INP

All Shopify sites 8,246 sites1,500+ elements 68%800 to 1,499 elements 25%99%

Vue 933 sites1,500+ elements 81%800 to 1,499 elements 17%100%

jQuery 3,153 sites1,500+ elements 67%800 to 1,499 elements 24%99%

1,500+ elements 800 to 1,499 elements 400 to 799 elements Under 400 elements

Does the framework explain the DOM element count difference?

On jQuery, 100% of sites with 800 to 1,499 DOM elements DOM element count have a good INP, against 99% of jQuery sites with 1,500+ DOM elements. Within jQuery, sites with 800 to 1,499 DOM elements and 1,500+ DOM elements have a good INP about equally often. On Vue, 100% of sites with 800 to 1,499 DOM elements DOM element count have a good INP, against 100% of Vue sites with 1,500+ DOM elements. Within Vue, sites with 800 to 1,499 DOM elements and 1,500+ DOM elements have a good INP about equally often.

On jQuery, 96% of sites with 800 to 1,499 DOM elements DOM element count have a good LCP, against 95% of jQuery sites with 1,500+ DOM elements. Within jQuery, sites with 800 to 1,499 DOM elements and 1,500+ DOM elements have a good LCP about equally often. On Vue, 98% of sites with 800 to 1,499 DOM elements DOM element count have a good LCP, against 96% of Vue sites with 1,500+ DOM elements. Within Vue, sites with 800 to 1,499 DOM elements and 1,500+ DOM elements have a good LCP about equally often.

How DOM tree size taxes style recalculation and layout during interactions

Every time a user taps a menu, filters a grid, or toggles a class, the browser recalculates styles and layout across affected DOM nodes. Across 540 sites (6.5%) with 400 to 799 elements, 99% pass field INP at a 39ms median, and the 24.8% between 800 and 1,499 elements reach 100% good INP (49ms median). Once the document tree crosses 1,500 elements (67.6% of sites, 5,574), good INP drops to 99% and median INP rises to 63ms.