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 95% of all Shopify sites. Sites with over 3 MB of audio/video media media payload have it least often, at 93%.

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

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: 294 ms median for no audio or video requests against 379 ms for over 3 MB of audio/video media. Overall median field LCP is 1.3s for no audio or video requests (TTFB 397 ms, load delay 585 ms, load duration 210 ms, render delay 294 ms) versus 1.5s 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: 294 ms median for no audio or video requests against 379 ms for over 3 MB of audio/video media. Overall median field LCP is 1.3s for no audio or video requests (TTFB 397 ms, load delay 585 ms, load duration 210 ms, render delay 294 ms) versus 1.5s 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 93% of jQuery sites have a good LCP, against 95% of all sites.

jQuery sets the audio and video payload to no audio or video requests on 80% of its sites, and 92% of jQuery sites have a good INP, against 93% 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%95%

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

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

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, 93% of sites with no audio or video requests audio and video payload have a good LCP, against 88% 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 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 LCP about equally often.

On jQuery, 94% of sites with no audio or video requests audio and video payload have a good INP, against 89% of jQuery sites with under 500 KB of audio/video media. Within jQuery, sites with no audio or video requests and under 500 KB of audio/video media have a good INP about equally often. On Vue, 95% of sites with no audio or video requests audio and video payload have a good INP, against 86% of Vue sites with under 500 KB of audio/video media. Within Vue, sites with no audio or video requests have a good INP more 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 93% (1.5s median) under 500 KB and 93% (1.5s median) above 3 MB.