Skip to content

Commit

Permalink
[Speed] Updates name (#16947)
Browse files Browse the repository at this point in the history
* Updates name

* Update src/content/docs/speed/optimization/content/speed-brain.mdx

Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>

* Update src/content/docs/speed/optimization/content/speed-brain.mdx

* Update src/content/docs/speed/optimization/content/speed-brain.mdx

* Update after review.

---------

Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>
  • Loading branch information
angelampcosta and hyperlint-ai[bot] authored Sep 19, 2024
1 parent c133d64 commit 4bcdefb
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 32 deletions.
1 change: 1 addition & 0 deletions public/_redirects
Original file line number Diff line number Diff line change
Expand Up @@ -947,6 +947,7 @@
/speed/optimization/other/troubleshooting/ /speed/optimization/other/ 301
/speed/optimization/content/auto-minify/ /speed/optimization/content/ 301
/speed/optimization/content/troubleshooting/auto-minify-not-working/ /speed/optimization/content/troubleshooting/ 301
/speed/optimization/content/speculation/ /speed/optimization/content/speed-brain/ 301

# ssl
/ssl/ssl-for-saas/certificate-signing-requests/ /cloudflare-for-platforms/cloudflare-for-saas/security/certificate-management/custom-certificates/certificate-signing-requests/ 301
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ A few examples include (but are not limited to):
* [Image transformations](/images/transform-images) in the new URLs you would use for images (`example.com/cdn-cgi/image/`)
* [Email address obfuscation](/waf/tools/scrape-shield/email-address-obfuscation/) used to hide email addresses from malicious bots (`example.com/cdn-cgi/l/email-protection`)
* [Web analytics](/web-analytics/get-started/#sites-proxied-through-cloudflare) for a website proxied through Cloudflare (`example.com/cdn-cgi/rum`). This endpoint returns a `204` HTTP status code.
* [Speculation](/speed/optimization/content/speculation/) adds an HTTP header called `Speculation-Rules` to web page responses. This header contains a URL that hosts an opinionated Speculation-Rules configuration, which instructs the browser to initiate prefetch requests for anticipated future navigations.
* [Speed Brain](/speed/optimization/content/speed-brain/) adds an HTTP header called `Speculation-Rules` to web page responses. This header contains a URL that hosts an opinionated Speculation-Rules configuration, which instructs the browser to initiate prefetch requests for anticipated future navigations.

## Recommended exclusions

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
pcx_content_type: how-to
title: Speculation
title: Speed Brain
sidebar:
order: 9
badge:
Expand All @@ -9,38 +9,35 @@ sidebar:

import { FeatureTable, TabItem, Tabs } from "~/components";

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

---

## Availability

<FeatureTable id="speed.speculation" />
<FeatureTable id="speed.speed_brain" />

---

## Requirements

Speculation works under the following conditions:
- The Speculation feature is enabled in Cloudflare.
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.

For more information about Speculation Rules API, refer to the [Chrome documentation](https://developer.chrome.com/docs/web-platform/prerender-pages)
## What is Speed Brain?

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

## What is Speculation?
Cloudflare leverages the [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/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.

The overall goal of Speculation is to try to download a webpage to the browser before a user navigates to it.
By prefetching pages that the browser considers likely to be navigated to, Speed Brain can enhance key metrics like [Largest Content Paint](https://web.dev/articles/lcp) (LCP), [Time to First Byte](https://web.dev/articles/ttfb) (TTFB) and overall page load time.

Cloudflare leverages the [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) to improve web page performance by instructing the browser to consider prefetching future navigations. Speculation 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.
## How Speed Brain works

By prefetching pages that the browser considers likely to be navigated to, Speculation can enhance key metrics like [Largest Content Paint](https://web.dev/articles/lcp) (LCP), [Time to First Byte](https://web.dev/articles/ttfb) (TTFB) and overall page load time.

## How Speculation works

When Cloudflare’s Speculation feature is enabled, an HTTP header called `Speculation-Rules` is added to web page responses. The value for this header is an URL that hosts an opinionated Speculation-Rules configuration. This configuration instructs the browser to consider prefetching any future navigations with a `conservative` [eagerness](https://developer.chrome.com/docs/web-platform/prerender-pages#eagerness).
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 an URL that hosts an opinionated Speculation-Rules configuration. This configuration instructs the browser to consider prefetching any future navigations with a `conservative` [eagerness](https://developer.chrome.com/docs/web-platform/prerender-pages#eagerness).

The configuration looks like this:

Expand All @@ -60,56 +57,56 @@ The configuration looks like this:

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.

## Test Speculation
## Test Speed Brain

To test that Speculation 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 Speculation, this behavior might not be 100% consistent.
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 Speculation 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](https://developer.chrome.com/docs/web-platform/prerender-pages#chrome-limits) for more details. For more general information about debugging Speculation, refer to the [Chrome Speculation Debugging guide](https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules).
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](https://developer.chrome.com/docs/web-platform/prerender-pages#chrome-limits) for more details. For more general information about debugging Speculation, refer to the [Chrome Speculation Debugging guide](https://developer.chrome.com/docs/devtools/application/debugging-speculation-rules).

## RUM integration

Speculation is designed to integrate with Web Analytics & Real User Measurements (RUM). This integration allows you to understand the web performance implications of Speculation within the Web Analytics interface in Cloudflares Dashboard.
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 Speculation 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](/web-analytics/) documentation.
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](/web-analytics/) documentation.

## Enable and disable Speculation
## Enable and disable Speed Brain

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

<Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">

To enable or disable **Prefetch URLs** in the dashboard:

1. Log in to your [Cloudflare account](https://dash.cloudflare.com), select your account and go to a specific domain.
2. Go to **Speed** > **Optimization** > **Content Optimization**.
3. Toggle **Speculation** to **On** or **Off**.
3. Toggle **Speed Brain** to **On** or **Off**.

</TabItem> <TabItem label="API">

Use the following `PATCH` request to enable Speculation:
Use the following `PATCH` request to enable Speed Brain:

```bash
curl --request PATCH \
"https://api.cloudflare.com/client/v4/zones/{zone_id}/settings/speculation" \
"https://api.cloudflare.com/client/v4/zones/{zone_id}/settings/speed_brain" \
--header "Authorization: Bearer <API_TOKEN>" \
--header "Content-Type: application/json" \
--data '{
"value":"on"
}'
```

To disable Speculation, set `value:` to `"off"`.
To disable Speed Brain, set `value:` to `"off"`.

</TabItem> </Tabs>

## Caveats

- Since prefetch responses are not guaranteed to be rendered by the browser, Speculation includes two safeguards to minimize the risk of [unsafe prefetching](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API#unsafe_prefetching):
- Since prefetch responses are not guaranteed to be rendered by the browser, Speed Brain includes two safeguards to minimize the risk of [unsafe prefetching](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API#unsafe_prefetching):

- Speculation 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.
- 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.

- Speculation will not work with restrictive [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) configurations using `strict-dynamic` or `nonce-{hash}` attributes.
- Speed Brain will not work with restrictive [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) configurations using `strict-dynamic` or `nonce-{hash}` attributes.
6 changes: 3 additions & 3 deletions src/content/plans/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -2186,9 +2186,9 @@
}
}
},
"speculation": {
"title": "Speculation",
"link": "/speed/optimization/content/speculation/",
"speed_brain": {
"title": "Speed Brain",
"link": "/speed/optimization/content/speed-brain/",
"properties": {
"availability": {
"title": "Availability",
Expand Down

0 comments on commit 4bcdefb

Please sign in to comment.