最近帮客户做网站性能优化，配置了 HTTP/2 和 Brotli 压缩。Brotli 比 Gzip 压缩率平均高 20% 左右，配合 HTTP/2 的多路复用效果非常明显。

为什么要上 Brotli？

Google 在 2015 年推出了 Brotli 压缩算法，专门针对 Web 文本做了优化：

  • HTML 压缩率提升约 21%
  • CSS 压缩率提升约 17%
  • JS 压缩率提升约 14%

更小的体积意味着更快的加载速度，移动端环境下收益更明显。

配置步骤

确保 Nginx 版本在 1.11.5 以上，编译时带上 --with-http_v2_module 和 --with-http_brotli_module。

server 块配置：

server {
    listen 443 ssl http2;
    brotli on;
    brotli_comp_level 6;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
}

踩坑记录

几个坑要注意：一是 Brotli 模块需要单独编译，CentOS 用 yum 装的话需要加 EPEL 源；二是 CDN 回源时如果源站配了 Brotli 而 CDN 没开，会有兼容问题；三是 HTTPS 必须配好证书链，否则 HTTP/2 协商会失败降级。

效果

配置完用 Chrome DevTools 看，120KB 的 JS 文件 Gzip 后 42KB，Brotli 后 33KB，首屏从 2.3s 降到了 1.6s。