- Web performance
Speculation Rules: prefetch and prerender for e-commerce
Speculation Rules allow the browser to preload pages before clicking. Case studies on Rayban and Chanel with measured LCP gains.
Paul Delcloy
Author
On an e-commerce site, clicking on a product page takes on average 800 ms to 2 s before the first display. The Speculation Rules allow reducing this time to almost zero by preloading the page even before the user clicks.
The principle: anticipate the next click
Speculation Rules are a declarative API integrated into Chrome since version 121. They replace the old with a more powerful and controllable mechanism. There are two levels of anticipation:
Prefetch downloads the HTML and critical sub-resources of the target page. Rendering occurs on click.
Prerender goes further: the browser constructs the complete DOM in the background. On click, the page displays instantly.
The implementation is contained in a JSON block within a
The eagerness parameter controls the triggering: conservative waits for hover, moderate anticipates a bit more, eager preloads immediately.
Rayban: one of the first to deploy in production
Starting in January 2025, Ray-Ban experimented with adding Speculation Rules to its e-commerce website. Being very early in the implementation, they shared a large amount of technical and business information with Google as part of writing an article published on the web.dev blog.
Technical performance (speed)
The goal was to make the transition from product lists (PLP) to product pages (PDP) almost instantaneous. The LCP (Largest Contentful Paint) improved by 43% on mobile and desktop, going from 4.69s to 2.66s on mobile and from 3.03s to 1.74s on desktop.
Business impact (engagement and sales)
This is where the feedback is most striking, as it proves that the