Shopify script loading attributes and the Core Web Vitals

Sites with ES module scripts script loading strategy have a good LCP most often: 97%, against 97% of all Shopify sites. Sites with render-blocking scripts script loading have it least often, at 95%.

Sites with dynamically injected scripts script loading strategy have a good INP most often: 99%, against 99% of all Shopify sites. Sites with render-blocking scripts script loading have it least often, at 99%.

Inline scripts is the most used: 99.9% of Shopify sites. ES module scripts is 99.5% of Shopify sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between ES module scripts and render-blocking scripts sits in resource load delay: 630 ms median for ES module scripts against 741 ms for render-blocking scripts. Overall median field LCP is 1.3s for ES module scripts (TTFB 304 ms, load delay 630 ms, load duration 152 ms, render delay 304 ms) versus 1.4s for render-blocking scripts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between ES module scripts and render-blocking scripts sits in resource load delay: 630 ms median for ES module scripts against 741 ms for render-blocking scripts. Overall median field LCP is 1.3s for ES module scripts (TTFB 304 ms, load delay 630 ms, load duration 152 ms, render delay 304 ms) versus 1.4s for render-blocking scripts.

Vue sets the script loading strategy to ES module scripts on 100% of its sites, and 97% of Vue sites have a good LCP, against 97% of all sites. jQuery sets the script loading strategy to inline scripts on 100% of its sites, and 95% of jQuery sites have a good LCP.

Vue sets the script loading strategy to ES module scripts on 100% of its sites, and 100% of Vue sites have a good INP, against 99% of all sites. jQuery sets the script loading strategy to inline scripts on 100% of its sites, and 99% of jQuery sites have a good INP.

FrameworkScript loading strategy on its sitesGood LCP

Shopify sites with script loading strategy 8,243 sitesInline <script> blocks 100%Async (<script async>) 100%Deferred (<script defer>) 100%ES module (<script type="module">) 100%Dynamic / script-injected 32%Render-blocking (<script src>) 30%97%

Vue 933 sitesInline <script> blocks 100%ES module (<script type="module">) 100%Deferred (<script defer>) 100%Async (<script async>) 100%Dynamic / script-injected 38%Render-blocking (<script src>) 34%97%

jQuery 3,150 sitesInline <script> blocks 100%Async (<script async>) 100%Deferred (<script defer>) 100%ES module (<script type="module">) 99%Render-blocking (<script src>) 51%Dynamic / script-injected 49%95%

Inline <script> blocks Async (<script async>) Deferred (<script defer>) ES module (<script type="module">) Dynamic / script-injected Render-blocking (<script src>) Legacy fallback (<script nomodule>)

Does the framework explain the script loading strategy difference?

On jQuery, 95% of sites with ES module scripts script loading strategy have a good LCP, against 95% of jQuery sites with inline scripts. Within jQuery, sites with ES module scripts and inline scripts have a good LCP about equally often. On Vue, 97% of sites with ES module scripts script loading strategy have a good LCP, against 97% of Vue sites with inline scripts. Within Vue, sites with ES module scripts and inline scripts have a good LCP about equally often.

On jQuery, 99% of sites with dynamically injected scripts script loading strategy have a good INP, against 99% of jQuery sites with inline scripts. Within jQuery, sites with dynamically injected scripts and inline scripts have a good INP about equally often. On Vue, 100% of sites with dynamically injected scripts script loading strategy have a good INP, against 100% of Vue sites with inline scripts. Within Vue, sites with dynamically injected scripts and inline scripts have a good INP about equally often.

How synchronous blocking <script> tags halt the HTML parser before LCP

When the HTML parser hits a synchronous <script src> tag without async, defer, or type="module", it must pause DOM construction, wait for the network download, and execute the script before painting. Across 2,463 sites (29.9%) with render-blocking scripts, good LCP drops to 95% (1.4s median). Sites loading scripts with async (99.9%), defer (99.6%), or type="module" (99.5%) reach 97%, 97%, and 97% good LCP.