Select Page
Affiliate Disclosure: This page may contain affiliate links. When you click and make a purchase, we may receive a commission at no additional cost to you. Thanks for supporting our content.

Cloudflare Speed Brain: Your Web Pages 45% Faster – For Free

Oct 22, 2024 | Episode

Cloudflare Speed Brain is a new feature that utilizes cutting-edge browser technology to prefetch website content, making your web pages load incredibly fast for your visitors. But how does it work and what makes it different from previous prefetching attempts? That’s what we talk about in this episode of the SMC Journal with guest Sulemon Ahmad, a software research engineer at Cloudflare.

Show Reference URL’s

Here are the sites we mention on the episode:

The Need for Speed With Cloudflare Speed Brain

In today’s digital world, speed is paramount. A slow-loading website can lead to frustrated users and lost revenue. While network speeds have significantly improved, the process of loading web pages remains complex. Each time a user clicks a link, their browser has to establish a connection, send requests, and wait for responses – all of which add precious milliseconds to the loading time.

How Browsers Handle Content

Understanding how browsers work is crucial to grasping the benefits of Speed Brain. When you visit a website, your browser retrieves the HTML document, which in turn may reference various resources like CSS files, JavaScript, images, and fonts. Fetching these resources takes time, causing delays in loading the page. That is where Cloudflare Speed Brain comes in.

The Evolution of Prefetching

Prefetching isn’t new; developers have tried different methods to speed up web pages for years:

  • Early Prefetching: Early attempts lacked sufficient data about user behavior and lacked flexible APIs.
  • Static Lists & Manual Effort: Traditional prefetching involved using <link rel="prefetch"> tags, requiring developers to manually specify resources for each page, which was labor-intensive and often inaccurate.
  • Server Push: HTTP/2’s “server push” attempted to proactively send resources to the client, but it lacked awareness of the browser’s cache, leading to wasted bandwidth and potential slowdowns.
  • Early Hints: Early Hints, a more recent advancement, allows servers to hint to clients which resources to load, improving prioritization. However, it’s primarily limited to preloading specific assets, not entire web pages.

Cloudflare Speed Brain: A Smarter Approach

Speed Brain leverages the Speculation Rules API, a new web standard, to anticipate user actions and prefetch content accordingly. It works by:

  1. Adding a Speculation-Rules header: When a user visits a page with Speed Brain enabled, Cloudflare adds a special header to the response.
  2. Fetching the rules configuration: This header points to a URL with a configuration file that tells the browser which pages to prefetch.
  3. Triggering prefetch requests: Based on user interaction (like a mouse hover or touch), the browser starts downloading the predicted next page.
Cloudflare Speed Brain diagram

Safety First: Guardrails Against Mishaps

Prefetching can be wasteful if done incorrectly. Speed Brain incorporates safety mechanisms:

  • Document Rules: Speed Brain utilizes “document rules” to dynamically prefetch content based on the current page structure, eliminating the need for static lists and preventing outdated configurations.
  • Conservative Eagerness: Speed Brain uses a “conservative” eagerness setting, meaning it only prefetches content when a user explicitly interacts with a link (like a mouse-down event). This minimizes wasted resources on content the user might not visit.
  • Cache-Only Prefetching: Speed Brain only prefetches content already stored in Cloudflare’s cache. This prevents unpredictable side effects that might occur when prefetching dynamic or sensitive content.

The Results: Faster Pages, Happier Users

Initial tests of Speed Brain on Cloudflare’s free domains show impressive results:

  • 45% reduction in LCP: Largest Contentful Paint, a key performance metric, has significantly improved for pages prefetched by Speed Brain.
  • High Accuracy: Speed Brain correctly predicts user navigation 94% of the time.

Check out this blog about web performance budgets with Speedcurve.

The Future of Speed Brain

Cloudflare has ambitious plans for Speed Brain:

  • Machine Learning: Leveraging machine learning, Speed Brain will become even smarter at predicting user behavior and prefetching the right content.
  • Prerendering: Future versions will go beyond prefetching by actually prerendering pages, bringing static content even closer to instant rendering.
  • Argo Smart Browsing: Cloudflare is investigating combining Speed Brain with Argo Smart Routing for an even more powerful performance boost.

Get Started with Cloudflare Speed Brain

Speed Brain is automatically enabled on Cloudflare’s free plan. To enable Speed Brain for other plans, simply toggle the feature on in your Cloudflare dashboard. It’s an effortless way to give your website a significant performance boost and provide your visitors with a faster, smoother browsing experience.

Find out more at:

Speed Brain | Cloudflare Speed Brain docs

🔥 Like and Subscribe 🔥

Connect with me 👋
TWITTER ► https://bit.ly/3HmWF8d
LINKEDIN COMPANY ► https://bit.ly/3kICS9g
LINKEDIN PROFILE ► https://bit.ly/30Eshp7

Want to support the show? Buy Me A Coffee! https://bit.ly/3NadcPK

🔗 Links: