WordPress DOM element count and the Core Web Vitals

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

Sites with under 400 DOM elements DOM element count have a good LCP most often: 90%, against 76% of all WordPress sites. Sites with 1,500+ DOM elements DOM size have it least often, at 66%.

400 to 799 DOM elements is the most used: 37.3% of WordPress sites.

On jQuery, 37% of sites use 400 to 799 DOM elements DOM element count, and 100% of jQuery sites have a good INP, against 100% of all sites. On Vue, 42% of sites use 800 to 1,499 DOM elements, and 99% of Vue sites have a good INP.

On jQuery, 37% of sites use 400 to 799 DOM elements DOM element count, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 42% of sites use 800 to 1,499 DOM elements, and 75% of Vue sites have a good LCP.

FrameworkDOM element count on its sitesGood INP

All WordPress sites 63,295 sites400 to 799 elements 37%800 to 1,499 elements 33%1,500+ elements 16%Under 400 elements 14%100%

jQuery 60,314 sites400 to 799 elements 37%800 to 1,499 elements 34%1,500+ elements 16%Under 400 elements 13%100%

React 2,233 sites800 to 1,499 elements 41%400 to 799 elements 27%1,500+ elements 26%100%

Vue 4,844 sites800 to 1,499 elements 42%400 to 799 elements 29%1,500+ elements 25%99%

Alpine 380 sites800 to 1,499 elements 34%400 to 799 elements 33%1,500+ elements 25%99%

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

Does the framework explain the DOM element count difference?

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

On jQuery, 89% of sites with under 400 DOM elements DOM element count have a good LCP, against 82% of jQuery sites with 400 to 799 DOM elements. Within jQuery, sites with under 400 DOM elements have a good LCP more often. On Vue, 83% of sites with 400 to 799 DOM elements DOM element count have a good LCP, against 75% of Vue sites with 800 to 1,499 DOM elements. Within Vue, sites with 400 to 799 DOM elements and 800 to 1,499 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 23,625 sites (37.3%) with 400 to 799 elements, 100% pass field INP at a 45ms median, and the 33.0% between 800 and 1,499 elements reach 100% good INP (48ms median). Once the document tree crosses 1,500 elements (15.9% of sites, 10,070), good INP drops to 99% and median INP rises to 56ms.