WordPress LCP image byte weight and the Core Web Vitals

Sites with an LCP image between 40 and 100 KB LCP image byte weight have a good LCP most often: 71%, against 70% of all WordPress sites. Sites with an LCP image over 300 KB hero image size have it least often, at 65%.

An LCP image over 300 KB is the most used: 30.3% of WordPress sites. An LCP image between 40 and 100 KB is 21.4% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between an LCP image between 40 and 100 KB and an LCP image over 300 KB sits in resource load duration: 161 ms median for an LCP image between 40 and 100 KB against 249 ms for an LCP image over 300 KB. Overall median field LCP is 1.9s for an LCP image between 40 and 100 KB (TTFB 1092 ms, load delay 317 ms, load duration 161 ms, render delay 248 ms) versus 2.1s for an LCP image over 300 KB.

On jQuery, 30% of sites use an LCP image over 300 KB LCP image byte weight, and 69% of jQuery sites have a good LCP, against 70% of all sites. On Vue, 30% of sites use an LCP image between 100 and 300 KB, and 67% of Vue sites have a good LCP.

FrameworkLCP image byte weight on its sitesGood LCP

WordPress sites with LCP image byte weight 45,765 sitesOver 300 KB hero image 30%100 to 300 KB hero image 29%40 to 100 KB hero image 21%Under 40 KB hero image 20%70%

jQuery 43,752 sitesOver 300 KB hero image 30%100 to 300 KB hero image 29%40 to 100 KB hero image 21%Under 40 KB hero image 20%69%

Vue 3,690 sites100 to 300 KB hero image 30%Over 300 KB hero image 29%40 to 100 KB hero image 21%Under 40 KB hero image 20%67%

React 1,621 sitesOver 300 KB hero image 29%100 to 300 KB hero image 25%40 to 100 KB hero image 23%Under 40 KB hero image 22%63%

Over 300 KB hero image 100 to 300 KB hero image 40 to 100 KB hero image Under 40 KB hero image

Does the framework explain the LCP image byte weight difference?

On jQuery, 70% of sites with an LCP image between 40 and 100 KB LCP image byte weight have a good LCP, against 64% of jQuery sites with an LCP image over 300 KB. Within jQuery, sites with an LCP image between 40 and 100 KB have a good LCP more often. On Vue, 72% of sites with an LCP image between 40 and 100 KB LCP image byte weight have a good LCP, against 62% of Vue sites with an LCP image over 300 KB. Within Vue, sites with an LCP image between 40 and 100 KB have a good LCP more often.

How intrinsic versus rendered megapixels waste hero bandwidth

The median LCP image is 0.23 intrinsic megapixels rendered into a 0.12 megapixel slot. Serving unresized desktop banners to mobile viewports inflates hero transfer bytes and extends LCP load duration. Across 8,968 sites (19.6%) with a hero image under 40 KB, 71% pass field LCP (1.9s median), dropping to 65% (2.1s median) on the 30.3% (13,867) exceeding 300 KB.