Shopify responsive image markup and the Core Web Vitals

Sites with <picture> art direction responsive image markup have a good LCP most often: 97%, against 97% of all Shopify sites. Sites with fixed-source <img> responsive markup have it least often, at 96%.

Srcset and sizes is the most used: 96.0% of Shopify sites. <picture> art direction is 29.1% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between <picture> art direction and fixed-source <img> sits in element render delay: 349 ms median for <picture> art direction against 318 ms for fixed-source <img>. Overall median field LCP is 1.4s for <picture> art direction (TTFB 303 ms, load delay 661 ms, load duration 141 ms, render delay 349 ms) versus 1.3s for fixed-source <img>.

On jQuery, 92% of sites use srcset and sizes responsive image markup, and 95% of jQuery sites have a good LCP, against 97% of all sites. On Vue, 97% of sites use srcset and sizes, and 97% of Vue sites have a good LCP.

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%97%

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

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

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

Does the framework explain the responsive image markup difference?

On jQuery, 95% of sites with <picture> art direction responsive image markup have a good LCP, against 96% of jQuery sites with srcset and sizes. Within jQuery, sites with <picture> art direction and srcset and sizes have a good LCP about equally often. On Vue, 97% of sites with <picture> art direction responsive image markup have a good LCP, against 97% of Vue sites with srcset and sizes. Within Vue, sites with <picture> art direction and srcset and sizes 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 97% good LCP (1.3s median LCP), compared with 97% on sites using <img srcset> (96.0%) and 96% across sites with fixed-source images (74.9%).