网站加载速度一直是备受关注的话题。本文将探讨两种主流的压缩算法：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 等主流的缓存插件均有类似的功能。