• Rarely are there opportunities for big, bold, game-changing improvements in web performance. • The Speculation Rules API (SRA) is a recent browser development that offers just such an opportunity. • This post details a joint effort between the search and the web performance teams at Etsy to implement SRA on Etsy search pages and drastically improve the performance of product listing pages with some metrics seeing 20-24% improvements and some dropping all the way to 0ms values. • Prefetching Options There are two main ways to predictively fetch resources for the next page: allows us to instruct the browser to download a resource we believe we’ll need soon. • The resource can be anything, like a static asset or an HTML page. • Speculation Rules API (SRA) is a recently updated browser API which allows for a JSON definition to dictate what page A wants to do with page B.

Article Summaries:

  • Etsy’s search and web‑performance teams have deployed the Speculation Rules API (SRA) to prefetch product listing pages when users hover over search results. An A/B test on Chromium browsers showed that prefetching the HTML of a listing page 200 ms after hover yields 20‑24 % faster load times, with some metrics reaching 0 ms. The implementation uses a simple JSON rule tied to a CSS selector and a data‑attribute to opt‑in pages, and relies on SRA’s memory and HTTP cache benefits over traditional link prefetching. The rollout was straightforward, but the team noted surprises around cookies, redirects, and tab handling.
  • Etsy’s search and web‑performance teams deployed the Speculation Rules API (SRA) to prefetch product listing pages when users hover over search results on Chromium browsers. By adding a data‑attribute to eligible links and triggering prefetch after a 200‑ms hover, the browser downloads the listing HTML into memory and the HTTP cache. An A/B test showed performance gains of 20‑24 % on key metrics, with some loading times dropping to 0 ms. The rollout highlighted SRA’s simpler API, memory‑caching advantage over traditional link prefetch, and the need to manage limited in‑memory prefetched pages.
  • Etsy’s search and web‑performance teams deployed the browser‑based Speculation Rules API (SRA) to prefetch product listing pages when users hover over search results. An A/B test on Chromium desktops showed 20‑24 % faster load times, with some metrics dropping to 0 ms. The implementation uses a CSS selector and a data‑sr‑prefetch attribute, triggering a 200‑ms hover “moderate” eagerness rule that downloads the listing HTML into both memory and the HTTP cache. The SRA approach is simpler than custom JavaScript, offers an upgrade path to full prerendering, and revealed practical lessons around cookies, redirects, and a two‑page memory limit.
  • Etsy’s search and web‑performance teams have deployed the Speculation Rules API (SRA) to prefetch product listing pages when users hover over search results on Chromium browsers. By adding a data‑attribute to eligible links and triggering prefetch after 200 ms of hover, the browser downloads the listing HTML into both memory and the HTTP cache. A/B testing showed 20‑24 % faster load times, with some metrics reaching 0 ms. The team noted that SRA’s simpler CSS‑selector API, built‑in cache controls, and upgrade path to prerendering offer clear advantages over traditional link prefetching.
  • Etsy’s search and web‑performance teams have deployed the Speculation Rules API (SRA) to prefetch product listing pages when users hover over search results on Chromium browsers. By adding a data‑sr‑prefetch attribute and a 200‑ms hover trigger, the browser downloads the listing’s HTML into both memory and the HTTP cache, enabling near‑instant navigation. An A/B test on desktop search pages showed 20‑24 % speed gains, with some metrics dropping to 0 ms. The rollout highlighted SRA’s simpler API, built‑in upgrade path to prerendering, and a limit of two prefetched pages in memory.

Sources: