前言

相信各位在建站过程中或多或少都听说过老大哥『Cloudflare』的名头。cf作为全球互联网巨头在国外的访问速度那自然是快到飞起，但是在国内的访问速度却是不敢恭维。

那么，该如何优化cf的速度呢？

原理概述

在开始前，我们应该了解浏览器加载一个网站的完整过程。

1.建立连接

1.1 DNS查询

1.2 与服务器建立连接

1.3 SSL握手

2.服务器响应

在开始访问网站到与服务器建立连接，服务器发起第一个响应后，我们就到达了Time to First Byte（TTFB，首字节时间）

这个时间等于后台处理时间+重定向时间，决定TFB的因素有很多，主要有:

• 源服务器响应速度
• 客户与CDN节点建立连接的速度

TTFB的优化我们将在后文细讲。

这个时候服务器会响应一个200 OK（前提是你网站正常）并且为客户端返回你网站的index.html，这个时候浏览器会将其作为一个DOM来解析，并以多线程向里面的其他资源文件发起请求。这时，你的网站主页已经可以被显示，但是没有渲染完成。

当index.html中提到的浏览器理解的需要外联获取且非异步的资源文件被获取到了之后，它会渲染你的页面，然后页面就显示在你的面前了（就像你打开这篇文章的时候一样XD)

总而言之，优化一个网站速度的关键就是尽量缩短上面提到的时间

思路

1.TTFB优化

2.CDN回源优化

3.浏览器渲染速度优化

4.异步静态资源速度优化

操作

1.TTFB优化

对Cloudflare CDN节点进行优选

了解了TTFB的概念，很显然TTFB主要取决于你到CDN节点和CDN节点到源的响应速度。

要优化TTFB，首先要减少客户端到CDN节点的连接同时。（1.2）

这部分在Cloudflare可以使用Cloudflare for SaaS对Cloudflare的CDN节点做出一个优选，确保你命中对大陆优化较好的CDN节点。

具体步骤可以参考这篇教程。我也会在以后专门写一期。

使用高性能协议

使用较高的http版本（例如http/3）和加密协议（例如QUIC，TLS v1.3）也可以对TTFB的优化起到一个积极的作用，这里不展开讲了。（1.3）

开启Cloudflare的速度优化

在Cloudflare仪表板 > 你的域名 > 速度（Speed）配置中，你可以看到Cloudflare为了增加你站加载速度可谓是绞尽脑汁

那么多选项，我的建议是全开了。

rocketloader在部分场景下会产生加载问题，但Wordpress并不会产生，故不再赘述。

所有的优化选项是Cloudflare Pro及以上计划才提供（主要是Polish和Mirage），那么如果你是Free计划我的建议依然是把能开的全开了。

Ps:_Enhanced HTTP/2 Prioritization_这一选项在官方仪表板中显示需要升级计划，但是可以用API的方式开启，具体不再赘述，可以去梦牛之类的第三方仪表板后台看看。

重点主要是Early Hints Brotli和Auto Minify这仨家伙，把他们开了能提升不少响应速度。

三者具体的作用原理在Cloudflare官网可查，这里不再赘述。

2.CDN回源优化

到了这一步，咱们速度优化的老熟人出场了。对，就是缓存。（这里的缓存是边缘缓存不是浏览器缓存，后者将在浏览器渲染速度优化中提到）

使用边缘缓存

缓存的作用是将杂七杂八的东西缓存在Cloudflare的节点上不回源，从而极大的增加加载速度。

Cloudflare的缓存

Cloudflare的默认缓存行为是遵循源服务器的缓存标头，这显然不够。我们可以通过写Cache Rules的方式来缓存站里的静态资源文件（甚至是全站）

同时让你在被打的时候增加一点存活几率。

这里分享个简单的Cache Rule，感兴趣的小伙伴们可以自己琢磨一下。

缓存规则:

(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") 

行为:

Cache eligibility
(required)

Mark whether the request’s response from origin is eligible for caching. Caching itself will still depend on the cache-control header and your other caching configurations.



Bypass cache

Eligible for cache
Edge TTL
(optional)


Specify if and how long Cloudflare should cache the response, depending on if a cache-control header is present on the origin response.



Use cache-control header if present, bypass cache if not

Use cache-control header if present, use default Cloudflare caching behavior if not

Ignore cache-control header and use this TTL
Input time-to-live (TTL) (required)
1 day

Status code TTL

Specify how long Cloudflare should cache the response based on the status code from the origin.
Browser TTL
(optional)


Specify how long client browsers should cache the response. Cloudflare cache purge will not purge content cached on client browsers, so high browser TTLs may lead to stale content.



Bypass cache

Respect origin TTL

Override origin and use this TTL
Input time-to-live (TTL) (required)
3 days

注:建议大家尽量不要缓存mp4等视频，量大了有封号风险。

源服务器响应优化

这部分就是纯Wordpress的内容了。可以装几个速度插件（如LiteSpeed）使用Memcached，Redis等提升性能，这里不细说了，网上一搜全是教程。

3.浏览器渲染速度优化

思路主要是异步且从较快的地方加载css和js，排除渲染阻塞的js，使用ucss等，可以在Litespeed插件中配置。这里不展开讲。

4.异步加载的静态资源速度优化

还能是啥？图片和视频呗

建议用一些国内的图床/对象存储就好了。

这篇文章先到这里。