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: 98%, against 97% of all Shopify sites. Sites with an LCP image between 40 and 100 KB hero image size have it least often, at 96%.

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 between 40 and 100 KB sits in resource load duration: 159 ms median for an LCP image between 100 and 300 KB against 149 ms for an LCP image between 40 and 100 KB. Overall median field LCP is 1.3s for an LCP image between 100 and 300 KB (TTFB 303 ms, load delay 634 ms, load duration 159 ms, render delay 323 ms) versus 1.3s for an LCP image between 40 and 100 KB.

On jQuery, 40% of sites use an LCP image between 40 and 100 KB LCP image byte weight, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 43% of sites use an LCP image between 40 and 100 KB, and 97% 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%97%

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

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

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, 96% of sites with an LCP image between 100 and 300 KB LCP image byte weight have a good LCP, against 97% 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, 98% of sites with an LCP image between 100 and 300 KB LCP image byte weight have a good LCP, against 97% 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, 97% pass field LCP (1.3s median), dropping to 97% (1.5s median) on the 3.2% (223) exceeding 300 KB.