Cloudflare Cache Everything 将 WordPress TTFB 提高了 90%

已发表: 2022-12-03

Cloudflare cache everything fast site load

您知道网站速度是您博客的关键因素。 Cloudflare 缓存一切可以真正帮助您加快速度。

您的访问者在离开之前等待您的网页加载的时间不会超过几秒钟。 谷歌明确表示响应时间是影响搜索排名的重要因素。 所以是的,今天的速度对您的网站很重要。

使用 WordPress 为桌面获得合理的页面加载速度相对容易。 但移动速度并不那么容易。

但是,有一种方法可以使用 Cloudflare 页面规则显着提高您的站点速度。

在本文中隐藏
你在使用 Cloudflare 吗?
减少 TTFB
如何应用 Cloudflare 缓存一切
检查火箭装载机
一个缺点和解决方案
更新:一个新的更好的解决方案
概括

你在使用 Cloudflare 吗?

改善服务器端响应时间的第一步是让您的站点在 CDN(内容分发网络)上运行。

对于大多数博主来说,最受欢迎的服务是 Cloudflare,因为它高效、可靠且免费。

如果您需要将站点添加到 Cloudflare,WP Beginner 的本教程是一个很好的起点。

但如果您已经在使用它,则可以显着提高首字节时间 (TTFB) 的性能。

它是网站加载速度最关键的因素之一。

在较早的文章中,我写了关于使用三个页面规则提高 WordPress 管理页面速度的文章。

但是对于此修复,您需要使用 Cloudflare 缓存一切规则。

如果您使用的是免费的 Cloudflare 帐户,则只能获得三个页面规则。

因此,它将需要更改您现有的页面规则。

但这是值得的。

减少 TTFB

以下是这些更改对您的 TTFB 速度产生多大影响的一些示例。

下面两张使用 Chrome Deleveopers Tools 的图片向您展示了您可以对移动速度产生多大的影响。

第一个未优化,TTFB 为 1.55 秒。

TTFB mobile

添加新的 Cloudflare 规则后,您可以在此处看到改进。 TTFB 现在只有 33.25 毫秒。

Cloudflare Cache Everything TTFB mobile

从我的 Freshping 帐户中,您可以看到我优化的三个站点的总体响应时间。

它们比尚未完全缓存的四个站点快 90%。

Cloudflare cache everything response times

如何应用 Cloudflare 缓存一切

在您开始进行这些更改之前,请先警告一下。

此方法仅适用于不经常更改的合理静态站点。

如果您有动态内容(例如不断变化的小部件、Twitter 提要、滑块或定期更新信息),这不是一个好主意。

当您将缓存所有内容添加到 Cloudflare 时,它​​会按照它说的去做。

以下是如何从 Cloudflare 仪表板添加此站点速度改进。

首先,您需要添加新规则。 单击顶部菜单中的页面规则应用程序按钮。

如果您已经有三个规则,则需要删除一个。 就我而言,我删除了 *preview=true* 规则。

new page rule

现在为您的网站 URL 添加新的页面规则,两端都带有通配符星号。

然后添加这些规则设置。

浏览器缓存 TTL – 1 小时
缓存级别——缓存一切
边缘缓存 TTL – 7 天

单击保存,现在为您的缓存控制标头设置了所有内容。

一个重要的注意事项是检查并确保您按照上图订购规则。

您的网站缓存规则必须在您的 wp-login 和 wp-admin 规则之后,以保护管理页面的原始缓存控制。

您还应该检查您的 Cloudflare 浏览器缓存设置,以确保您选择了 Respect Existing Headers。

浏览器缓存ttl

检查火箭装载机

您可能还想检查您是否在使用 Cloudflare 的 Rocket Loader。

当它工作时,它工作得非常好,但它也可能破坏您的网站。 我在两个站点上运行它,没问题。

但是在另一个站点上,它会导致问题,所以我将其关闭。

检查所有设置是否正确后,请转到您的站点以查看是否一切正常。 它现在应该几乎立即加载。

然后使用 Google Page Speed Insights、GTMetrix 或 Pingdom 检查您的站点速度以查看改进。

您的目标应该是 TTFB 小于 200 毫秒,满载小于 2 秒。

这是我在 GTMetrix 上的一个网站的加载时间截图。 你可以看到它只用了 0.6 秒就完全加载了。

page load time

一个缺点和解决方案

因为您网站上的所有内容现在都已缓存,所以您所做的任何更改在缓存周期清除之前不会生效。

这可能需要很长时间才能发生。

因此,当您添加新帖子或编辑现有帖子时,您将看不到更改。 它也适用于您网站上的新评论。

解决这个问题的唯一方法是安装 Cloudflare 插件。

我不喜欢添加更多插件,但这个插件对于速度修复来说是必不可少的。

添加后,将自动缓存管理更改为打开。

它现在将清除您创建或编辑的单个文件,然后从您的原始 Web 服务器缓存新文件。

从插件中,您还可以清除整个站点。 但是这个动作会增加你的加载时间。

如果您想绕过缓存问题来调查任何问题,最好在 Cloudflare 上暂停您的网站。

您真正不应该点击的按钮是 Optimize Cloudflare for WordPress。

如果这样做,它会更改很多您可能不希望的设置。 这些包括缩小 HTML、javascript 和 CSS 以及更改现有的标头设置。

更新:一个新的更好的解决方案

自撰写本文以来,现在有一个新的免费 WordPress 插件可用,它几乎解决了 Cloudflare Cache Everything 的所有问题。

Super Page Cache for Cloudflare

Cloudflare 的 Super Page Cache 易于安装,并为您提供了很多控制权。

该插件不仅可以帮助您缓存静态文件(例如 CSS、JS、图像等),还可以在服务器磁盘级别和全球 Cloudflare CDN 上缓存 WordPress 生成的 HTML 网页。

我将它安装在我的一个站点上,并且运行完美。 TTFB 从近一秒下降到不到 0.2 秒。

speed results

它类似于 Cloudflare APO,后者不是免费服务。

但如果您使用免费的 Cloudflare 帐户,这个免费插件几乎可以完成 APO 可以做的所有事情。

我在 Just Publishing Advice 上使用了这个缓存插件,它可以很容易地获得出色的 Core Web Vitals 结果。

Google Page experience mobile

您可以使用 PageSpeed Insights 或 GTMetrix 检查此站点上的任何页面,以了解缓存一切的工作情况。

如果你没有得到全绿色的结果,我会感到惊讶。

GTmetrix JPA site perfomance

如果您想提高加载速度和 Core Web Vitals,那真的值得一看。

概括

Cloudflare Cache Everything 运行良好,将极大地加快您的网站速度。 它对于提高移动站点速度特别有效。

但它并不适用于每个站点,并且根据您的主题、功能和站点设计可能存在缺点。

这种缓存方法非常激进,因此请仔细检查所有内容。

理想情况下,您应该在临时站点或沙盒站点上尝试它,以确保您的站点正常运行。

如果您在实际网站上实施它并遇到问题,您可以随时删除页面规则。 然后在 Cloudflare 上完全清除您的站点。

然后你会回到你开始的地方。

如果您需要帮助,Cloudflare 支持上有很多关于缓存静态内容和缓存所有内容的条目。