What is speculation rules API and prerendering?
Answer
The Speculation Rules API (Chrome 109+) enables full page prerendering — fetching, rendering, and executing a complete page in an invisible background tab before navigation. This enables near-instant page transitions. Define in a script tag: <script type="speculationrules">{"prerender": [{"where": {"href_matches": "/products/*"}, "eagerness": "moderate"}]}</script>. Eagerness levels: conservative: only when user starts hovering. moderate: when user hovers for 200ms. eager: as soon as the link is observed in the viewport. vs prefetch: prefetch only downloads resources. Prerendering fully renders the page — all JS executes, all API calls complete. Navigation feels instantaneous. Considerations: resource intensive — only prerender high-probability next pages. Respect privacy — don't prerender pages with analytics that fire on load. Use HTTP Cache-Control headers to prevent prerendered pages from being stale. Google Search uses it: search results pages are prerendered in mobile Chrome. When combined with good LCP, a prerendered page can achieve sub-100ms perceived load times from click to painted content.
Previous
What is the scheduler API and how does it improve INP?
Next
How do JavaScript virtual machines optimize JavaScript performance?
More Web Performance Questions
View all →- Advanced What is the scheduler API and how does it improve INP?
- Advanced How do JavaScript virtual machines optimize JavaScript performance?
- Advanced What is the Islands Architecture and partial hydration for performance?
- Advanced What are Container Queries and their performance implications?
- Advanced How do you implement performance observability in production?