Improving performance by prefetching product pages from Etsy Search

Summary

Etsy’s search and web performance teams tested the Speculation Rules API (SRA) to reduce loading time for product listing pages reached from desktop organic search. They added a speculationrules configuration that prefetches eligible listing HTML after a 200-millisecond hover, using URL and data-attribute selectors with moderate eagerness; unlike link prefetch, SRA uses both memory and HTTP caches. The experiment required attention to a two-page memory limit, five-minute retention, non-cacheable listing HTML, video hover behavior, cookies, new-tab targets, and analytics events triggered during prefetches. Results showed 23.6% faster 75th-percentile TTFB, with improvements of 20.7% in FCP, 21.1% in LCP, 20.4% in DOMContentLoaded, and 10.6% in Page Load, while roughly one in 14 prefetches led to navigation.

Takeaways

1. 1

   Speculative prefetching keeps pages in both memory and HTTP caches, whereas link prefetch uses only the HTTP cache; however, only two speculative prefetched pages remain in memory at once.

2. 2

   Etsy used the Sec-Purpose: prefetch header to identify speculative requests and make otherwise non-cacheable pages cacheable for five minutes, helping preserve prefetched HTML.

3. 3

   Prefetching can trigger cookies and analytics side effects; Etsy cached event payloads during prefetches and moved logging into the destination bundle after activation.