Brotli 压缩同 Gzip 压缩之比较

通常我们都希望浏览网站网页的速度越快越好，这样也意味着，下载内容的数据越少越好。越少的数据量，会消耗更少的下载时间，就能让用户得到更快的网页载入。

根据 Google 的研究，超过40%的人在打开网页，等待了三秒钟后放弃了，而对于交易网站来说，每增加一秒钟的等待时间，就会降低7%的转换率。是的，每一秒钟都是非常重要的。

据说 Brotli 压缩方式比更为常见的 Gzip 压缩方式，得到更小的文件。那么我们就来实际比较一下，看看到底有多少的差别。

什么是 Brotli？

同 gzip 类似， Brotli 也是一种压缩算法，由 Google 开发，对于文本压缩非常好。主要的特点就是它在服务器端和客户端都用到了词典，常见关键词和词组都有，这样可以获得更佳的压缩率。

目前 Brotli已经获得各主流浏览器的支持。

Brotli 压缩数据格式的工程文档： IETF rfc7932

怎样知道我的浏览器是否支持 Brotli？

当打开一个网页，然后在浏览器使用期开发工具的时候，可以查看其 content-encoding，如果看到 br 字样，那就是Brotli，如果看到 gzip，那就是用的 gzip 方式。

看响应头里面的数据就可以了。

Brotli vs Gzip：

这才是重头戏，本文的重点就是比较两者的压缩率。

根据某些文章的比较：

• Javascript 文件用 Brotli 压缩可以比 gzip 的小14%。
• HTML 文件会小21%。
• CSS 文件会小17%

注意，图片之类的就不要在使用gzip或者 brotli 来压缩了，因为它们是已经压缩过的了。再压的话只会让文件更大。

较小的文件传输，不只是会让浏览器可以更快的载入，而且会让你的服务器节省带宽成本，或者 CDN 也会省一点。

比较之前，还是要说一下比较的平台。

一台在 Linode 的 VPS，Intel(R) Xeon(R) CPU E5-2697 v4 @ 2.30GHz，Ubuntu 18.04lts。自己编译的 Nginx。SSL 证书是用的 Let's Encrypt的。

• Nginx 1.17.0 版本
• ngx-brotli 0.1.3rc 版本
• openssl 1.1.1b 版本

压缩参数

gzip 压缩参数是默认的，gzip_comp_level 1，这个值可以从1到9。Nginx 下默认是 1。（Apache 下默认 6，IIS 下默认 7。）

Brotli 压缩参数，brotli_comp_level，使用默认值 6，这个值从 1 到11。

这里有个权衡，压缩参数设置越大，可以获得更小的压缩文件，但是压缩是要消耗 CPU，消耗时间的，虽然在浏览器端解压缩的时间是差不多的，但是把压缩参数调到最大显然是不经济的。这里不展开的，就用默认值来比较。

比较的内容：

我会选择普通的 html 文件，css 文件，js 文件已经 minify 之后的 js，css 文件，来做比较。

HTML 文件

phpinfo 页面，是一个普通的 html 页面，文件原始的大小 88.20KB。

• gzip：25.17KB
• brotli：21.45KB
• 减少了17%

CSS 文件

CSS 文件，本站使用的样式文件之一，未经 minify，原始大小28KB。

• gzip：7.52KB
• brotli：5.73KB
• 减少了31%

CSS 文件，本站使用的样式文件之一，已经做了minify，原始大小23KB。

• gzip：6.61KB
• brotli：5.18KB
• 减少了27%

Javascript 文件

jquery-3.4.1.js 文件，原始大小274KB。

• gzip：99.37KB
• brotli：76.25KB
• 减少了30%

jquery-3.4.1.min.js 文件，原始大小87KB。

• gzip：35.27KB
• brotli：29.55KB
• 减少了 19%

以上的测试比较，可以看到不同的文件类型，其压缩后的文件大小都有相当大的减少。

进阶测试

上面的测试都是在默认的压缩参数下进行的，下面我会用最优的压缩参数，当然是我个人认为最优的压缩参数，简而言之，是在尽可能大的压缩率的情况下，资源消耗不会增加太多。

gzip_comp_level 8 （通常我会保守一些，设置成 6 ）

brotli_comp_level 9

HTML 文件

phpinfo 页面，是一个普通的 html 页面，文件原始的大小 88.20KB。

• gzip：22.66KB
• brotli：21.34KB
• 减少了6%

CSS 文件

CSS 文件，本站使用的样式文件之一，未经 minify，原始大小28KB。

• gzip：6.03KB
• brotli：5.65KB
• 减少了6%

CSS 文件，本站使用的样式文件之一，已经做了minify，原始大小23KB。

• gzip：5.53KB
• brotli：5.16KB
• 减少了7%

Javascript 文件

jquery-3.4.1.js 文件，原始大小274KB。

• gzip：99.37KB
• brotli：81.31KB
• 减少了22%

jquery-3.4.1.min.js 文件，原始大小87KB。

• gzip：30.28KB
• brotli：29.43KB
• 减少了 3%

在优化参数后测试的结果，就没有那么大的改善了。此时 brotli 还是有更大的压缩率，获得更小的文件，但是改善只有 7% 左右了。用未经 minify 的js 文件几乎已经没有了，所以这个 jquery-3.4.1.js 文件的情况，实际使用中可以不用考虑。

小结：

在默认参数下，可以看到 brotli 压缩方式有更好的压缩率，但是在参数调优的情况下，差距变小。

因为目前 brotli 还没有被整合进 Nginx ，只能用编译安装的方式，才能让服务器支持，所以比较麻烦。如果你的服务器本来就是编译安装的，那么倒是不用犹豫，加上 brotli 支持。如果还是用 apt 包安装方式的，那么可以考虑调优 gzip 压缩的参数，来获得更好的压缩率。