banner
herman

herman

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

在Cloudflare设置缓存规则全站加速WordPress博客

首先!

特别感谢!

老头左右天地极限三位大佬的帮助。

此博客大部分抄袭左右大佬(传送门在此)hiahia~

前提准备#

・你的网站域名需要在 Cloudflare 上解析,并且开启代理这是必要条件

・关闭 Wordpress 上的各种缓存插件,并清空缓存,这是建议

设置 Page Rules(页面规则)#

Cloudflare 免费计划,每个域名可以免费添加 3 条页面规则,对于 Wordpress 来说正好够用,如果你是其他建站程序切勿直接照抄,要根据你的程序链接规则去设置。

第一步、 从 Cloudflare 主页选择你的域名,进入到域名功能界面#

第二步, 菜单 —— 规则 —— 页面规则,进入页面规则设置页面#

1701442967859.png

第三步、 点击创建页面规则按钮,一共添加 3 条规则,如下#

设置管理后台规则#

1701442967860.png

| 规则名称 | 值 |

| ---------------- | ------------------------------------------------------------ |

| URL | pup.0521.uk/wp-admin/*
注意:这个网址要改成你自己的 |

| 浏览器完整性检查 | 开启 |

| 安全级别 | 高 |

| 缓存级别 | 绕过 |

| IP 地理位置表头 | 开启 |

| 电子邮件混淆技术 | 开启

重点是,缓存级别一定要设置绕过,缓存级别一定要设置绕过,缓存级别一定要设置绕过,否则就麻烦大了! |

设置其他动态页面规则 例如评论、搜索等等。#

1701442967860.png

| 规则名称 | 值 |

| ---------------- | ------------------------------------------------------------ |

| URL | pup.0521.uk/*.php
注意:这个网址要改成你自己的 |

| 浏览器完整性检查 | 开启 |

| 安全级别 | 高 |

| 缓存级别 | 绕过 |

| IP 地理位置表头 | 开启 |

| 电子邮件混淆技术 | 开启 |

重点也是缓存级别一定要设置绕过,不过设置错了不想管理后台规则那么严重。

设置首页、分类、页面及文章页规则#

1701442967860.png

| 规则名称 | 值 |

| ---------------- | ---------------------------------------------- |

| URL | pup.0521.uk/*
注意:这个网址要改成你自己的 |

| 浏览器完整性检查 | 开启 |

| 安全级别 | 高 |

| 缓存级别 | 缓存所有内容 |

| 边缘缓存 TTL | 2 小时 |

| IP 地理位置表头 | 开启 |

| 电子邮件混淆技术 | 开启 |

第四步、 检查顺序#

创建完成后确认一下顺序!!!

创建完成后确认一下顺序!!!

创建完成后确认一下顺序!!!

1701442967860.png

以上我们就设置好了基本的网站页面规则,这时候可以保证网站的首页、分类、文章等页面都可以走 CDN。

这地方有个小技巧,设置完成以后自己到网站上把页面都点一遍,以触发页面缓存到 CDN,等到真正的访客浏览网站时,就能秒开了!

设置 Cache Rules 由于 Cloudflare 免费计划最多只能设置 3 条页面规则,我们设置了 1 个静态页面和 2 个动态页面规则之后,就用完了。

但是,网站除了以上页面外,还有很多静态资源,比如图片、JS、CSS、字体等等,如果这些每次都从源站加载,还是会占用大量带宽,这时候 Cache Rules(缓存规则) 就排上用场了。

Cloudflare 免费计划每个域名可以创建 10 条缓存规则,绰绰有余!下面我们就将静态资源加入到缓存中。

设置 Cache Rules(缓存规则)#

第一步、从 Cloudflare 主页选择你的域名,进入到域名功能界面#

第二步,展开左侧菜单,点击缓存 ——Cache Rules,进入缓存规则设置页面#

1701442967860.png

第三步、 点击创建规则按钮#

博客首页和文章页缓存#

1701442967861.png

静态资源缓存 (css/is/woff/html)#

直接点击编辑表达式,把下面的内容直接粘贴进去即可


(http.request.uri contains ".css") or (http.request.uri contains ".js") or (http.request.uri contains ".woff") or (http.request.uri contains ".jpg") or (http.request.uri contains ".png") or (http.request.uri contains ".svg") or (http.request.uri contains ".gif") or (http.request.uri contains ".bmp") or (http.request.uri contains ".ico") or (http.request.uri contains ".jpeg")

1701442967861.png

lsky 图床 - 图片缓存#

如果有自建图床,则为图床图片添加缓存。时间设置最长即可。

1701442967861.png

以上我们就设置好了静态资源的缓存规则,这时候并不是马上就能生效了,而是会随着你的网站被访问逐渐被缓存到 CDN。与页面规则同样的小技巧,设置完成以后自己到网站上把页面都点一遍,以触发页面缓存到 CDN,等到真正的访客浏览网站时,静态资源就能秒加载了!

其他设置#

Crawler Hints#

当使用 Cloudflare 的站点更改内容时,Crawler Hints 会为搜索引擎和其他爬网程序提供高质量的数据。这样,爬网程序可以精确地抓取,避免浪费,同时可以普遍减少源服务器及其他 Internet 基础结构的资源消耗。

操作路径:缓存 —— 配置 ——Crawler Hints

Always Online™#

源服务器不可用时让访问者仍可访问您的网站。Cloudflare 可通过 Internet Archive 的 Wayback Machine 提供有限的网页副本。

操作路径:缓存 —— 配置 ——Always Online™

Tiered Cache Topology#

通过选择缓存拓扑,您可以控制源服务器与 Cloudflare 数据中心的连接方式,以确保缓存命中率更高、源服务器连接数更少,并且 Internet 延迟更短。

操作路径:缓存 ——Tiered Cache——Tiered Cache Topology™,选择 Smart Tiered Caching Topology

清理缓存#

最后,如果你修改了网站的主题或安装了新的插件或修改了代码等等,强烈建议你马上清理 Cloudflare 的 CDN 缓存,否则网站可能不能正常显示,或者各种错误。

操作路径:缓存 —— 配置,最顶上就有清除缓存的操作按钮,支持自定义路径清除和清除所有内容,可按自己实际情况使用。

图片

如何判断缓存生效#

按 f12 调出开发者工具,查看 cf-cache-status 状态,这就是当前网页 or 文件的 CF 缓存状态,出现 HIT,表示缓存成功。首次打开博客页面会出现 MISS,按 f5 刷新后会变成 HIT。

微信图片_20231202225323.png

cf-cache-status 状态常见的有以下几种:

  • cf-cache-status——HIT:

    你的文件已经命中 CF 缓存。这表示用户获取文件的方式途径为从 CF 缓存服务器中获取而非你的源服务器,不消耗你的服务器资源。

  • cf-cache-status——MISS:

    CF 已经在缓存服务器中查找了你所请求的文件,但是并没有找到,CF 的缓存服务器将会回源至你的服务器中获取该文件,当下次请求时该文件就会显示 HIT

  • cf-cache-status——BYPASS:

    CF 已经被要求不缓存该文件,用户将直接从网站源服务器中获取文件,这个通常是因为请求的文件响应了 NO-Cache header

  • cf-cache-status——EXPIRED:

    自上次缓存之后,文件的缓存期限已经过期,CF 将会再度回源至网站源服务器进行获取文件,当下次请求时该文件就会显示 HIT

  • cf-cache-status——DYNAMIC:

    这个文件默认不会缓存,也没有对应的缓存配置,用户将从网站源服务器获取该文件。

注意事项#

因为设置了缓存规则,比如设置两小时,更新博客后,两小时后别人才能看到最新文章。即别人打开你的博客看到的是两个小时前的内容。

所以当你自定义主题,更新或者发布博文的时候,需要关闭以下三个规则并清理浏览器缓存。否则你打开博客页面会有更新延迟。关闭后再修改无延迟,这样就可以实时查看修改后的状态。

调整完再打开即可。

  • Page Rules(页面规则)

微信图片_20231203000053.png

  • Cache Rules(缓存规则)

微信图片_20231203000132.png

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。