使用 Cloudflare Workers 提高 WordPress 速度和效能教学

使用 Cloudflare Workers 提高 WordPress 速度和效能教学

去年在 WordCamp Taipei 活动中分享经营网站多年的心得,其中我认为最重要、也不断重複提及的是「速度」,这两个字说来简单,要认真钻研必须耗费不少时间,如何兼顾速度和使用者体验确实有相当难度。网站速度一直是我努力的方向,但也深知所有事物都有极限,除了使用近年比较热门的 Google AMP技术,网站速度就像一道难以跨越的高墙,许多人努力许久依然徒劳,很难突破的就属 Time to First Byte(TTFB)。

还好现在资源越来越多,我们有各种方法可以改善网站速度,例如使用 Cloudflare内容传递网路(CDN)服务,甚至全世界目前最快的网域名称伺服器(DNS),对 WordPress 使用者来说耗费成本一定比静态网站多很多,而 Cloudflare 可能就是我心目中成本最低、效果最好的网站最佳化服务。

假如你对于改善 WordPress 网站速度有兴趣,以下几篇文章可以参考:

本篇文章要探讨全新Cloudflare Workers 工具,本以为它与我无关,后来才从网路上的範例教学得知 Cloudflare Workers 也可以用来让 WordPress 变得更快,而且非常有感!简单来说,交给 Cloudflare 全球边缘伺服器Edge Server)处理 WordPress 产生的页面,因为 WordPress 本身属于动态产生的内容,透过快取方式把静态页面在 Cloudflare 边缘网路,可使载入速度更快。

Cloudflare Workers 是什幺呢?从官方网站会知道无论在使用者装置上执行前端程式码,或是中央资料中心执行后端程式码 JavaScript 都有其缺陷,于是 Cloudflare Workers 为开发人员在全球网路边缘(Edge)提供第三个地方部属程式码,具备云端的能力与弹性,大量传输系统的备援能力,同时也可以加快传输速度。

以往在 Cloudflare 都是使用「Page Rules」强制快取所有页面(Cache Everything),不过受限于 WordPress 特性,这个方法必须在每次更新网站时都手动清除 Cloudflare 上的快取,对于开发人员来说依然有其不方便性。

使用 Cloudflare Workers 加速 WordPress 教学

Cloudflare 提供各种 Workers 方案,一个月 $5 美元就有十万次免费请求额度。

那幺以 Cloudflare Workers 进行快取在实作上会不会很困难?我可以跟你说:不会,而且只要十分钟左右就能设定完成,当然这只能算是 Cloudflare Workers 最基础、最简单的功能之一,也就是在边缘快取(Cache)轻量的静态 HTML 网页,但对于 WordPress 使用者来说确实会很有用,特别是在伺服器本身资源不足,时常因为流量过大而停摆的案例上,Cloudflare 可以帮助网站撑下更多的流量。

网站名称:Cloudflare Workers网站链结:https://www.cloudflare.com/zh-tw/products/cloudflare-workers/

使用教学

在开始前,你的 WordPress 网站必须已经使用 Cloudflare 服务,如果还没,可以照着这篇文章教学设定一下。以下步骤仅适用于 WordPress 自架站的朋友(也就是可以自行安装布景主题和外挂),如果你是使用 WordPress.com 的话不适用本篇教学。

STEP 1

首先从你的 WordPress 控制台安装「Cloudflare Page Cache」外挂,这个外挂已经在 WordPress 外挂资料库上架,也是 Cloudflare 团队开发维护,安全性方面不需担心,安装后启用即可,没有其他设定画面。

使用 Cloudflare Workers 加速 WordPress 教学

STEP 2

回到你的 Cloudflare 控制台,从上方选单找到「Workers」后按下「Launch Editor」开启这项工具的编辑器。

使用 Cloudflare Workers 加速 WordPress 教学

STEP 3

开启 Workers 编辑器后,从左上角选择「Scripts」,接着按下「Add Script」,名称就命名为 html-edge-cache吧!

使用 Cloudflare Workers 加速 WordPress 教学

把预设的程式码全选、清除后,我们要从 Cloudflare 的 Github 找到 Edge Cache HTML 範例,其中有一个 edge-cache-html.jsRaw)是要用到的程式码,全部複製后贴到 Workers 编辑器。

使用 Cloudflare Workers 加速 WordPress 教学

最前面的 CLOUDFLARE_API 部分有三个要设定的栏位:

完成后记得储存。

使用 Cloudflare Workers 加速 WordPress 教学

STEP 4

接着从左上角切换为「Routes」,我们要设定执行的网址。

使用 Cloudflare Workers 加速 WordPress 教学

点选「Add Route」将你的网址输入,后面接上 * 字号代表所有页面下都套用此规则,看起来像是 free.com.tw/* ,然后在后面下拉式选单选择刚才建立的 Workers 程式码。如果你有使用其他网址(例如 CDN),也一併在这里加入。

使用 Cloudflare Workers 加速 WordPress 教学

STEP 5

大功告成!现在 WordPress 网站会丢给 Cloudflare Workers 判断并做适当的静态网页快取,不过登入或留言后会绕过快取,避免 WordPress 原有的动态功能无法正常使用。

打开浏览器的开发人员工具,试着查看一下网站目前的 header ,如果有出现 x-html-edge-cache-status: Hit 代表快取已成功运作。

使用 Cloudflare Workers 加速 WordPress 教学

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

取消

我们发现您正在使用 AdBlock Plus 或者其他 ABP 类软件屏蔽了广告。本站没有任何互动、动画、讨厌的声音或弹出广告,我们不做这些讨厌的类型的广告!请把 ddmf.net 加入到你的AdBlock Plus软件白名单,万分感谢!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by 江南品味,分享从这里开始,精彩与您同在