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: 77%, against 76% of all WordPress sites. Sites with an LCP image over 300 KB hero image size have it least often, at 74%.

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: 121 ms median for an LCP image between 40 and 100 KB against 166 ms for an LCP image over 300 KB. Overall median field LCP is 1.7s for an LCP image between 40 and 100 KB (TTFB 987 ms, load delay 274 ms, load duration 121 ms, render delay 223 ms) versus 1.8s for an LCP image over 300 KB.

On jQuery, 30% of sites use an LCP image over 300 KB LCP image byte weight, and 75% of jQuery sites have a good LCP, against 76% of all sites. On Vue, 30% of sites use an LCP image between 100 and 300 KB, and 75% 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%76%

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%75%

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%75%

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%66%

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, 76% of sites with an LCP image between 40 and 100 KB LCP image byte weight have a good LCP, against 74% of jQuery sites with an LCP image over 300 KB. Within jQuery, sites with an LCP image between 40 and 100 KB and an LCP image over 300 KB have a good LCP about equally often. On Vue, 77% of sites with an LCP image between 40 and 100 KB LCP image byte weight have a good LCP, against 74% of Vue sites with an LCP image over 300 KB. Within Vue, sites with an LCP image between 40 and 100 KB and an LCP image over 300 KB have a good LCP about equally 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, 75% pass field LCP (1.8s median), dropping to 74% (1.8s median) on the 30.3% (13,867) exceeding 300 KB.