提升网站的加载速度,你选择 Brotli 还是 Gzip?

提升网站的加载速度,你选择 Brotli 还是 Gzip?
作者 | Chameera Dulanga
译者 | 王强
策划 | 李俊辰

本文最初发布于 Medium 网站,经原作者授权由 InfoQ 中文站翻译并分享。

我们大家经常会使用各种压缩方法来提高 Web 应用程序的性能,而 Gzip 是其中最受欢迎的一种。最近,另一种名为 Brotli 的压缩方法开始引起了人们的关注,它似乎已成为了 Gzip 的有力竞争对手。

本文介绍了 Brotli 压缩方法的概况,并使用 CDN(具体来说是 AWS CloudFront)设置了 Brotli,并与 Gzip 压缩结果和未压缩内容做了对比评估。

Brotli 是什么?

谷歌于 2013 年首次发布了 Brotli 压缩格式,作为谷歌 Web 字体的一种离线压缩方法。2 年后,谷歌发布了 Brotli 的新版本,用于通用无损数据压缩需求。但是,Brotli 缺乏浏览器支持,而 Gzip 在这方面仍处于领先地位。结果,Brotli 等了好几年时间才具备了挑战 Gzip 的能力。

现在,Brotli 已获得所有主流 Web 浏览器的全面支持,包括 Chrome、Firefox、Safari 和 Edge。游戏开始了!

Brotli 比 Gzip 更好吗?

与 Gzip 相比,Brotli 压缩格式在研究中显示出了鼓舞人心的结果。对比来看,Gzip 有 9 个压缩级别,而 Brotli 有 11 个压缩级别。此外,Brotli 使用了服务器和客户端上都有的字典,其中包含常见的关键字和短语。这些要素共同提高了 Brotli 的压缩率。

根据 CertSimple 的研究,Brotli 压缩的 JavaScript 文件比 Gzip 小 14%,而 HTML 和 CSS 的压缩率分别比 Gzip 高 21%和 17%。

但这些好处是有代价的,压缩操作所花费的时间将随着压缩级别的提升而增加。简而言之,Brotli 需要更多的计算能力。

另请牢记,浏览器中对 Brotli 的支持仅在 HTTPS 连接中生效,而 Gzip 同时支持 HTTP 和 HTTPS。

也就是说,你可以看到 Brotli 有其优点和局限性。现在你已经对 Brotli 有了基本的了解,下面我们来看一个真实的例子。

使用 CDN 启用 Brotli 和 Gzip 压缩

我从 GitHub 选择了一个 React 演示项目来做对比。

https://github.com/gothinkster/react-redux-realworld-example-app

项目将 AWS CloudFront 配置为压缩用途,AWS S3 负责托管,设置下来只需要 4 步。

第 1 步:创建一个 S3 存储桶并上传 React 包

第一步,你可以创建一个 S3 存储桶并上传包含 index.html、CSS 和 JavaScript 的 React 包。

第 2 步:创建一个 AWS CloudFront 分发

接下来,你可以使用 AWS 控制台创建一个 AWS CloudFront 分发,如下所示。

提升网站的加载速度,你选择 Brotli 还是 Gzip?

这里,你可以从下拉列表中选择 S3 存储桶作为 原始域名(Origin Domain Name)。另请注意,要按需配置 “限制存储桶访问”(Restrict Bucket Access)“OAI”和“对存储桶授予读取权限”(Grant Read Permission on Bucket) 属性。最后单击 “创建分发”(Create Distribution) 按钮。

这一步需要花一些时间才能完成。接下来,选择创建的分发并转到 “行为”(Behaviors) 选项卡以启用压缩。

第 3 步:将缓存策略设置为 Brotli

你得找到默认行为,然后添加启用了 Brotli 压缩的缓存策略。

提升网站的加载速度,你选择 Brotli 还是 Gzip?创建一个新的缓存策略

如果同时选中两个选项,则默认情况下,如果你的浏览器支持 Brotli,CloudFront 将使用 Brotli 压缩。

第 4 步:验证压缩结果

你可以在 Chrome 中打开应用程序并访问 Chrome 网络控制台来验证结果。这里你可以检查 “响应头”(Response Headers) 中的“内容编码”(content-encoding)属性值。如果值为 br,则 Brotli 处于运行状态。

提升网站的加载速度,你选择 Brotli 还是 Gzip?启用 Brotli 的响应头

如果你需要有关启用静态托管或 Gzip 压缩的更多信息,请参考我以前的文章:使用 Gzip 和 CDN 加速静态网站:

https://blog.bitsrc.io/aws-speed-up-your-static-web-site-using-gzip-and-cdn-383d458b51a3

未压缩 vs Gzip vs Brotli

启用 Bortli 压缩后,我试着使用示例 React 应用对比未压缩、Gzip 和 Brotli 的性能。

JavaScript 文件性能

提升网站的加载速度,你选择 Brotli 还是 Gzip?文件大小对比

上图显示了使用 Gzip 和 Brotli 压缩后的 main.js 文件的大小。

未压缩的 main.js 文件大小为 319kB,而 Gzipp 和 Brotli 版本分别为 89.3kB 和 81.7kB。Gzip 压缩版本的文件大小减少到 1/3.5,而 Brotli 压缩版本的文件减少到 1/3.9。

提升网站的加载速度,你选择 Brotli 还是 Gzip?加载时间对比

当我对比同一个 main.js 文件的加载时间时,Gzip 和 Brotli 的结果之间出现了显著差异。

Gzip 花了 966ms 来加载文件,而 Brotli 花了 296ms,这是非常了不起的。未压缩的版本花费 1.9 秒加载这个 JS 文件。

JSON 负载性能

另外,我对 XHR 做了对比。这些 XMLHttpRequests 包含 JSON 格式的数据。我们来看一下这两种压缩方法的效果对比。

提升网站的加载速度,你选择 Brotli 还是 Gzip?提升网站的加载速度,你选择 Brotli 还是 Gzip?XHR 的加载时间和文件大小

如你所见,Brotli 以 1.34 秒的加载时间和 224B 的文件大小领先于竞争对手,而 Gzip 以 1.54 秒的速度和 318B 的成绩落后。

尽管这里的差异略小,但两种方法的差距会随着原始文件大小的增加而扩大。

在本例中,原始文件大小为 419B,Brotli 的压缩率约为 46%,而 Gzips 的压缩率约为 24%。

    结论    

根据上述实验结果可以清楚地看出,Brotli 压缩格式的压缩率比 Gzip 的压缩率更高。对比压缩结果后,我可以明确指出 Brotli 压缩格式是目前 HTML、JS、CSS 和 JSON 文件的最优压缩方法。

但是,Brotli 对于非文本文件的性能表现可能会很差。因此,最好在将 Brotli 用于其他文件类型之前做一番研究。

最后,由于大多数 Web 应用都是使用 React 等 JavaScript 框架开发的,因此 Brotli 是提高网站加载性能的绝佳选择。

延伸阅读

https://blog.bitsrc.io/gzip-to-brotli-better-frontend-load-performance-b2b4d8dbf60f

提升网站的加载速度,你选择 Brotli 还是 Gzip?

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关