← Speed / speed / optimization / content

Speed Brain

Speed Brain is a tool for improving web page performance by prefetching the most likely next navigation.

Speed Brain works under the following conditions:

• The Speed Brain feature is enabled in Cloudflare.
• The browser of the web page visitor is using a Chromium-based browser version 121 or later.
• The web page requested by the prefetch is eligible for cache.
• The page requested by the prefetch does not invoke a Worker.

The overall goal of Speed Brain is to try to download a webpage to the browser before a user navigates to it.

Cloudflare leverages the Speculation Rules API ↗ to improve web page performance by instructing the browser to consider prefetching future navigations. Speed Brain does not improve page load time for the first page that is visited on a website, but it can improve it for subsequent web pages that are navigated to on the same site.

By prefetching pages that the browser considers likely to be navigated to, Speed Brain can enhance key metrics like Largest Content Paint ↗ (LCP), Time to First Byte ↗ (TTFB) and overall page load time.

When Cloudflare's Speed Brain feature is enabled, an HTTP header called Speculation-Rules is added to web page responses. The value for this header is a URL that hosts an opinionated Speculation-Rules configuration. This configuration instructs the browser to consider prefetching any future navigations with a conservative eagerness ↗.

The configuration looks like this:

{
	"prefetch": [
		{
			"source": "document",
			"where": {
				"and": [{ "href_matches": "/*", "relative_to": "document" }]
			},
			"eagerness": "conservative"
		}
	]
}

This configuration instructs the browser to initiate prefetch requests for future navigations. These prefetch requests will include the sec-purpose: prefetch HTTP request header. Prefetches that are not successful will respond with a 503 status code. Prefetches that are successful will respond with a 200 status code.

To test that Speed Brain is enabled, you can check that your HTTP response headers for your web pages include the Speculation-Rules header. However, note that during the beta phase of Speed Brain, this behavior might not be 100% consistent.

To test whether your browser is making prefetch requests, open the Network tab in Chrome DevTools. Then, mouse-down on a link on a webpage with Speed Brain enabled. This action should initiate a prefetch request, which will be  visible in the Network tab. However, note that there are several reasons why the browser might choose not to initiate a prefetch. Refer to the Chrome Limits guide ↗ for more details. For more general information about debugging Speculation-Rules, refer to the Chrome Speculation Debugging guide ↗.

Speed Brain is designed to integrate with Web Analytics & Real User Measurements (RUM). This integration allows you to understand the web performance implications of Speed Brain within the Web Analytics interface in Cloudflare's Dashboard.

While you can use Speed Brain without RUM enabled, you will not have visibility into how the feature is affecting the performance of your web pages. For further details on how to set up RUM, refer to the Web Analytics & RUM documentation.

Speed Brain is available in Cloudflare's Speed tab of the dashboard and also in the API.

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/settings/speed_brain" \
	--request PATCH \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"value": "on"
	}'

• Since prefetch responses are not guaranteed to be rendered by the browser, Speed Brain includes two safeguards to minimize the risk of unsafe prefetching ↗:

  • Speed Brain will not prefetch on routes that run Workers. Without this safeguard, prefetch requests could inadvertently run Worker logic that assumes the incoming request is a normal (that is, not a prefetch) request. An example of this could be an incrementing page view counter running in a Worker. A page view counter should not increment if the page is not actually rendered in the browser.

  • Prefetch requests will never reach origin servers. Prefetch requests only serve content that is stored in Cloudflare’s Cache. If the content is not in Cache, the prefetch request will not continue to origin servers. Without this safeguard, origin server state could be modified despite the prefetch response not being rendered in the browser. An example of this could be a prefetch GET request to a sign-out URL inadvertently triggering a sign-out action on the server.

• If origin server responses include the Speculation-Rules header, it will not be overridden.

• Speed Brain will not work with restrictive Content Security Policy ↗ configurations using strict-dynamic or nonce-{hash} attributes.

• Currently, Speed Brain is not compatible with websites that use or rely on pages.dev.