Nice overview of the API. One thing worth calling out: prerender and prefetch behave very differently in terms of when they're useful.
Prefetch gets resources into cache, so it helps on repeat visits or when the same resource is referenced again. Prerender goes much further — it runs the full page lifecycle in a hidden browsing context, so JS executes, layout happens, and the page is ready to swap in instantly. That's powerful but also expensive (CPU, memory) and has stricter constraints around cookies and auth state.
For e-commerce, prerender works brilliantly for product detail pages (PDP) from a category listing, or from a homepage hero to a featured product — high intent, predictable destinations. It breaks down for cart and checkout where session state matters, so those need to be explicitly excluded.
The practical consideration I've seen overlooked most: the max number of concurrent prerenders is limited by Chrome (around 10 at a time by default), so "prerender everything" doesn't work as a strategy. Being selective based on scroll depth + time-on-page signals gives better ROI than blanket URL pattern matching.
I shipped a Shopify app called Prefetch (apps.shopify.com/prefetch) that uses Speculation Rules as the first tier with automatic exclusions for cart/checkout/account, with hover-based prefetch and IntersectionObserver as fallbacks for non-Chrome browsers. Happy to chat if anyone's building something similar.
(Disclosure: I built Prefetch.)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice overview of the API. One thing worth calling out: prerender and prefetch behave very differently in terms of when they're useful.
Prefetch gets resources into cache, so it helps on repeat visits or when the same resource is referenced again. Prerender goes much further — it runs the full page lifecycle in a hidden browsing context, so JS executes, layout happens, and the page is ready to swap in instantly. That's powerful but also expensive (CPU, memory) and has stricter constraints around cookies and auth state.
For e-commerce, prerender works brilliantly for product detail pages (PDP) from a category listing, or from a homepage hero to a featured product — high intent, predictable destinations. It breaks down for cart and checkout where session state matters, so those need to be explicitly excluded.
The practical consideration I've seen overlooked most: the max number of concurrent prerenders is limited by Chrome (around 10 at a time by default), so "prerender everything" doesn't work as a strategy. Being selective based on scroll depth + time-on-page signals gives better ROI than blanket URL pattern matching.
I shipped a Shopify app called Prefetch (apps.shopify.com/prefetch) that uses Speculation Rules as the first tier with automatic exclusions for cart/checkout/account, with hover-based prefetch and IntersectionObserver as fallbacks for non-Chrome browsers. Happy to chat if anyone's building something similar.
(Disclosure: I built Prefetch.)