Shopify audio and video payload and the Core Web Vitals

Sites with no audio or video requests audio and video payload have a good LCP most often: 96%, against 96% of all Shopify sites. Sites with over 3 MB of audio/video media media payload have it least often, at 94%.

Sites with no audio or video requests audio and video payload have a good INP most often: 97%, against 96% of all Shopify sites. Sites with over 3 MB of audio/video media media payload have it least often, at 92%.

No audio or video requests is the most used: 78.1% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between no audio or video requests and over 3 MB of audio/video media sits in element render delay: 281 ms median for no audio or video requests against 368 ms for over 3 MB of audio/video media. Overall median field LCP is 1.3s for no audio or video requests (TTFB 386 ms, load delay 584 ms, load duration 215 ms, render delay 281 ms) versus 1.4s for over 3 MB of audio/video media.

Across the four LCP sub-parts in Chrome's field data, the largest gap between no audio or video requests and over 3 MB of audio/video media sits in element render delay: 281 ms median for no audio or video requests against 368 ms for over 3 MB of audio/video media. Overall median field LCP is 1.3s for no audio or video requests (TTFB 386 ms, load delay 584 ms, load duration 215 ms, render delay 281 ms) versus 1.4s for over 3 MB of audio/video media.

jQuery sets the audio and video payload to no audio or video requests on 80% of its sites, and 94% of jQuery sites have a good LCP, against 96% of all sites.

jQuery sets the audio and video payload to no audio or video requests on 80% of its sites, and 95% of jQuery sites have a good INP, against 96% of all sites.

FrameworkAudio and video payload on its sitesGood LCP

All Shopify sites 8,246 sitesNo audio/video media 78%Light media (under 500 KB) 12%96%

Vue 933 sitesNo audio/video media 73%Light media (under 500 KB) 14%Heavy media (over 3 MB) 10%95%

jQuery 3,153 sitesNo audio/video media 80%Light media (under 500 KB) 11%94%

No audio/video media Light media (under 500 KB) Heavy media (over 3 MB) Medium media (500 KB to 3 MB)

Does the framework explain the audio and video payload difference?

On jQuery, 95% of sites with no audio or video requests audio and video payload have a good LCP, against 89% of jQuery sites with under 500 KB of audio/video media. Within jQuery, sites with no audio or video requests have a good LCP more often. On Vue, 95% of sites with no audio or video requests audio and video payload have a good LCP, against 96% of Vue sites with under 500 KB of audio/video media. Within Vue, sites with no audio or video requests and under 500 KB of audio/video media have a good LCP about equally often.

On jQuery, 96% of sites with no audio or video requests audio and video payload have a good INP, against 93% of jQuery sites with under 500 KB of audio/video media. Within jQuery, sites with no audio or video requests have a good INP more often. On Vue, 96% of sites with no audio or video requests audio and video payload have a good INP, against 93% of Vue sites with under 500 KB of audio/video media. Within Vue, sites with no audio or video requests and under 500 KB of audio/video media have a good INP about equally often.

How autoplaying video streams saturate initial bandwidth

When a <video> tag loads without preload="none" or an optimized poster image, the browser fetches megabytes of video segments concurrently with critical stylesheets and hero assets. Across 6,439 sites (78.1%) with no initial media requests, 96% pass field LCP at a 1.3s median, versus 95% (1.4s median) under 500 KB and 94% (1.4s median) above 3 MB.