解决使用Cloudflare CDN后登录还是显示未登录缓存页面问题的教程-主题铺

AI 智能摘要

最近在使用OpenLitespeed服务器配合Cloudflare免费版CDN时，遇到了一个让人抓狂的问题：明明已经在前台登录了账户，顶部栏也显示了头像，可一旦点击某个内页（比如个人中心或文章页），页面瞬间变成了未登录的状态。揪出了幕后黑手——Cloudflare最近默认开启或推荐的两个“加速”功能：Speed Brain和Early Hints。

图片[1]-解决使用Cloudflare CDN后登录还是显示未登录缓存页面问题的教程-主题铺

做网站运营最怕遇到那种“幽灵般”的Bug，就是明明配置都对，但前台表现就是极其诡异。最近在使用OpenLitespeed服务器配合Cloudflare免费版CDN时，遇到了一个让人抓狂的问题：明明已经在前台登录了账户，顶部栏也显示了头像，可一旦点击某个内页（比如个人中心或文章页），页面瞬间变成了未登录的状态。

这还不是最离谱的，最离谱的是如果你手动刷新一下浏览器，登录状态又回来了。这显然是缓存问题，但排查了一圈WordPress网站服务器端的LSCache插件，甚至把缓存全关了，问题依旧。

因为主题铺默认使用Litespeed Cache的即使点击功能，也就是自动预取功能。如下：

图片[2]-解决使用Cloudflare CDN后登录还是显示未登录缓存页面问题的教程-主题铺

经过各种排查，感觉还是没有头绪，其实吧，这锅还真不在服务器端，而是在CDN那一层。经过主题铺仔细排查浏览器的开发者工具（F12），发现在鼠标悬停在链接上时，Network面板里出现了一些诡异的请求，状态码甚至是没见过的，或者显示为prefetch（预提取）。顺藤摸瓜找下去，终于揪出了幕后黑手——Cloudflare最近默认开启或推荐的两个“加速”功能：Speed Brain和Early Hints。

这两功能听名字都很高大上，一个是“极速大脑”，一个是“早期提示”，初衷都是为了让WordPress网页加载更快，但在处理动态登录状态时，它们很容易好心办坏事。

先说说这个Speed Brain。它的工作原理是利用浏览器的Speculation Rules API来预测用户下一步可能点击哪里。当你的鼠标在链接上徘徊或者刚刚按下鼠标时，浏览器就会接到指令去“偷跑”，提前把下个页面下载下来。重点来了，Cloudflare为了安全和速度，这个预提取的请求只会去拿CDN边缘节点的缓存，而绝不会回源到你的服务器。

官方介绍说的牛逼轰轰的，如下

Cloudflare 实现的说明

我们的全球网络覆盖超过 330 座城市，与 95% 的互联网用户连接延迟不超过 50 ms。这种广泛的覆盖使我们能够为客户显著提高可缓存资产的性能。通过 Speed Brain 利用这个网络进行智能预取， Cloudflare 可以直接从 CDN缓存提供预取的内容，将网络延迟降低到接近即时的程度。
凭借在网络上的独特位置，我们能够自动启用 Speed Brain，无需客户对其源站配置进行任何更改。就像拨动开关那么简单。Speed Brain 的第一个版本现已上线。

当收到从启用 Speed Brain 的网页发出的请求时，Cloudflare 服务器会返回一个额外的“Speculation-Rules” HTTP 响应头。此标头的值是一个 URL ，指向一个带有固定规则配置的页面（如上所述）。
当浏览器开始解析响应标头时，它会获取我们的 Speculation-Rules 配置，并将其作为网页的一部分加载
该配置指导浏览器根据访问者与页面的互动情况，决定何时从 Cloudflare 预取访问者可能会导航到的下一个页面。
当用户操作（例如，在下一页链接上单击鼠标事件）触发规则应用时时，浏览器会使用“sec-purpose: prefetch”HTTP 请求标头发送对该页面的预取请求。
我们的服务器解析请求表头以识别预取请求。如果请求的内容在我们的缓存中，我们就返回它；否则，返回 503 HTTP 状态码并拒绝预取请求。这消除了向未意识到预取的源或 Cloudflare Workers 发送请求所带来的不安全副作用的风险。只有缓存中独有的内容会被返回。
在成功响应时，浏览器会将内容成功预取到内存中，当访问者导航到该页面时，浏览器会直接从缓存中加载网页，实现即时渲染。

常见故障排除模式

对 Speed Brain 的支持依赖于 Speculation Rules API ，这是一个新兴的 Web 标准。截至 2024 年 9 月，对这一新兴标准的支持限于基于 Chromium 的浏览器（版本 121 或更高版本） ，例如 Google Chrome 和 Microsoft Edge。随着 Web 社区就 API 标准化达成共识，我们希望看到它在其他浏览器供应商中得到更广泛的采用。
预取本质上不适用于动态内容，因为此类内容的状态会发生变化，这可能导致将陈旧或过时的数据交付给最终用户，并增加源站负载。因此，Speed Brain 仅适用于您网站缓存在我们网络上的非动态页面。它不会影响动态页面的加载。为了从 Speed Brain 中获得最大的好处，我们建议使用缓存规则来确保您网站上的所有静态内容（尤其是 HTML 内容）都符合缓存的条件。
当浏览器响应一个预取请求（由 sec-purpose: prefetch 标头标记）而收到 503 HTTP 状态码时，它取消预取尝试。尽管浏览器控制台中显示 503 错误似乎令人担忧，但它对于取消预取请求是完全无害的。在我们的早期测试中，503 响应代码引起了一些网站所有者的顾虑。我们正在与合作伙伴合作对此问题进行迭代，以改善客户端体验，但目前请遵循规范指导，即建议显示 503 响应，以便浏览器安全地丢弃预测请求。根据早期 beta 测试人员的反馈，我们正在与 Chrome 进行积极讨论，并相信一个新的非错误专用响应代码会更合适，能减少混淆。同时，Speed Brain 相关预取请求的 503 响应日志是无害的。如果您所用的工具难以忽略这些请求，您可以暂时禁用 Speed Brain，直到我们与 Chrome 团队一起研究出更好的方法。
此外，当网站同时使用自己的自定义预测规则和 Cloudflare 的 Speed Brain 功能时，两个规则集可以同时运行。Cloudflare 的防护措施将预测规则限制在可缓存的页面上，这对那些已有实现的人来说可能是一个意外的限制。如果您观察到这种行为，请考虑为您的站点禁用其中一个实现，以确保行为的一致性。请注意，如果您的源服务器响应包含 Speculation-Rules 标头，则其不会被覆盖。因此，潜在的规则集冲突主要涉及预定义的内联预测规则。

我如何才能看到 Speed Brain 的影响？

一般而言，我们建议您在使用 Speed Brain 和大多数其他 Cloudflare 性能功能时，同时启用我们的 RUM 性能测量工具。我们的 RUM 功能帮助开发人员和网站运营商了解他们的最终用户体验应用性能的情况，提供对如下方面的可见性：

加载：内容需要多长时间才会可用？
交互性：网站与您交互时的响应速度如何？
视觉稳定性：加载时页面的移动幅度。

启用 RUM 后，您可以导航到仪表板中的 Web Analytics 部分，查看有关 Speed Brain 如何帮助减少 Core Web Vitals 指标中的延迟的重要信息，例如最大内容绘制 (LCP) 和加载时间。

示例 RUM 仪表板：一个拥有大量可预取内容的网站，在 9 月 16 日左右启用了 Speed Brain。

到目前为止，我们在推出过程中看到了什么？

我们已在所有 Free 计划中默认启用此功能，并观察到以下情况：

Cloudflare 目前有数千万个域使用了 Speed Brain。我们测量了这些站点在第 75 分位点（p75）的 LCP，发现改善幅度在 40% 到 50% 之间（平均约 45%）。
这种改善是通过比较同一组域的导航预取和正常（非预取）页面加载进行比较得出的。

请求

启用 Speed Brain 之前， Cloudflare p75 的免费网站体验到的 LCP 时间约为 2.2 秒。启用 Speed Brain 后，这些站点的 LCP 延迟显著减少了。总的来说，Speed Brain 低端节省了大约 0.88 秒，每次成功的预取节省了多达 1.1 秒！

适用的浏览器

目前，Speculation Rules API 仅在 Chromium 浏览器中可用。从Cloudflare Radar 中，我们可以看到大约 70% 的访问者请求来自 Chromium （Chrome、Edge 等）浏览器。

整个网络

Cloudflare 每天处理数千亿个 HTML 内容请求。在这些请求中，大约一半已被缓存（确保您的 HTML 是可缓存的）。其中大约有 1% 是访问者发出的导航预取请求。这意味着，启用 Speed Brain 的网站的访问者每天都可以节省大量资源。每 24 小时， Speed Brain 就能避免相当于超过 82 年的延迟！

说白了，如果你的边缘节点缓存里存着这份页面的“游客版本”（即未登录状态），浏览器就会把这个游客版本预加载到本地。等你真的点击进去，浏览器直接展示刚才偷偷下载好的游客页面，你就“被退出”了。官方文档里也明确说了，Speed Brain目前主要针对静态内容缓存有效，对于需要鉴权的动态页面，这种预取机制简直就是灾难。

再来看看另一个帮凶Early Hints。这玩意利用了HTTP 103状态码，利用服务器还在“思考”生成主HTML的那几百毫秒空档期，先把一些CSS或JS资源的链接发给浏览器让它先加载。理论上很完美，但在HTTP/2和HTTP/3环境下，如果你的源站（Origin）和CDN之间的缓存逻辑配合不够默契，或者浏览器在处理这个103响应时混淆了缓存键值，就会导致用户看到不该看到的缓存版本。特别是在OpenLitespeed这种本身就有强大服务端缓存机制的环境下，多这一层“聪明”的干预，反而容易造成竞态条件。

既然找到了病灶，解决起来就非常简单了，只需要在Cloudflare后台把这两个功能关掉即可。

关闭Speed Brain步骤：
进入Cloudflare控制台，找到左侧菜单的Speed（速度），点击子菜单Content Optimization（内容优化）。在右侧找到Speed Brain选项，直接把开关拨到Off（关闭）。

关闭Early Hints步骤：
同样在Speed下的Content Optimization页面，往下翻找到Early Hints。这功能虽然对静态站有奇效，但对于咱们这种有会员登录系统的动态WordPress站，建议直接设置为Off（关闭）。

只要点击菜单左边的【速度】，然后选择【设置】

图片[7]-解决使用Cloudflare CDN后登录还是显示未登录缓存页面问题的教程-主题铺

然后选择右边的Speed Brain及Early Hints都关闭，如下

图片[8]-解决使用Cloudflare CDN后登录还是显示未登录缓存页面问题的教程-主题铺

关掉这两个选项后，建议顺手在Cloudflare的概览页面右侧点击“清除所有缓存”。然后再回到你的网站，登录账户，随便点击页面测试。你会发现，那个恼人的“掉登录”现象彻底消失了，页面跳转逻辑恢复了正常的服务器回源或正确的私有缓存机制。

主题铺认为，对于网站优化来说，快固然重要，但准确和稳定才是前提。Cloudflare推出的这些新特性虽然技术含量很高，但在复杂的动态网站环境中，往往需要大量的配置来适配。如果你不想折腾那些复杂的规则，最简单的办法就是关掉它们，让OpenLitespeed服务器自己去处理缓存逻辑，这样反而更省心。

① 本站文章均为原创，除非另有说明，否则本站内容依据CC BY-NC-SA 4.0许可证进行授权，转载请附上出处链接，谢谢。
② 本站提供的资源(插件或主题)均为网上搜集，如有涉及或侵害到您的版权请立即通知我们。
③ 本站所有下载文件，仅用作学习研究使用，请下载后24小时内删除，支持正版，勿用作商业用途。
④ 因代码可变性，不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
⑤ 本站保证所提供资源(插件或主题)的完整性，但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识！另本站提供汉化使用安装教程，仅供参考。由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑦ 有时可能会遇到部分字段无法汉化，同时请保留作者汉化宣传信息，谢谢！
⑧ 本站资源售价只是赞助和汉化辛苦费，收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源，欢迎捐助本站开通会员享受优惠折扣，谢谢支持！
⑩ 如果网盘地址失效，请在相应资源页面下留言，我们会尽快修复下载地址。

THE END