Shopify responsive image markup and the Core Web Vitals

Sites with srcset and sizes responsive image markup have a good LCP most often: 96%, against 96% of all Shopify sites. Sites with fixed-source <img> responsive markup have it least often, at 95%.

Srcset and sizes is the most used: 96.0% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between srcset and sizes and fixed-source <img> sits in element render delay: 295 ms median for srcset and sizes against 326 ms for fixed-source <img>. Overall median field LCP is 1.3s for srcset and sizes (TTFB 389 ms, load delay 590 ms, load duration 209 ms, render delay 295 ms) versus 1.4s for fixed-source <img>.

Vue sets the responsive image markup to srcset and sizes on 97% of its sites, and 95% of Vue sites have a good LCP, against 96% of all sites.

FrameworkResponsive image markup on its sitesGood LCP

Shopify sites with responsive image markup 8,223 sites<img srcset="..."> 96%Fixed-source <img> (no srcset) 75%<picture> with <source> 29%96%

Vue 933 sites<img srcset="..."> 97%Fixed-source <img> (no srcset) 85%<picture> with <source> 31%95%

jQuery 3,144 sites<img srcset="..."> 92%Fixed-source <img> (no srcset) 85%<picture> with <source> 32%94%

<img srcset="..."> Fixed-source <img> (no srcset) <picture> with <source>

Does the framework explain the responsive image markup difference?

On jQuery, 94% of sites with srcset and sizes responsive image markup have a good LCP, against 93% of jQuery sites with fixed-source <img>. Within jQuery, sites with srcset and sizes and fixed-source <img> have a good LCP about equally often. On Vue, 96% of sites with srcset and sizes responsive image markup have a good LCP, against 94% of Vue sites with fixed-source <img>. Within Vue, sites with srcset and sizes and fixed-source <img> have a good LCP about equally often.

How srcset and <picture> select candidate URLs during preload scanning

Chromium's preload scanner evaluates <source media="..." type="..."> and <img srcset="..." sizes="..."> before the main parser builds the DOM. Sites that serve responsive <picture> elements (29.1% of sites) achieve 96% good LCP (1.4s median LCP), compared with 96% on sites using <img srcset> (96.0%) and 95% across sites with fixed-source images (74.9%).