站长们应该都知道 Brotli 压缩算法吧,这是一种通用的无损压缩算法。它结合使用 LZ77 算法的一个现代变体(Lempel-Ziv 编码)、霍夫曼编码和二阶上下文建模来压缩数据,提供了与当前最佳通用压缩方法相媲美的压缩比。2015 年 9 月谷歌发布了 Brotli 压缩算法,直到现在才开始被大多数的浏览器所兼容。特别是 HTML、CSS 和 JavaScript 的常用术语,能够将数据比 gzip, bzip2, LZMA 等压缩算法的基础上进一步进行压缩,减少了数据内容的容量大小,使得网页在加载时速度更快。主流的 HTTP 服务器程序 Apache 和 Nginx 也很早就支持了 Brotli 压缩算法,明月自己在 Nginx 上用 Brotli 压缩算法也有六年多了(可参考【给 Nginx 添加谷歌 Brotli 压缩算法支持】一文)。
最近明月把 Brotli 压缩算法设定为了“首选”网页压缩算法,实现起来其实也很简单,只需要在nginx.conf
文件里调整Brotli
和Gzip
语句先后位置即可,如下代码所示:
brotli on;brotli_window 512k;# Brotli 使用的窗口值。默认值为 512kbrotli_comp_level 6;# 压缩水平可以是 0 到 11,默认值是 6。太高的压缩水平对性能提升并没有太大好处,因为这需要更多的 CPU 时间brotli_window 512k;# Brotli 使用的窗口值。默认值为 512kbrotli_comp_level 11;# 压缩水平可以是 0 到 11,默认值是 6。太高的压缩水平对性能提升并没有太大好处,因为这需要更多的 CPU 时间brotli_types application/dash+xml application/eot application/font application/font-sfnt application/javascript application/json application/opentype application/otf application/pkcs7-mime application/protobuf application/rss+xml application/truetype application/ttf application/vnd.apple.mpegurl application/vnd.mapbox-vector-tile application/vnd.ms-fontobject application/xhtml+xml application/xml application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-httpd-cgi application/x-javascript application/x-mpegurl application/x-opentype application/x-otf application/x-perl application/x-ttf font/eot font/opentype font/otf font/ttf image/svg+xml text/css text/csv text/javascript text/js text/plain text/richtext text/tab-separated-values text/xml text/x-component text/x-java-source text/x-script;# 指定允许进行压缩的回复类型brotli_static always;# 是否允许查找预处理好的、以 .br 结尾的压缩文件。可选值为 on、off、alwaysgzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss;gzip_vary on;gzip_proxied expired no-cache no-store private auth;gzip_disable "MSIE [1-6]\.";
然后保存,重启 Nginx,网页载入时压缩算法选择顺序就是:Brotli=>Gzip 了,毕竟目前几乎所有的主流浏览器都已经支持 Brotli 压缩算法了嘛!
CloudFlare 默认是支持 Brotli 压缩算法的,只需要在 CloudFlare 后台【速度】——【优化】——【内容优化】里开启即可,如下图:
但是 CloudFlare 默认支持的 Brotli 压缩等级是默认 6 级的,现在的云服务器 CPU 算力完全是可以用 11 级的,更高级的压缩等级带来的好处不言而喻,网页越小自然载入速度就越快了,CloudFlare 上缓存好这些 11 级压缩过的文件就是刚需了。
看看这个个 CSS 文件被 Brotli 压缩后的压缩比
我们在服务器 Nginx 里调整 Brotli 压缩等级为 11 后,只需要在 CloudFlare 里【规则】——【Configuration Rules】里创建一个规则就可以让 CloudFlare 支持服务器上的 11 级 Brotli 压缩文件了:
(ends_with(http.request.uri.path, ".css")) or (ends_with(http.request.uri.path, ".js"))
CloudFlare 规则表达式(可以复制粘贴到 CloudFlare 里直接引用哦!)
然后确保如下图所示的开关选项都是“关闭”的:
具体就是关闭【自动 HTTPS 重写】、【Auto Minify】勾选 CSS、JS 以及【电子邮件混淆】、【Rocket Loader】、【服务器端排除】这几项,然后【部署】为第一条【Configuration Rules】规则即可。记得最后清除一下 CloudFlare 上的缓存,让 CloudFlare 节点 IP 重新回服务器获得 Brotli 压缩等级 11 的压缩文件。
最后,可以到【Check Gzip/Brotli Compression】里输入网页或者网页 CSS、JS 文件地址进行 Brotli 压缩比结果测试了。
CloudFlare 免费版在处理小文件的缓存时候国内延迟是最低的,所以 Brotli 压缩的越小就越好,国内站推荐大家试试,具体效果可能会有差异,但境外测速网站评分一定会有上涨的。