Improving performance by prefetching product pages from Etsy Search
Etsy implemented the Speculation Rules API (SRA) to significantly improve the performance of its product listing pages. This new browser API allows websites to instruct browsers on how to fetch resources for future navigation. SRA offers prefetching, which downloads the HTML, and prerendering, which fully loads and renders a page. While prerendering offers greater gains, prefetching is a less risky starting point. SRA provides a simpler API than traditional prefetching methods and an upgrade path to prerendering. Etsy specifically used SRA to prefetch listing pages when users hovered over organic listings on the desktop search page. The implementation involved adding a script tag with JSON rules to dictate when and what to prefetch. A key lesson learned was that SRA prefetches cache pages in both memory and the HTTP cache, unlike traditional prefetch which only uses the HTTP cache. The browser limits memory cache to two prefetched pages, after which older ones are evicted. Etsy found that setting a five-minute cacheability for pages when a prefetch request is detected helps mitigate this limitation. Challenges were encountered with elements like video players that used shadow DOM, requiring workarounds. Setting cookies during prefetching could lead to misleading analytics, but this can be avoided using specific HTTP headers. Redirects did not negatively impact prefetching as long as proper caching headers were set. Modifying href attributes on hover could cause prefetching to fail and evict other cached pages. A significant hurdle was ensuring analytics remained accurate, as prefetched pages are not necessarily viewed. Etsy addressed this by logging events only after page activation and avoiding asset loading and JavaScript execution during prefetches. The implementation resulted in notable performance improvements.