WordPress script loading attributes and the Core Web Vitals

Sites with ES module scripts script loading strategy have a good LCP most often: 71%, against 70% of all WordPress sites. Sites with deferred scripts script loading have it least often, at 66%.

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

Inline scripts is the most used: 99.9% of WordPress sites. ES module scripts is 14.1% of WordPress sites.

Across the four LCP sub-parts in Chrome's field data, the largest gap between ES module scripts and deferred scripts sits in time to first byte (TTFB): 1082 ms median for ES module scripts against 1221 ms for deferred scripts. Overall median field LCP is 1.9s for ES module scripts (TTFB 1082 ms, load delay 331 ms, load duration 173 ms, render delay 240 ms) versus 2.0s for deferred scripts.

Across the four LCP sub-parts in Chrome's field data, the largest gap between ES module scripts and deferred scripts sits in time to first byte (TTFB): 1082 ms median for ES module scripts against 1221 ms for deferred scripts. Overall median field LCP is 1.9s for ES module scripts (TTFB 1082 ms, load delay 331 ms, load duration 173 ms, render delay 240 ms) versus 2.0s for deferred scripts.

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

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

FrameworkScript loading strategy on its sitesGood LCP

WordPress sites with script loading strategy 63,282 sitesInline <script> blocks 100%Async (<script async>) 92%Dynamic / script-injected 90%Render-blocking (<script src>) 89%Deferred (<script defer>) 53%ES module (<script type="module">) 14%70%

Alpine 380 sitesInline <script> blocks 100%Async (<script async>) 98%Dynamic / script-injected 87%Render-blocking (<script src>) 83%Deferred (<script defer>) 73%ES module (<script type="module">) 23%80%

jQuery 60,313 sitesInline <script> blocks 100%Async (<script async>) 93%Render-blocking (<script src>) 91%Dynamic / script-injected 91%Deferred (<script defer>) 54%ES module (<script type="module">) 14%69%

Vue 4,844 sitesInline <script> blocks 100%Render-blocking (<script src>) 95%Dynamic / script-injected 91%Async (<script async>) 88%ES module (<script type="module">) 82%Deferred (<script defer>) 47%68%

React 2,233 sitesInline <script> blocks 100%Async (<script async>) 92%Dynamic / script-injected 91%Render-blocking (<script src>) 89%Deferred (<script defer>) 71%ES module (<script type="module">) 20%61%

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

Does the framework explain the script loading strategy difference?

On jQuery, 69% of sites with ES module scripts script loading strategy have a good LCP, against 69% 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, 69% of sites with ES module scripts script loading strategy have a good LCP, against 68% of Vue sites with inline scripts. Within Vue, sites with ES module scripts and inline scripts have a good LCP about equally often.

Almost every site with render-blocking scripts script loading strategy is a jQuery site, and almost every jQuery site has render-blocking scripts script loading strategy, so the data can't tell render-blocking scripts script loading strategy and jQuery apart. On Vue, 97% of sites with render-blocking scripts script loading strategy have a good INP, against 97% of Vue sites with inline scripts. Within Vue, sites with render-blocking scripts and inline scripts have a good INP about equally often. On React, 98% of sites with render-blocking scripts script loading strategy have a good INP, against 98% of React sites with inline scripts. Within React, sites with render-blocking 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 56,414 sites (89.1%) with render-blocking scripts, good LCP drops to 69% (2.0s median). Sites loading scripts with async (92.0%), defer (53.0%), or type="module" (14.1%) reach 70%, 66%, and 71% good LCP.