Gzip vs Brotli 压缩算法,谁更好?及最优实施方案

Gzip vs Brotli 压缩算法,谁更好?及最优实施方案

网站加载速度一直是备受关注的话题。本文将探讨两种主流的压缩算法:Gzip 和 Brotli,以了解它们各自的优势和劣势,并比较它们的压缩效果与压缩效率,同时给出最优实施方案建议。

Gzip 压缩算法

Gzip 使用 DEFLATE 算法,结合了 LZ77 和霍夫曼编码,最初用于 UNIX 系统的文件压缩。在 HTTP 协议中,Gzip 编码被用来提升 Web 应用性能,要求 Web 服务器和客户端(浏览器)都支持。目前,几乎所有主流浏览器,包括 IE6 至 IE9、FireFox、Google Chrome、Opera 等,都已经支持了 Gzip,显示了 Gzip 已经成为互联网发展的趋势。

作为互联网上广泛使用的一种数据压缩格式,Gzip 可将一般纯文本内容压缩至原大小的 40%,大大减少了网站文件中的重复代码和空白字符。它提供了 9 个压缩级别,用户可以根据需要微调压缩量和压缩时间。

在提升 Web 应用性能方面,Gzip 一直是首选。然而,随着另一种压缩算法 Brotli 的出现,它成为了 Gzip 的强有力竞争对手。

Brotli 压缩算法

Brotli 是 Google 在 2015 年 9 月推出的一种压缩算法。考虑到互联网用户的时间宝贵,Google 开发了 Brotli,相比其他压缩算法具有更高的压缩效率。Brotli 使用变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方法进行数据压缩。

根据 Google 发布的研究报告,Brotli 压缩算法具有多个特点,包括:

  • 针对常见的 Web 资源内容,Brotli 的性能比 Gzip 提高了 17-25%;
  • 当 Brotli 压缩级别为 1 时,压缩率比 Gzip 的最高级别 9 还要高;
  • 在处理不同的 HTML 文档时,Brotli 依然能提供非常高的压缩率。

由于其卓越的压缩性能,Brotli 自推出以来迅速占据了压缩市场。除了 IE 和 Opera Mini 之外,几乎所有主流浏览器都已支持 Brotli 算法。

Brotli 相较于 Gzip 是否更佳?

显然,在研究中,Brotli 压缩效果显示出了明显的优势。例如,相比 Gzip 的 9 个压缩级别,Brotli 共有 11 个。此外,Brotli 还使用预定义的 120KB 字典,包含超过 13000 个常用单词、短语和其他子字符串。这些因素有效提高了 Brotli 的压缩率。根据 Certsimple 的研究,Brotli 压缩的 JavaScript 文件比 Gzip 小 14%,HTML 文件比 Gzip 小 21%,CSS 文件比 Gzip 小 17%。

尽管 Brotli 在压缩方面表现出色,但其优势是以其他代价为代价的。随着压缩级别的提高,Brotli 压缩所需的时间也会相应增加。换句话说,Brotli 需要更多的计算能力,这可能意味着更高的设备和软件成本。此外,Brotli 要求浏览器必须支持 HTTPS 才能使用。

Gzip vs Brotli 压缩算法优劣对比

  Brotli Gzip
压缩比 中等
支持数据类型 更广泛 适中
CPU 消耗 高负载 低负载
兼容性 较好 非常好
Gzip vs Brotli

综合来说,如果更注重网络传输性能和带宽利用率,可以考虑使用 Brotli。但如果更注重服务器资源消耗和兼容性,那么 Gzip 仍然是一个不错的选择。

鱼和熊掌兼得的最优实施方案

有没有办法结合 Brotli 与 Gzip 两者的优势呢?答案是肯定的。

推荐的方法就是借助一个支持 Brotli 压缩功能的 CDN 处理压缩,这样可以减少网站服务器的 CPU 消耗,且大幅提升网络传输效率。

具体实施方法如下( 以 WordPress 网站搭配腾讯云 CDN 为例 ):

腾讯云 CDN 支持 Brotli 与 Gzip 两种压缩方式,只要两种方式都勾选的话,优先采用 Brotli 压缩方式。但若源站开启了压缩功能,且服务端携带响应头:Content-Encoding,则 CDN 的压缩功能将不再生效。

基于这样的情况,可以在 WEB 服务器的站点配置文件中,将 CDN 回源的请求关闭压缩,一切压缩将交给 CDN 处理了,具体操作方式如下(以 Nginx 为例):

首先在 Nginx 的站点配置中,在 WordPress 伪静态规则之前添加一段代码,使 CDN 回源的请求关闭 Gzip 压缩 。

# CDN 回源关闭 Gzip 压缩
location ~ .*\.(js|css|xml|ico|svg|woff|woff2|ttf)$
{
	expires      365d;
	access_log /dev/null;

	if ( $http_iscdn = "yes"){
	   gzip off;
	}
}

注意,这段代码必须覆盖原有的 js,css,xml,ico,svg,woff,woff2,ttf 文件的配置,或者在原配置之前,否则不生效。

若要增减文件类型,可修改(js|css|xml|ico|svg|woff|woff2|ttf),注意使用|符号分隔。

如果使用的是宝塔面板,参照如下示例:

设置完毕后,重启 Nginx,再回到“腾讯云 CDN 配置 > 回源配置 > 回源HTTP请求头配置”中添加“iscdn”标头,并将值设置为“yes”,方法如下:

通过 WordPress 缓存插件或 Perfmatters 插件配置 CDN 域名:

注意 CDN URL 替换成自己实际使用的 CDN 域名。

提示:WP Rocket、W3 Total Cache、WP-Optimize Premium、FlyingPress 等主流的缓存插件均有类似的功能。

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容