Shopify LCP image byte weight and the Core Web Vitals

Sites with an LCP image between 100 and 300 KB LCP image byte weight have a good LCP most often: 97%, against 95% of all Shopify sites. Sites with an LCP image over 300 KB hero image size have it least often, at 94%.

An LCP image under 40 KB is the most used: 41.7% of Shopify sites. An LCP image between 100 and 300 KB is 14.3% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between an LCP image between 100 and 300 KB and an LCP image over 300 KB sits in resource load delay: 603 ms median for an LCP image between 100 and 300 KB against 680 ms for an LCP image over 300 KB. Overall median field LCP is 1.4s for an LCP image between 100 and 300 KB (TTFB 385 ms, load delay 603 ms, load duration 221 ms, render delay 342 ms) versus 1.5s for an LCP image over 300 KB.

On jQuery, 40% of sites use an LCP image between 40 and 100 KB LCP image byte weight, and 93% of jQuery sites have a good LCP, against 95% of all sites. On Vue, 43% of sites use an LCP image between 40 and 100 KB, and 94% of Vue sites have a good LCP.

FrameworkLCP image byte weight on its sitesGood LCP

Shopify sites with LCP image byte weight 6,910 sitesUnder 40 KB hero image 42%40 to 100 KB hero image 41%100 to 300 KB hero image 14%95%

Vue 784 sites40 to 100 KB hero image 43%Under 40 KB hero image 38%100 to 300 KB hero image 14%94%

jQuery 2,651 sites40 to 100 KB hero image 40%Under 40 KB hero image 40%100 to 300 KB hero image 16%93%

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

Does the framework explain the LCP image byte weight difference?

On jQuery, 94% of sites with an LCP image between 100 and 300 KB LCP image byte weight have a good LCP, against 92% of jQuery sites with an LCP image under 40 KB. Within jQuery, sites with an LCP image between 100 and 300 KB and an LCP image under 40 KB have a good LCP about equally often. On Vue, 97% of sites with an LCP image between 100 and 300 KB LCP image byte weight have a good LCP, against 95% of Vue sites with an LCP image under 40 KB. Within Vue, sites with an LCP image between 100 and 300 KB and an LCP image under 40 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 2,882 sites (41.7%) with a hero image under 40 KB, 95% pass field LCP (1.4s median), dropping to 94% (1.5s median) on the 3.2% (223) exceeding 300 KB.