加速!使用WAF.SB优化网站速度

之前说到WAF.SB的接入方式.本文将介绍一些设置选项,主要用于网站加载速度的优化,尽可能减少源站负载.

HTTPS设置

HTTPS设置
上图中主要4个关键设置:

启用HTTP/2: 相比HTTP/1.1有大幅度的性能提升
启用HTTP/3: 基于QUIC,使用UDP协议进行HTTPS访问,没有TCP三次握手,大大降低延时
使用TLSv1.3: TLS握手效率较TLSv1.2有较大提升
启用OCSP Stapling: 建议配合GTS证书,拥有国内的OCSP节点

缓存设置

顾名思义,将源站的一些静态资源(如JS/CSS/图片/字体等资源)缓存在CDN节点,降低源站带宽占用和流量消耗的同时,在面临大量访问的时候,保障源站负载健康

可选的缓存策略

WAF.SB配置了一套默认的缓存策略,如果该缓存策略导致你的网站异常,可关闭默认缓存条件并自行单独设置

取消默认缓存条件

现在以typecho程序的缓存策略为例,由于我时不时需要更新一下文章,所以我后台没有设置html后缀的伪静态.故不缓存html
接下来添加缓存条件,我这里使用根据文件扩展名的形式进行缓存
添加的扩展名如下:

.css, .js, .woff, .woff2, .ttf, .svg, .png, .jpg, .jpeg, .webp, .json, .ico

添加后如下图所示
缓存文件扩展名

缓存有效期我使用的缓存7天,并勾选忽略URI参数,这样可以无视类似style.css?ver=xxxxx格式的资源,也对style.css进行缓存
缓存有效期设置
然后记得勾选支持缓存分片内容,状态码列表除了200外,还建议添加203/204/304状态码,设置如下
分片缓存和状态码设置
同时记得设置跳过Set-Cookie,避免动态查询被缓存导致网站异常,也勾选允许异步读取源站和支持分段内容来提升缓存效率
异步读取源站和分段内容

内容压缩(该功能对缓存内容生效)

既然缓存已经配置好,静态资源会缓存在服务器上了,那么进一步优化一下缓存的静态资源大小(毕竟咱们CDN按流量计费,加速的同时还能相对节省一点点成本,何乐而不为呢?)
打开内容压缩开关,同时勾选支持已压缩内容,大多数web环境默认开启了Gzip压缩,我们可以在已压缩内容基础上使用更先进的zstd/brotli算法进一步压缩
启用内容压缩
接下来看一下压缩效果
源站的css文件大小
可以看到服务器上layout.css文件大小为24.06kb.然后看看压缩后的大小
压缩后的css文件大小
访问过程中发现layout.css文件大小仅7kb.
至此,内容压缩功能设置完毕

WebP(该功能对缓存内容生效)

直接开启即可,将会对已缓存的图片转换成高效的WebP格式
开启WebP

页面优化(该功能对缓存内容生效)

直接开启开关即可,可以对已缓存内容进行进一步压缩和优化,由于我没有缓存HTML,所以我没有勾选HTML优化
页面优化

总结

看看HTTP/3启用效果

看看静态资源缓存命中
检查X-Cache标头:

HIT: 命中缓存
MISS: 未命中缓存
UPDATING: 缓存内容更新中
BYPASS: 被缓存策略跳过,不缓存该内容

缓存命中状态
看看内容压缩状态
检查响应标头中的Content-Encoding标头,被CDN成功压缩应该是zstd或brotli

设置完成后可以体验一下访问速度是否明显改善
下一章写一篇安全向的配置文章.