Docker系列 WordPress系列 通过Cloudflare Workers加速WordPress博客
本文最后更新于 20 天前,如有失效请评论区留言。

本博客由Faconhost大力赞助!如何更快地访问本站?有需要可加电报群获得更多帮助。本博客用什么VPS?创作不易,请支持苯苯!推荐购买本博客的VIP喔,10元/年即可畅享所有VIP专属内容!

底部日志部分可查看最新测试情况。

前言

目前我的个人博客托管在国外VPS上,正常情况下国内用户访问是比较慢的。一般的,如果博客是在国内已备案的机器上,只要设置内容分发网络(Content delivery network, CDN)即可大大加速国内各地用户访问博客网站的速度,并且极大地减少源站的访问压力。虽然国内CDN流量一般是要收费的,但对于小站来说没有多少流量,花不了什么钱。对于VPS在国外、域名托管在Cloudflare的小伙伴来说,免费的CloudFlare CDN本来是一个不错的选择,无奈其免费服务无法根据cookie区分访客提供针对性服务,导致国内用户在访问的时候可能会访问一个离他们很远的CloudFlare泛节点,速度甚至比直接访问源站还要慢,因此很多人都戏称CloudFlare CDN是“反向优化”、“众生平等”。在较早的时候,七牛云等CloudFlare Partner的CDN是一个不错的选择,可惜在博主建站的时候CloudFlare Partner基本上已经无法正常使用。更难受的是,为非ICP备案的国外VPS优化国内线路的第三方CDN往往收费极其昂贵,基本上都是面向企业级用户,不是我这种小站长用得起的。难道用国外VPS的小伙伴就没有一种免费好用的网站加速方案吗

一个偶然的机会,我了解到了CloudFlare Workers这个东西。CloudFlare Workers通过用户自定义规则,利用Worers KV构建无服务器应用程序并在全球范围内即时响应,可以获得较低延迟的访问。结合《抛弃Cloudflare Page Rule,拥抱Workers–自定义CDN缓存策略》、《[WordPress]利用 Cloudflare Workers 来缓存博客的 HTML 网页》两篇教程的内容,我测试了一下,发现可以成功,并且确实大大地降低了国内用户访问博客的TTFB(至少我自己测试的时候是这样的)。我将两位大佬的教程结合自己的经验糅合了一下,并基于最新的CloudFlare后台界面的相关操作进行教程编写,以方便小白用户食用(大佬们的教程都写得比较晦涩)。下面,我们就来看看如何利用CloudFlare Workers加速WordPress网站

原理

  • 编写一个Worker:大佬们已经写好了脚本,我们照搬过来就行。本文所提供的Worker的作用就是根据cookie来区分访客并针对性提供访问内容,并且不会缓存已登录或已评论用户的信息。
  • 添加一个Workers KV:据介绍,其作用是“在 Cloudflare 网络中存储应用程序数据,并从 Workers 访问键值对”。我个人的理解是,KV就是一种可以免费使用的储存方案,只是免费用户每天有请求数量的限制(10w/天)。
  • Cloudflare Page Cache:WordPress插件,可以根据你后台的文章、页面等更新自动在CloudFlare中缓存HTML页面。主要是配合Worker使用。
  • 禁用Cloudflare Page Rule:由于我们已经有Worker来定义缓存规则,所以可以禁止Cloudflare Page Rule缓存,不然Cloudflare Page Cache会将用户信息也缓存上去。

创建KV空间

首先,我们要创建一个KV空间,这个操作不难:

NVIDIA_Share_aZjDQvOf9d

创建好后,你可以进去看一下,里面是没有任何条目的。因为我们还没有开始缓存,所以这里还没有数据。

NVIDIA_Share_C6O4IXqdUp

设置Worker脚本

首先,我们从Workers——概述——创建服务里进去并创建一个Workers:

chrome_p68XPnDYnz

你可以改个服务的名称,然后点创建服务即可:

chrome_VDNjlG7QKi

下面,直接快速编辑这个Worker:

chrome_UvClPsyqwu

将它默认的规则全部删除,并填入下面大佬们写好的规则:

效果图如下,最后记得点下方的保存并部署

chrome_5frLgUissP

它不会自动跳转回worker设置界面的,自己回去就好。就是上图左上角的←silent***的链接。

Worker脚本绑定KV空间

我们进入Worker脚本 ,在设置中进行KV空间的绑定:

chrome_ei7ZLUZAcj

然后填写下列内容:

chrome_q3Q32zJSBo

注意,EDGE_CACHE是Worker脚本里的一个变量名称,所以你不可以更改。KV命名空间就下拉列表并选择你自己刚刚创建好的KV空间即可。

在Worker中添加Route

Route即路由、路径之意,就是你希望Worker缓存什么路径。一般都是缓存博客根目录,比如blognas.hwb0307.com/*。当然,更加合理的规则由Worker脚本进行定义,我们就简单地将这个路径加入到Worker中即可。

我们重新进入Worker:

chrome_s8xoxe51wj

触发器里添加新路由,按画面提示做相应的选择即可:

chrome_QZJtiFv3TI

到这里,CloudFlare的设置就基本完成了。

安装Cloudflare Page Cache插件

由于这个插件未在官方频道上传,所以我们要将Cloudflare Page Cache下载下来,然后通过Zip在后台上传并安装插件:

chrome_mFefTz3OIi

安装成功后记得启用。不用启动自动更新。这个插件启用后没有界面的,保证其处于启用状态即可。它的作用就是每次你的博客内容(文章、页面、说说等)发生变化时将内容推送至CloudFlare。不过,据说Cloudflare Page Cache每次更新都是重置全部缓存,这个特性感觉不太智能。你也可以在Chrome浏览器的Header的x-html-edge-cache-version参数观察到版本号的变化。虽然实际使用过程中用户体验基本不受影响,但Cloudflare Page Cache对VPS带宽的影响还需要持续观察。

禁止Page规则

进入域名管理界面,从规则——页面规则这里进入,创建页面规则。这里主要是为了禁用Page,从而将缓存规则完全由Worker进行定义。

chrome_k198RTpNjT

按下面的内容填写:

NVIDIA_Share_27Hkp45iME

检查是否生效

完成一系列复杂的设置,下一步肯定是测试一下这些设置有没有生效。测试时不可以处于登陆状态(如果你使用WP Super Cache,登陆状态时会返回源站数据),并且将上网代理关闭以使用国内原生的网络环境。

打开一个无痕窗口并登陆自己的博客,按下图指示进行操作。记得要将Disable cache打勾,这样我们就不会因为本地缓存的存在而影响对网页元素的加载时间的测试。

chrome_4GpYFeeHIt

我们注意到图片中的这两项

x-html-edge-cache-status: Hit # Hit就说明生效了
x-html-edge-cache-version: 66 # 缓存的版本号

这与后台的KV空间的信息是一一对应的:

chrome_DCbLoDvzDI

chrome_Lx6OfKyJ6z

可能需要一段时间才会成功缓存,如果刚刚开始不成功可以等等再测试。如果实在没法成功,也可以评论区留言交流。

如果生效了,如果查看效果呢?在无痕窗口的Timing里进行查询:

chrome_91bKTCK9FR

我用登陆状态进行测试,此时我是直接访问源站,可见访客访问我博客的时候,TTFB得到了巨大的改善(源站1.11s缓存197.72ms):

chrome_B4Zs7HOvGv

这是日常使用时的一次测试(广东深圳电信)。访客一般是非登陆用户,即看右边那一列的数据即可:

image-20230222160417266

当然,一次数据不是很严谨。大家可以刷新多次,或者在不同的时间段进行测试。据我观察,Cloudflare Worker对本站访客的浏览性能优化很大,特别是访客使用了PROXY浏览。

Cloudflare v20241421版本的注意事项

因为Cloudflare是一个经常更新的平台,所以这里特定添加一些说明。不过,尽管应用的位置发生变化,但只要Cloudflare还能支持这些功能,本教程依然是有效的:

  • 包含支持自定义JS脚本的Worker功能
  • 支持KV存储

首先,KV和Worker的位置有所变化,这是最新版本的位置:

msedge_pyKKnoGjVx

现在会提供一些模板给开发者,我们选那些支持JS脚本的模板即可:

msedge_KAlMbtM9K9

这是我2024-12-21时Worker的设置界面的一些参数:

msedge_uTd5whDPD7

如果你也是差不多这样,但还是没有办法成功Cache,可以从以下几个方面排查:

  • 脚本是否有填写错误。一般来说直接copy就好;
  • 是否成功安装并启用WP Super Cache插件。因为需要使用它生成压缩html;
  • 是否成功安装并启用Cloudflare Page Cache插件。因为需要使用它将压缩html推送至Cloudflare的Worker-KV系统;
  • 使用无痕浏览器,退出登陆;
  • 等待一段时间再测试;

如果这些都不行,估计只能远程看一下了。可以加苯苯的tg群进一步讨论。

小结

本文所提供的WordPress加速策略主要是将WP Super Cache预缓存好的HTML页面通过Worker规则进行缓存,这其实已经解决了个人站长对CDN的大部分需求。对于主题资源的CDN,如Argon,可以选择开启jsDelivr的缓存(fastly目录在国内可用)或者利用DogeCloud之类的自建主题缓存;也可以直接用源站资源通过Worker进行缓存。无论哪种方案,对国内用户也足够友好了。当然,由于访问次数的日限制,免费的Worker策略对于较大的网站来说是不太具有可行性的。如果你运营着一个比较大的网站且市场主要在国内,还是乖乖地使用国内备案的域名和VPS,上国内厂商的CDN;或者考虑CloudFlare Worker的付费服务。

另外,博客中的Chevereto图片暂时无解。因为也无法通过*hwb0307.com/*的规则解决,因为Chevereto并没有后台的WordPress插件支持,这样使用只能初始化第1次缓存。只能暂时使用默认的CloudFlare CDN缓存。

目前Workers方案在我博客里处于测试阶段,以后会进一步反馈使用体验!有什么问题欢迎留言或加群讨论!

日志

2024-12-21

  • 添加了关于新版本Cloudflare的说明

2022-06-17

昨天发现Cloudflare有一个Argo的付费功能,和ip优先的功能很相似:

NVIDIA_Share_iUqKUNZ5c1

其子功能Smart RoutingTunnel的相关介绍如下:

Smart Routing
Argo 的智能路由算法使用实时网络情报通过最快的 Cloudflare 网络路径来路由流量,同时保持开放、安全的连接以消除连接设置所导致的延迟。

Tunnel
使用安装在源服务器基础结构(包括容器或虚拟机)中的轻量级后台程序,Cloudflare Tunnel 可以在最近的 Cloudflare 数据中心与应用程序的源服务器之间创建一个加密隧道,而无需打开公共入站端口。

这看着真香啊,就是要钱( ̄△ ̄;)。感觉还蛮贵的,但企业用户肯定爽得不行。

2022-06-11

经过测试,由于免费CloudFlare CDN只有两个备选ip,其实怎么优化效果都是类似的。Workers还是要结合CloudFlare Partner使用才可具有最佳性能。CloudFlare Partner在免费加速的过程中估计是绕不开的。不过最近看了一下CloudFlare的用户计划,发现IP优选已经是企业级应用了:

NVIDIA_Share_vp1qngt2tE

估计是这个功能太香了,CloudFlare已经在Partner阶段测试完,现在要开始盈利了。估计个人用户很难白嫖到这个IP优选的功能了。

扩展阅读

---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍

感谢Faconhost的友情赞助 (ฅ´ω`ฅ) 本博客基于m2w创作。版权声明:除特殊说明,博客文章均为Bensz原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。VIP内容严禁转载!由于可能会成为AI模型(如chatGPT)的训练样本,本博客禁止将AI自动生成内容作为文章上传(特别声明时除外)。如有需要,请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔! | 博客订阅:RSS | 广告招租请留言 | 博客VPS | 致谢渺软公益CDN |

评论

  1. Yuntun
    Windows Chrome 131.0.0.0
    4 周前
    2024-12-21 11:38:11

    现在cloudflare更新了很多好多页面都变化了,能否抽空更新一下呀~

    • 博主
      Yuntun
      Macintosh Safari 18.2
      4 周前
      2024-12-21 12:22:53

      我刚刚上去看了一下,其实很多东西没有实质性的变化,比如KV空间、Worker、Route等。未来我会更新一下教程,但并不会很快推出 ~ 谢谢提醒哈!

      • Yuntun
        Bensz
        Windows Chrome 131.0.0.0
        已编辑
        4 周前
        2024-12-21 12:28:33

        我在新版尽量按照原来的步骤操作了一下,但是最终只显示x-html-edge-cache:
        cache,bypass-cookies=wp-|wordpress|comment|woocommerce
        x-html-edge-cache-status:
        Miss, Cached
        x-html-edge-cache-version:
        0
        这一行代码,请问这是什么原因呀~该怎么解决/

      • 博主
        Yuntun
        Macintosh Safari 18.2
        4 周前
        2024-12-21 12:58:29

        方便的话可以公布下网址我看看

      • Yuntun
        Bensz
        Windows Chrome 131.0.0.0
        4 周前
        2024-12-21 13:02:06

        已经解决了,感谢博主的秒回复
        问题出在第六步第一行添加域名时不能按照cf的提示在域名前面加*/,删掉就好了

      • 博主
        Yuntun
        Windows Edge 131.0.0.0
        4 周前
        2024-12-21 13:33:52

        OK,我也简单地更新了下教程,作为一个过渡。 我觉得应该还是够的 ~ 毕竟要折腾Worker的人多少都有一些布署应用的经验,本教程已经是足够使用了。 另外,之前写文章的时候,Cloudflare的R2存储还没推出。它其实是解决Chevereto的边缘存储的一个良好方案,而且实现起来不难。感兴趣你也可以试试。 有其它问题再多多交流!

  2. Windows Chrome 129.0.0.0
    3 月前
    2024-10-10 21:42:52

    对于Cloudflare我只能说他是我心中最美的赛博菩萨!他太强了,而且免费的东西太多啦,很难让人不爱!

  3. tangwudi
    Macintosh Chrome 124.0.0.0
    8 月前
    2024-5-22 20:55:08

    我今天把图床从chevereto转移到了cloudflare R2,发现R2自带的自选位置功能就相当于图片的优选ip功能,现在我关闭了cloudflare对图片的缓存,直接让浏览器加载R2上的图片链接,感觉打开图片的时间起码比以前少了一半,你有兴趣也可以尝试一下,我就是忽然想起你在这篇文章里提到过图片通过cf缓存以后慢的问题。

    • 博主
      tangwudi
      Windows Edge 125.0.0.0
      8 月前
      2024-5-23 21:42:15

      好的,谢谢提醒 (~ ̄▽ ̄)~

    • 博主
      tangwudi
      Windows Edge 125.0.0.0
      8 月前
      2024-5-23 21:45:53

      我看到这个教程,R2也可以通过wordpress插件的方式使用: A Guide to Using Cloudflare R2 with WordPress – Jack Whitworth 有时间我测试一下相关的方案

      • tangwudi
        Bensz
        Macintosh Safari 17.5
        8 月前
        2024-5-23 21:50:03

        我其实主图床还是chevereto,因为我要使用它的水印功能,只是每次我更新chevereto的图片以后,会通过rclone同步更新到R2,所以我不直接使用wordpress插件对接R2。

  4. tangwudi
    Macintosh Chrome 120.0.0.0
    1 年前
    2024-1-13 21:56:15

    今天测试了这种方法,3秒就能打开,已经完全可以接受了。。本来我是用动态重定向,将所有国内非CDN地址访问博客的请求都重定向到国内域名的,1秒就能打开,但是毕竟要花云主机和买cdn流量的钱,平均下来1个月20多,是笔巨款。。可惜我已经买了2年的云主机,暂时没法用这种方式了,就留作备用吧,已经不错了。

    • 博主
      tangwudi
      Windows Edge 120.0.0.0
      1 年前
      2024-1-18 18:58:48

      确实是可以的,我目前用的就是这个方案

  5. Windows Edge 113.0.1774.50
    2 年前
    2023-7-12 10:17:35

    大佬,这个代码贴进去有报错

    • shidt
      shidt
      Windows Edge 113.0.1774.50
      2 年前
      2023-7-12 10:18:30

      图片咋贴,,,

    • shidt
      shidt
      Windows Edge 113.0.1774.50
      已编辑
      2 年前
      2023-7-12 10:18:54
      • 博主
        shidt
        iPhone Chrome 114.0.5735.124
        2 年前
        2023-7-12 10:28:05

        有空我看看~最近也有人试这个方法 当时没问题

      • Bensz
        Windows Edge 113.0.1774.50
        2 年前
        2023-7-12 10:37:03

        谢谢捏

  6. Space520
    Windows Edge 114.0.1823.67
    2 年前
    2023-7-04 17:07:42

    你好,Bensz。为什么我按照你的教程做后
    x-html-edge-cache-status: Miss,Cached


    查看图片
    PB4a.png


    我该如何解决

    • 博主
      Space520
      Windows Edge 114.0.1823.67
      2 年前
      2023-7-04 17:14:05

      我看的时候是成功的,如图:

      查看图片
      msedge_xFk1aUdanJ

      。 你可以试试: 1. 以访客身份访问。 2. 使用无痕浏览器。 3. 查看页面而不是动态资源或者非wordpress的静态资源。

      • Space520
        Bensz
        Windows Edge 114.0.1823.67
        2 年前
        2023-7-04 18:07:40

        试了,还是x-html-edge-cache-status: Miss,Cached
        可能是我电脑问题吧

  7. Android Chrome 111.0.0.0
    2 年前
    2023-4-05 23:24:54

    感谢分享,来晚了感觉嫖不到免费的优选了

    • 博主
      Kaspa的技术博客
      Windows Edge 111.0.1661.62
      2 年前
      2023-4-05 23:26:21

      还好啦 现在我的网站也挺快了

    • Kaspa的技术博客
      Windows Chrome 129.0.0.0
      3 月前
      2024-10-10 21:41:26

      可以试试这个 Cloudflare 优选 https://cf.vvhan.com/

  8. Zero
    Windows Edge 107.0.1418.56
    2 年前
    2022-11-25 21:15:33

    大佬,你好,看了你这文章,有点问题关于Page规则的,能不能增加一个怎么配置的图

    • 博主
      Zero
      Windows Edge 107.0.1418.56
      2 年前
      2022-11-25 21:17:18

      原文这个图写得很清楚啦(

      查看图片


      ),您还有什么疑问不?可否具体一些?

      • Zero
        Bensz
        Windows Edge 107.0.1418.56
        2 年前
        2022-11-25 21:20:38

        就是点创建规则后,又弹出一个界面,让我选择创建什么规则。

      • 博主
        Bensz
        Windows Edge 107.0.1418.56
        2 年前
        2022-11-26 8:55:20

        我懂你的意思了,哈哈!如图:

        查看图片
        NVIDIA_Share_27Hkp45iME

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇