Fast websites are not just about quicker servers. They are about reducing the work the browser has to do after every click.
Traditional navigation waits until the user clicks before starting the next page.
The Speculation Rules API lets the browser prepare pages before navigation happens.
This guide shows how to use it Bagisto way to make page transitions feel almost instant.
Why Your Browser Waits Too Long
Most stores treat navigation as work that starts on click.
The browser waits for intent, then runs the request, download, parse, render, and paint chain.
Every step after the click, while the shopper stares at a loading page.
It feels unavoidable because “that is how the web works.” That feeling is the trap.
How Bagisto Solves It
Bagisto ships native Speculation Rules support in its storefront.
The admin can enable prerendering, and the browser renders the likely next page during hover.
By the time the shopper clicks a product tile, the product page is already built and ready.
The result is exactly the reverse of the three problems above-
The head start is used, vitals improve, and each hop feels instant.
You can apply the same pattern to any store. Here is how.
The Solution: Load Before the Click
You almost never need the next page to load at click time.
You need it ready by click time. Those are different problems.
You solve it with a tiny JSON block in your page <head>.
|
1 2 3 4 5 6 7 |
<script type="speculationrules"> { "prerender": [{ "source": "document", "where": { "and": [{ "href_matches": "/*" }] }, "eagerness": "moderate" }] } </script> |
The browser reads it, watches every link, and prepares the one that match.
The rest of this guide is about generating that JSON safely and making it configurable.
Strategy 1 – Prefetch the resources
Prefetch quietly downloads the next page’s HTML and assets in the background.
The bytes wait in the browser cache, so the click skips the network round-trip.
It is cheap and low-risk, and it should be your default for category and search links.
Strategy 2 – Prerender the whole page
Prerender goes further and builds the entire next page invisibly, off-screen.
On click, the browser swaps the ready page in, so navigation is effectively instant.
It costs more CPU and memory, so reserve it for high-intent links like product pages.
Tuning Eagerness for Better Performance
Eagerness determines when the browser starts prefetching or prerendering a matching page.
Conservative – waits for stronger user intent, minimizing unnecessary requests and resource usage.
Moderate – balances performance and efficiency, making it a good default for most stores.
Eager – starts speculation as early as possible for the fastest navigation at the cost of higher CPU, memory, and server usage.
Build the rules in code
Do not hardcode the JSON. Build it so you can toggle strategies and exclude pages.
Bagisto does this in one method; here is the same idea, generalized for any store.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function buildSpeculationRules(array $config): array { $rules = []; // Start by matching every same-origin link, then subtract exclusions. $conditions = [['href_matches' => '/*']]; foreach ($config['ignore_urls'] as $url) { $conditions[] = ['not' => ['href_matches' => trim($url)]]; } if ($config['prerender_enabled']) { $rules['prerender'][] = [ 'source' => 'document', 'where' => ['and' => $conditions], 'eagerness' => $config['prerender_eagerness'] ?? 'moderate', ]; } if ($config['prefetch_enabled']) { $rules['prefetch'][] = [ 'source' => 'document', 'where' => ['and' => $conditions], 'requires' => ['anonymous-client-ip-when-cross-origin'], 'referrer_policy' => 'no-referrer', 'eagerness' => $config['prefetch_eagerness'] ?? 'moderate', ]; } return $rules; } |
Then render it into the <head> behind a master switch you can flip off instantly.
|
1 2 3 4 5 |
@if($speculationEnabled) <script type="speculationrules"> @json(buildSpeculationRules($config), JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) </script> @endif |
JSON_UNESCAPED_SLASHES keeps URL patterns like /checkout/* intact and readable.
Always exclude your dynamic pages
This is the safety step you cannot skip.
Never prerender pages that change state or are personalized to one user.
Prerendering a link like below could fire the action before any click.
|
1 |
`?add_to_cart=5` |
Add these to your ignore list from day one:
- Checkout, cart, and payment URLs
- Login, register, and account pages
- Logout and action links like add to cart, wishlist, and compare
Each exclusion becomes a not condition in the rules.
|
1 2 |
// A pipe-separated admin field like "/checkout/*|/customer/*" becomes not-conditions. $conditions[] = ['not' => ['href_matches' => '/checkout/*', "/cart/*",]]; |
This rule prerenders matching pages except checkout, cart.
Chrome DevTools confirms that checkout and cart URLs are recognized by the browser but are not speculatively loaded.
Impact on Navigation Performance
Here is the detailed in practical presentation of speculation rules api effect on page load time.
Category Page Navigation
Without Speculation rule load time ~ 1.5s
With Speculation rule load time ~ 750ms
Product Page Navigation
Without Speculation rule load time ~ 1s
With Speculation rule load time ~ 550 ms
Speculation API reduced navigation time nearly by half by prefetching pages during hover, making page transitions fast
Key takeaways
The browser can do your navigation work early. Let it.
1. Click-time loading wastes the head start hover already gives you.
2. Prefetch is cheap; prerender is instant; both cut real wait time.
3. Eagerness is your dial between speed and server or device cost.
4. Never prerender cart, checkout, account, or action URLs.
5. Verify with View Source, DevTools Preloading.
Thank You for Reading!
You now have everything you need to implement the Speculation Rules API.
Deliver faster, smoother navigation in your Laravel or Bagisto storefront.
If you have questions, suggestions, or feedback, we’d love to hear from you.
Leave a comment below, and we’ll be happy to help.
Happy speculating, and may every click feel instant!
You can also explore our Bagisto Extensions.
If you are planning to build with Laravel, consider hiring laravel developers.
Be the first to comment.