Shopify responsive LCP images and the Core Web Vitals

Sites with <picture> responsive LCP image markup have a good LCP most often: 97%, against 95% of all Shopify sites. Sites with srcset responsive markup have it least often, at 95%.

69.4% of Shopify sites use responsive LCP image markup, and four in five of those use srcset. <picture> is 20% of the sites with responsive markup, 13.8% of all Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between <picture> and no sits in resource load delay: 557 ms median for <picture> against 679 ms for no. Overall median field LCP is 1.4s for <picture> (TTFB 419 ms, load delay 557 ms, load duration 192 ms, render delay 347 ms) versus 1.5s for no.

On jQuery, 49% of sites use srcset responsive LCP image markup, and 93% of jQuery sites have a good LCP, against 95% of all sites. On Vue, 52% of sites use srcset, and 94% of Vue sites have a good LCP.

FrameworkResponsive LCP image markup on its sitesGood LCP

Shopify sites with responsive LCP image markup 7,873 sitessrcset attribute 56%No responsive markup 31%<picture> element 14%95%

Vue 892 sitessrcset attribute 52%No responsive markup 32%<picture> element 16%94%

jQuery 3,031 sitessrcset attribute 49%No responsive markup 43%93%

srcset attribute No responsive markup <picture> element

Does the framework explain the responsive LCP image markup difference?

On jQuery, 93% of sites with <picture> responsive LCP image markup have a good LCP, against 92% of jQuery sites with no. Within jQuery, sites with <picture> and no have a good LCP about equally often. On Vue, 93% of sites with <picture> responsive LCP image markup have a good LCP, against 95% of Vue sites with no. Within Vue, sites with <picture> and no have a good LCP about equally often.

Why srcset and <picture> matter most on mobile viewports

Without srcset or <picture>, a mobile phone on a cellular connection downloads the same 1600px or 2000px hero banner prepared for a desktop monitor. Providing width descriptors in srcset with a matching sizes attribute lets Chrome's preload scanner pick the candidate that fits the device's screen width and pixel ratio before layout runs.