pattern · perceived-performance · web-platform
Speculative loading
also called prefetching (mdn), preloading (mdn), prerendering (mdn), speculation rules (mdn), instant navigation (community)
Fetching, or fully rendering, a page before the reader asks for it, on a guess about where they go next, so the navigation is already done when the click lands.
A navigation feels slow because it starts when the reader clicks. Speculative loading moves the start earlier, on a guess: the browser fetches the next document, or goes further and renders it in a hidden tab, while the reader is still reading this one. If the guess was right the click is answered from memory and the page appears to have been there all along. If it was wrong, the work is thrown away and nobody notices except the network.
Three words get used interchangeably and they are three different amounts of work.
Preload is about this page: a resource the current document definitely needs, fetched
earlier in the queue than the parser would have found it. Prefetch is about the next
navigation: the document is pulled into the cache, but nothing is parsed or run.
Prerender is the whole thing, the next page loaded and rendered and its scripts
executed, waiting off screen. The Speculation Rules API
is how a page declares which links get which treatment, and its eagerness settings are
really a guessing budget: immediate speculates on load, moderate waits for about
200 ms of hover, and conservative waits until the pointer actually goes down, which
still buys the tens of milliseconds between pointerdown and click.
The guess is the design decision, and guessing wrong is not free. Every wrong guess is bandwidth and battery spent on a page nobody visited, which lands on the reader’s data plan rather than yours. A prerendered page also runs: its scripts execute, its analytics can fire, and anything with a side effect happens for a visit that never occurred, which is why prerendering is restricted to same-origin navigations that the page has explicitly nominated and why the Speculation Rules spec gives a page an API to notice it is being prerendered. The pattern has a history of biting designs that did not expect it. As magic link notes, mail scanners that prefetch every link in a message will happily spend a one-time sign-in link before its owner opens the mail: any URL that changes something when merely fetched is a URL a speculator can break.
The opposite bet is lazy loading, which answers the same question by fetching as late as possible instead of as early as possible, and the two coexist because they are aimed at different things: defer what is probably not needed, speculate on what probably is. Where speculative loading is easiest to justify is a site with a strong next step, an article with a next chapter, a listing whose first result gets most of the clicks. Where it is hardest is a page full of equally likely links, because speculating on all of them is just downloading the site.
Which word?
| If you want | say |
|---|---|
| the next page is fetched before the reader clicks it | speculative loading |
| content is fetched only once it is nearly on screen | lazy loading |
Related
See also: Hydration · Magic link