网站加载速度一直是备受关注的话题。本文将探讨两种主流的压缩算法: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 消耗 | 高负载 | 低负载 |
兼容性 | 较好 | 非常好 |
综合来说,如果更注重网络传输性能和带宽利用率,可以考虑使用 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 等主流的缓存插件均有类似的功能。
暂无评论内容