Shopify speculation rules posture and the Core Web Vitals

Sites with prefetch speculation rules pass all three Core Web Vitals most often: 89%, against 88% of all Shopify sites. The biggest gap is LCP, 97% against 96%.

Sites with prefetch speculation rules have a good LCP most often: 97%, against 96% of all Shopify sites.

Sites with prefetch speculation rules have a good INP most often: 95%, against 96% of all Shopify sites.

Sites with prefetch speculation rules have a good CLS most often: 95%, against 94% of all Shopify sites.

6.3% of Shopify sites use speculation rules, and 95% of those use prefetch.

On jQuery, 94% of sites use no speculation rules, and 83% of jQuery sites pass all three Core Web Vitals, against 88% of all sites. On Vue, 92% of sites use no, and 83% of Vue sites pass all three.

On jQuery, 94% of sites use no speculation rules, and 94% of jQuery sites have a good LCP, against 96% of all sites. On Vue, 92% of sites use no, and 95% of Vue sites have a good LCP.

On jQuery, 94% of sites use no speculation rules, and 95% of jQuery sites have a good INP, against 96% of all sites. On Vue, 92% of sites use no, and 94% of Vue sites have a good INP.

On jQuery, 94% of sites use no speculation rules, and 91% of jQuery sites have a good CLS, against 94% of all sites. On Vue, 92% of sites use no, and 91% of Vue sites have a good CLS.

FrameworkSpeculation rules on its sitesPass all three

All Shopify sites 8,246 sitesNo rules 94%88%

Vue 933 sitesNo rules 92%83%

jQuery 3,153 sitesNo rules 94%83%

No rules Prefetch Prerender

Does the framework explain the speculation rules difference?

On jQuery, 87% of sites with prefetch speculation rules pass all three Core Web Vitals, against 83% of jQuery sites with no. Within jQuery, sites with prefetch and no pass all three about equally often. On Vue, 84% of sites with prefetch speculation rules pass all three Core Web Vitals, against 83% of Vue sites with no. Within Vue, sites with prefetch and no pass all three about equally often.

On jQuery, 97% of sites with prefetch speculation rules have a good LCP, against 94% of jQuery sites with no. Within jQuery, sites with prefetch and no have a good LCP about equally often. On Vue, 99% of sites with prefetch speculation rules have a good LCP, against 95% of Vue sites with no. Within Vue, sites with prefetch and no have a good LCP about equally often.

On jQuery, 96% of sites with prefetch speculation rules have a good INP, against 95% of jQuery sites with no. Within jQuery, sites with prefetch and no have a good INP about equally often. On Vue, 90% of sites with prefetch speculation rules have a good INP, against 95% of Vue sites with no. Within Vue, sites with prefetch and no have a good INP about equally often.

On jQuery, 93% of sites with prefetch speculation rules have a good CLS, against 91% of jQuery sites with no. Within jQuery, sites with prefetch and no have a good CLS about equally often. On Vue, 93% of sites with prefetch speculation rules have a good CLS, against 90% of Vue sites with no. Within Vue, sites with prefetch and no have a good CLS about equally often.

How prefetch, prerender-until-script, and prerender differ in Chrome

A prefetch rule only downloads the next page's HTML document ahead of the click, removing network TTFB on the subsequent navigation while leaving subresources and rendering until after the visitor navigates. A prerender-until-script rule downloads the HTML and subresources and builds the DOM and CSSOM in a hidden renderer, pausing before JavaScript executes. A full prerender rule executes scripts and paints the next page in the background so activation is near-instant.