Speed Brain上线：网页加载速度飙升45%

Cloudflare 推出了名为 Speed Brain 的新功能，它通过 Speculation Rules API 预测用户可能点击的下一个链接，并提前将该页面的内容下载到浏览器缓存中。这种“预取”技术旨在消除后续页面的加载延迟，让浏览体验感觉即时。该功能已在免费计划中默认启用，初步数据显示页面加载速度平均提升了 45%，未来还将通过机器学习和预渲染技术进一步增强效果。

网页加载的传统瓶颈

通常，当您点击一个链接时，浏览器需要完成一系列步骤才能显示新页面：

• 与服务器建立安全连接。
• 发送请求，等待服务器处理并返回 HTML 文件。
• 解析 HTML，发现并请求页面所需的其他资源（如 CSS、JavaScript、图片）。
• 下载并处理所有资源，最终将页面渲染出来。

这个过程中的每一步都会产生延迟，即使网络速度很快，这些处理时间也会累加，导致用户能明显感觉到加载过程。

过去提升速度的尝试及其局限

多年来，业界尝试了多种方法来解决加载延迟问题，但各有不足。

• 手动预取 (<link rel="prefetch">): 开发者需要手动在代码中指定要预取的资源。这不仅工作量大，而且往往依赖猜测而非真实数据，效果有限。
• 服务器推送 (HTTP/2 Server Push): 服务器主动将资源“推”给浏览器，但它无法知道浏览器缓存中已有哪些内容，常常导致带宽浪费和性能问题，最终被主流浏览器放弃。
• Early Hints: 服务器在准备主页面时，可以提前“提示”浏览器开始加载关键资源。这很有用，但主要适用于服务器处理时间较长的场景，且无法适应用户的动态行为。

Speed Brain 的不同之处：更智能、更安全

Speed Brain 建立在过去的经验之上，通过 Speculation Rules API 这一新兴的浏览器标准，将决策权交还给客户端，使其更加智能和安全。

它不是在用户点击链接 后 才开始加载，而是在用户即将点击时（例如，鼠标按下或触摸屏幕时）就开始预取下一个页面的内容。

核心优势与安全护栏

Speed Brain 的设计解决了以往预取技术的核心痛点：过时的配置和错误的预取。

• 动态规则: 它不依赖于静态的 URL 列表，而是根据当前页面的链接动态生成预取候选项，避免了配置过时的问题。
• 保守策略: 初始版本采用 “保守” (conservative) 模式，仅在用户按下鼠标或触摸链接时才触发预取。这大大提高了预取的准确性，避免了因用户只是快速划过链接而造成的资源浪费。
• 仅限缓存内容: 这是最重要的安全措施。Speed Brain 只会预取已经存在于 Cloudflare CDN 缓存中的静态内容。如果请求的内容不在缓存中，请求会被安全地拒绝。这可以防止意外的副作用，例如预取“退出登录”页面导致用户被提前登出。

目前的成果与数据

Speed Brain 已在所有免费计划的网站上默认启用，并取得了显著成效。

在成功的预取导航中，网站的 LCP (Largest Contentful Paint，最大内容绘制时间) 指标平均降低了 45%。

• 时间节省: 每次成功的预取可以为用户节省大约 0.88 到 1.1 秒 的加载时间。
• 适用范围: 目前约 70% 的网络流量来自支持该技术的 Chromium 内核浏览器（如 Chrome 和 Edge）。
• 巨大影响: 综合来看，该功能每天为全网用户节省的加载时间总和超过 82 年。

局限性与注意事项

• 浏览器支持: 目前仅限于 Chromium 121 及以上版本的浏览器。
• 内容类型: 只对可缓存的静态内容有效，不会影响动态页面的加载。
• 503 错误码: 如果您在浏览器开发者工具中看到针对预取请求的 503 错误，请不要担心。这表示请求的内容不在 CDN 缓存中，预取被安全地取消了，属于正常现象。

未来展望

目前的 Speed Brain 只是一个开始，未来的计划包括：

• 机器学习: 利用 Cloudflare 的全局网络数据，训练更精准的预测模型，为不同网站定制预取规则，实现高达 75% 的 LCP 性能提升。
• 预渲染 (Prerendering): 不仅仅是下载页面资源，更是在后台将其完全渲染好，实现真正的“即时”加载。
• Argo Smart Browsing: 将更激进的 Speed Brain 模型与 Argo Smart Routing 结合，为付费用户提供覆盖静态和动态内容的全方位性能优化方案。