Brotli 压缩同 Gzip 压缩之比较

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

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

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

什么是 Brotli?

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

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

brotli-browser-support.jpg

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

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

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

chrome-browser-gzip.jpg

chrome-browser-brotli.jpg

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

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 压缩的参数,来获得更好的压缩率。

文章来源:

Author:David Yin
link:https://seo.g2soft.net/2019/05/22/brotli-vs-gzip.html