Shopify responsive LCP images and the Core Web Vitals

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

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: 606 ms median for <picture> against 714 ms for no. Overall median field LCP is 1.3s for <picture> (TTFB 304 ms, load delay 606 ms, load duration 146 ms, render delay 334 ms) versus 1.3s for no.

On jQuery, 49% of sites use srcset responsive LCP image markup, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 52% of sites use srcset, and 97% 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%97%

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

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

srcset attribute No responsive markup <picture> element

Does the framework explain the responsive LCP image markup difference?

On jQuery, 96% of sites with <picture> responsive LCP image markup have a good LCP, against 94% of jQuery sites with no. Within jQuery, sites with <picture> and no have a good LCP about equally often. On Vue, 96% of sites with <picture> responsive LCP image markup have a good LCP, against 96% 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.