Shopify LCP image byte weight and the Core Web Vitals

Sites with an LCP image under 40 KB LCP image byte weight have a good LCP most often: 97%, against 96% 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.

Across the four LCP sub-parts in Chrome's field data, the largest gap between an LCP image under 40 KB and an LCP image over 300 KB sits in element render delay: 266 ms median for an LCP image under 40 KB against 367 ms for an LCP image over 300 KB. Overall median field LCP is 1.3s for an LCP image under 40 KB (TTFB 390 ms, load delay 570 ms, load duration 208 ms, render delay 266 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 94% of jQuery sites have a good LCP, against 96% of all sites. On Vue, 43% of sites use an LCP image between 40 and 100 KB, and 95% 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%96%

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

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

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