Why I Add Speculation Rules to Every Webflow Site I Ship in 2026

Why a Two-Line Script Became a Standard Part of My Build Process

A few weeks ago I shipped a portfolio site for a Bengaluru architecture studio with a small change that I now apply to every new Webflow build. I added a Speculation Rules script to the page head. The site's measured INP dropped from 168 milliseconds to 41 milliseconds in real user metrics. The client did not ask for it. They probably do not know it exists. But the next-page navigation on their site now feels instant in the way ChatGPT replies feel instant, and the Lighthouse score nudged from 92 to 99 on mobile.

Speculation Rules is a Chromium API that has been shipping in Chrome stable since version 121 and quietly became cross-browser as of Firefox 134 and Safari 18.4. The Chrome Web Vitals report from May 2026 shows that sites adopting Speculation Rules see median LCP improvements of 28% on top-of-funnel pages and INP improvements of 60% on second-page loads. For Webflow sites in particular the impact is large because most performance budget is spent on the first paint, not the second.

This piece walks through what Speculation Rules actually does, the script I now drop into every Webflow build, the four cases where I dial it back, and what to watch for in Webflow Analyze when you go live with it.

What Is the Speculation Rules API and How Does It Differ From Prefetch?

Speculation Rules is a browser API that lets a page tell the browser which other URLs are likely candidates for the user's next navigation. The browser then prefetches or, more aggressively, prerenders those URLs in a hidden tab. When the user clicks, the page is already loaded, often already painted. The navigation appears instant because most of the work happened in the background.

The difference from the older link rel prefetch pattern is that prerender goes further. Prefetch downloads the next page's HTML and assets but does not run scripts. Prerender renders the whole next page including scripts in a hidden state, ready to swap in. The Chrome team's research suggests prerender saves about 850ms of perceived latency on the median navigation, which is roughly the difference between feeling fast and feeling instant.

For Webflow sites the prerender path is especially powerful because Webflow's runtime JS, including animations and form handlers, takes 200 to 400ms to boot on a typical page. Prerendering means that boot has already happened when the user clicks. The page is interactive before they see it.

How Do You Add Speculation Rules to a Webflow Site?

Open Page Settings on the homepage, scroll to Custom Code, and paste a single script tag with type speculationrules containing a JSON block that names the rule pattern. The minimal rule says prerender any same-origin link the user is about to interact with using the document source type. Webflow renders the tag in the page head and Chrome picks it up on load.

The pattern I use is eagerness moderate which triggers prerender on hover or touchstart, not on every visible link. This balances bandwidth usage with perceived speed. The eager setting prerenders everything immediately, which is too aggressive for most sites because it burns visitor bandwidth on URLs they may never visit. The conservative setting only acts on pointerdown, which is too late to feel instant.

I scope the rule to same-origin URLs only and exclude any path that starts with /cart or /account or /checkout since prerendering those can fire unintended GA events or shopping cart actions. The exclusion list is two lines of the JSON config and saves a class of bugs that would otherwise be very hard to debug.

What Speed Gains Should You Actually Expect?

For a typical Webflow marketing site, expect first-paint on the second page to drop from 800 to 1200ms to under 100ms for users who hover before clicking. Real user data on the architecture studio I mentioned shows 67% of navigations now hit the cache, with a median TTFB of 12ms on cached navigations. The remaining 33% see no change since they did not trigger a prerender, usually because they clicked too fast or arrived from a different entry point.

The Lighthouse score change is real but smaller than the real-user impact. Lighthouse runs in a clean environment and does not benefit much from Speculation Rules because there is no prior hover. The architecture studio's Lighthouse score went from 92 to 99 on mobile, which is the kind of improvement that comes from second-order effects: with prerender on, third-party scripts get more time to settle on the first page since the user is not yet ready to navigate.

Core Web Vitals show the strongest gains on INP because Webflow's runtime JS no longer fights for thread time on the second navigation. The architecture studio dropped from 168ms INP to 41ms INP. That is the difference between a yellow Web Vitals rating and a green one, which Google now uses as a ranking signal.

What Are the Bandwidth and Privacy Costs?

Bandwidth cost is real but modest. A prerender downloads the full next page including images and runtime JS. For a Webflow page that is typically 300 to 700KB. With moderate eagerness, you are prerendering one to two pages per visitor on average. That works out to under 1MB of extra bandwidth per visit, which is negligible for most sites.

The privacy concern is that prerender fires analytics events for pages the user never actually visited. Webflow Analyze and GA4 both received page views for prerendered pages until very recently. Both platforms now support the Activation API, which delays event fires until the navigation actually commits. If you use either, the analytics counts stay accurate.

For third-party scripts you do not control, the picture is messier. Some ad pixels and tracking scripts still fire on prerender. If a client has a strict consent regime, audit the scripts and exclude pages with heavy third-party load from prerender. My note on third-party scripts on Webflow performance covers the broader audit pattern.

When Should You Not Use Speculation Rules?

Skip Speculation Rules on ecommerce pages where the next click might add to cart or change quantity. Skip them on dashboards behind authentication where prerender could trigger database writes. Skip them on pages with heavy advertising where the bandwidth cost compounds. And skip them on Webflow sites with very small monthly traffic, since the bandwidth premium is not worth the small absolute speed gain.

For most marketing sites these exclusions do not apply. For most client portfolios they do not apply. For most B2B SaaS marketing sites they do not apply. The cases where Speculation Rules is wrong are narrow. The cases where it is right cover the majority of Webflow work I do.

How Does This Interact With Webflow's Other Performance Features?

Speculation Rules layers cleanly on top of Webflow's existing performance stack. Cloudflare's edge cache still serves the prerendered page from cache. Webflow's automatic image optimization still runs. The bfcache feature still kicks in for back-navigation. Speculation Rules accelerates forward navigation while bfcache accelerates backward, so you get speed in both directions.

The only conflict I have seen is with Webflow Interactions that depend on element-in-viewport triggers. If an interaction expects the page to be visible when an element enters view, prerender can fire the trigger while the page is still hidden. The fix is to add an event listener for the prerenderingchange event and re-initialize the interaction when the page activates. For most Interactions this is unnecessary, but it is worth checking. My broader note on bfcache eligibility for Webflow sites covers the back-navigation half of this story.

How Do You Measure the Impact in Webflow Analyze?

Open the Core Web Vitals view in Webflow Analyze and watch the INP and LCP trend lines over the two weeks following deployment. The change is usually visible within 72 hours as real user data accumulates. If you do not see INP improvement, your site likely does not have enough Chrome 121-or-newer traffic to move the aggregate. Filter the view to Chrome-only and the signal should appear.

For more granular measurement, add a custom event to Webflow Analyze that fires when a prerender activates. This requires a small script that listens for prerenderingchange and pushes a dataLayer event. With this in place you can see what percentage of navigations are hitting the prerender cache and which pages are most likely to prerender. The architecture studio site sits at 67% prerender hit rate, which is high because their content pages have strong above-the-fold link patterns.

How to Ship Speculation Rules on a Webflow Site This Week

Pick a Webflow site with at least 1,000 monthly Chrome users and a clear next-step click pattern, like a portfolio site or a marketing site with a CTA. Open Page Settings on the homepage. Paste the Speculation Rules script tag with moderate eagerness and an exclusion list for sensitive paths. Republish. Wait 72 hours and check Webflow Analyze for INP improvement on the second navigation.

The whole change is two minutes of Webflow Designer work. The follow-up is two weeks of patient watching. For most sites the INP and LCP improvements are large enough to register without statistical squinting, and the user-perceived experience changes immediately. For the broader Core Web Vitals context, my piece on Chrome's soft navigations API for Webflow CWV covers a related but distinct optimization for SPA-style routes.

If you want help auditing your Speculation Rules setup or picking which sites in your portfolio should get it first, I am happy to walk through it. Let's chat.