Cloudflare免费CDN接入WordPress站点教程:Super Page Cache插件详细设置

这篇文章记录一下给外贸独立站配置Cloudflare免费CDN+Super Page Cache插件的全过程,包括Cloudflare后台那几个容易踩坑的设置项。如果你的站点还没接CDN,或者接了但HTML页面每次都要打WordPress、查数据库,那这篇应该能帮到你。

为什么不能只靠主机自带的缓存

很多新手会觉得,主机商已经给了缓存插件(比如LiteSpeed Cache、WP Rocket),是不是就不需要Cloudflare了?

这两件事其实不冲突,但作用层级不一样。主机层的缓存解决的是”WordPress生成HTML的速度”,而Cloudflare CDN解决的是”HTML传到用户浏览器的距离”。你的服务器可能在洛杉矶,但访客在广州、在迪拜,每次请求都要跨半个地球跑一趟,哪怕服务器响应再快,物理延迟也省不掉。

Cloudflare在全球有200多个边缘节点,免费版就能用。CDN集成功能可以选用Cloudflare的200多个边缘节点,配合Super Page Cache插件把整页HTML也推到边缘缓存里,理论上能做到”用户请求不出本地机房就能拿到完整页面”。

cloudflare edge network map

准备工作

开始之前,确认这几件事:

  • 一个域名,并且你能登录域名注册商的后台修改NS(域名服务器)
  • 一个Cloudflare账号(免费注册即可)
  • WordPress后台管理员权限,能装插件

如果你没有域名,请参考:域名指南

这里要提一句:如果你的域名是阿里云腾讯云这类国内注册商买的,记得检查一下ICP备案状态,把NS指到Cloudflare之后,国内访问可能会受备案策略影响,这个我没有把握给出确切结论,并没测试过不确定,建议提前查一下你所在地区的具体合规要求,或者咨询主机/域名服务商。

第一步:把域名添加到Cloudflare(免费版)

点击登录Cloudflare控制台,右上角有切换语言按钮,点击”Add a Site”(添加站点),选择 连接域

super page cache cloudflare setup tutorial 2

输入你的根域名(比如 ctzpj.com,不要带www)

super page cache cloudflare setup tutorial 3

选择Free计划,点击继续

Cloudflare会自动扫描你现有的DNS记录(A记录、CNAME、MX邮箱记录等),扫描完成后会要求你确认这些DNS记录,仔细核对一遍,尤其是邮箱相关的MX记录别漏了,不然换NS之后邮件可能收不到。

拉到页面底部点击继续前往激活

Cloudflare会给你两个专属的NS地址,需要在域名注册商后台把原来的NS替换成Cloudflare分配的这两个。

super page cache cloudflare setup tutorial 4

如果域名开启了DNSSEC,需要先在注册商那边关闭DNSSEC,否则换NS可能导致域名解析不了,等Cloudflare那边生效后再重新开启。

NS生效一般几分钟到几小时,官方说法是最长可能要等24小时,我自己实测大部分情况1小时内就能查到。可以用 whatsmydns.net 查全球各地的解析情况。

第二步:SSL/TLS模式设置——这一步很多人会漏

域名生效之后,进入Cloudflare后台的 SSL/TLS 标签,把加密模式设置成 Full (strict)(完全严格),一般情况下Cloudflare添加域名成功后会自动设置成完全严格。

为什么不用Flexible?因为Flexible模式下,Cloudflare到你源服务器之间走的是HTTP(不加密),只有Cloudflare到访客浏览器之间是HTTPS。这样虽然能跑起来,但有两个问题:一是源站和CF之间的流量是裸奔的;二是配合WordPress很容易出现”重定向次数过多”的报错,因为WordPress检测到自己收到的是HTTP请求,又会强制跳转HTTPS,结果跟Cloudflare的HTTPS层打起来,陷入死循环。

如果你的主机已经装了SSL证书(大部分主机商现在都默认带Let’s Encrypt免费证书),直接启用就行。同时记得在 SSL/TLS → 边缘证书 Edge Certificates 里把”始终使用 HTTPS “打开,这样所有HTTP请求会自动跳转HTTPS。

super page cache cloudflare setup tutorial 6

第三步:安装并配置 Super Page Cache 插件

NS和SSL搞定之后(域名托管成功),回到WordPress后台。

在插件页搜索”Super Page Cache for Cloudflare”,安装并启用(这个插件之前叫WP Cloudflare Page Cache。

插件下载地址:https://wordpress.org/plugins/wp-cloudflare-page-cache/

如果不会安装插件可参考:WordPress 插件安装教程

wp Super Page Cache for Cloudflare

点击插件仪表盘顶部 Enable Caching启用缓存。

super page cache cloudflare setup tutorial 7

进入 设置 → Super Page Cache for Cloudflare

super page cache cloudflare setup tutorial 8

这里有个容易让人犹豫的地方:插件需要你提供Cloudflare的API凭证才能联动操作缓存清除。官方推荐用API Token(权限可以限定得更细),不过早期教程里常用的是Global API Key,如果你不放心给Global Key(它的权限是账号级别的,权限范围比较大),建议优先创建一个仅限该域名Zone的API Token来用,安全性更好。

获取Token或Key的位置在Cloudflare后台右上角头像 → 配置文件 → API 令牌

super page cache cloudflare setup tutorial 9

点击右上角 创建令牌,选择 WordPress 使用模板。

super page cache cloudflare setup tutorial 10

保持默认,可以直接点击底部继续以显示摘要

如果我写的API生成方式你没看懂,也可参考:Super Page Cache for Cloudflare 插件官网文档

把Token/Key填进插件设置页,选择对应的域名,保存。

这个插件其实不依赖Cloudflare也能用,即使不连接Cloudflare,它本身也能做服务器端的磁盘缓存,把HTML和静态文件直接存在你自己服务器上。但既然都走到这一步了,建议两个都开,效果是叠加的。

保存设置后,页面顶部会出现一个开关按钮,打开后就可以正式启用Cloudflare缓存了。

缓存细节设置(Cache标签)

插件默认设置已经能用,但有几个我自己会手动调整的点:

  • Purge HTML only:编辑文章后,只清除HTML页面缓存,不动静态资源(图片/CSS/JS)的缓存。好处是改一篇文章不会让全站静态文件缓存全部失效,节省回源压力
  • 排除登录后台和购物车页:插件支持按Cookie、查询参数、URI规则排除特定页面不缓存,比如WooCommerce的购物车、结算页这类动态内容,一定要排除,不然可能出现A用户看到B用户购物车的尴尬情况
  • Cache Buster(绕过缓存):登录状态下的用户不会看到缓存内容,方便你编辑文章时实时看效果,不用每次手动清缓存

如果你想临时看某个页面的”未缓存原始版本”(比如调试样式问题),在网址后面加上查询参数?swcfpc=1就能绕过Cloudflare缓存直接看源站内容,挺方便的小技巧。

JS/CSS优化(这部分功能比较新,需要Pro版本才能用)

  • Defer JavaScript:延迟加载JS,减少渲染阻塞
  • Delay JavaScript:等用户和页面产生交互(比如点击、滚动)才加载JS,对首屏速度提升明显,但有些表单/弹窗插件可能会受影响
  • 高级懒加载:基于可视区域检测,只优化首屏以下内容

这几项我建议一个个单独开,开一个测一下前台功能(尤其是表单、菜单交互),别一次性全开导致某个功能莫名其妙失效了还不知道是哪个选项搞的。

第四步:用Cache Rules代替老式Page Rules

Cloudflare免费版以前主要靠Page Rules做缓存规则,现在官方在往 Cache Rules(缓存规则)迁移,建议直接用新的。

进入Cloudflare后台 Caching → Cache Rules,新建一条规则,针对静态资源(比如URI路径包含 .css.js.jpg.png.woff2 等后缀)设置长缓存时间(比如一个月),动态页面交给插件管理就行,不用在这里重复配置HTML缓存,否则容易和插件的逻辑打架,出现页面更新了但前台没刷新的情况。

如果遇到提示”页面不一致”或者缓存命中状态异常,可以检查响应头里的 cf-cache-status 字段:HIT表示命中缓存,MISS表示需要刷新,BYPASS表示该页面被规则排除在外。用浏览器开发者工具的Network标签就能看到这个响应头,排查问题很直接。

常见问题

开了Super Page Cache后,原来用的WP Rocket还要不要保留? 两个全页缓存插件同时开,大概率会冲突。官方建议如果使用Super Page Cache,要关闭WP Rocket、LiteSpeed Cache、W3 Total Cache等其他插件里的页面缓存功能,只保留一个全页缓存层。资源优化类的功能(图片压缩、字体优化)倒是可以继续用别的插件,官方也提到可以配合Autoptimize、Perfmatters、ShortPixel这类资源优化插件一起使用,不冲突。

Cloudflare自家不是也有APO(Automatic Platform Optimization)吗,为什么不直接用? APO对WordPress也有缓存优化,但免费账号要收费(免费账号使用APO每月需要5美元,付费账号则免费)。预算有限、又想要更细粒度控制的话,Super Page Cache这个免费插件配合免费版Cloudflare是更划算的组合。

会不会出现网站打开变慢反而更卡的情况? 如果配置不当,确实可能。最容易踩的坑是缓存规则把动态页面也当成静态页面缓存了,或者排除规则没设好导致登录态被缓存。出问题先看 cf-cache-status 响应头,再回插件设置里检查排除列表,基本能定位到。

接下来还能做什么

CDN和缓存只是网站速度优化的其中一环。如果你做完这一步之后,PageSpeed分数还是上不去,大概率问题出在图片大小、字体加载策略,或者干脆是主机本身响应慢(TTFB高)。这几块我之前单独写过:

说到底,CDN和缓存能解决的是”传输距离”和”重复计算”的问题,但如果你的源服务器本身配置太低、TTFB常年在800ms以上,再好的缓存策略也只是在给一个慢底子打补丁。如果你最近也在纠结主机选择,可以看看我们整理的 WordPress主机推荐专题,里面有几款响应速度和价格都还不错的选项,比如 Hostinger 这种入门价位但TTFB表现还可以的主机,配合Cloudflare用起来会更轻松。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注