如何压缩网站资源（Gzip/Brotli）提升网站性能的关键技术
本文目录导读：
在当今互联网时代,网站加载速度直接影响用户体验、搜索引擎排名（SEO）以及转化率，根据Google的研究，如果网页加载时间超过3秒，53%的用户会放弃访问，优化网站性能至关重要，而资源压缩（如Gzip和Brotli）是其中一项关键技术。
本文将详细介绍如何通过Gzip和Brotli压缩网站资源,包括它们的原理、优缺点、配置方法以及最佳实践，帮助开发者显著提升网站性能。
什么是资源压缩？
资源压缩是指通过算法减小文件（如HTML、CSS、JavaScript、JSON等）的体积，从而减少网络传输时间，常见的压缩方式包括：
- Gzip：广泛使用的传统压缩算法，兼容性好。
- Brotli：Google开发的新型压缩算法，压缩率更高，但需要较新的浏览器支持。
压缩后的文件在传输到客户端（浏览器）时会被自动解压，不影响最终内容的呈现。
Gzip压缩
1 Gzip的工作原理
Gzip基于DEFLATE算法,通过查找重复字符串并替换为更短的引用，从而减少文件大小，它特别适用于文本文件（如HTML、CSS、JS），但对已压缩的文件（如JPEG、PNG）效果有限。
2 如何启用Gzip？
2.1 Apache服务器
在.htaccess文件中添加：
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json </IfModule>
或者使用mod_gzip（较旧版本）：
<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file \.(html?|css|js|json)$ </IfModule>
2.2 Nginx服务器
在nginx.conf中添加：
gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_min_length 1024; gzip_comp_level 6;
2.3 Node.js（Express）
const compression = require('compression');
const express = require('express');
const app = express();
app.use(compression());
3 Gzip的优缺点
✅ 优点：
- 兼容性极好,几乎所有浏览器和服务器都支持。
- 压缩速度快,适用于动态内容。
❌ 缺点：
- 压缩率不如Brotli高。
- 需要较高的压缩级别（如
gzip_comp_level 9）才能达到较好效果，但会增加CPU负担。
Brotli压缩
1 Brotli的工作原理
Brotli是Google开发的压缩算法,采用更高效的字典编码和熵编码技术，压缩率比Gzip高20%~30%，尤其适合静态资源。
2 如何启用Brotli？
2.1 Nginx（需安装Brotli模块）
brotli on; brotli_comp_level 6; brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
2.2 Apache（需安装mod_brotli）
<IfModule mod_brotli.c> AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript application/json </IfModule>
2.3 Node.js（Express）
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression({
filter: (req, res) => {
if (req.headers['accept-encoding']?.includes('br')) {
return compression.filter(req, res);
}
return false;
}
}));
3 Brotli的优缺点
✅ 优点：
- 压缩率更高,减少带宽消耗。
- 支持11级压缩（
0-11），静态资源可使用最高级别（11），动态内容可使用1-6。
❌ 缺点：
- 需要较新的浏览器支持（Chrome、Firefox、Edge、Safari 11+）。
- 高压缩级别（
11）会显著增加CPU负担，不适合动态内容。
Gzip vs Brotli：如何选择？
| 对比项 | Gzip | Brotli |
|---|---|---|
| 压缩率 | 中等 | 更高（+20%~30%） |
| CPU消耗 | 低 | 高（尤其是br 11） |
| 兼容性 | 几乎所有浏览器 | 现代浏览器（IE不支持） |
| 最佳用途 | 静态资源 |
推荐策略：
- 静态资源（CSS/JS/HTML）：优先使用Brotli（
br）。 - （API响应）：使用Gzip（
gzip）或Brotli低级别（br 4）。 - 兼容性考虑：同时支持Gzip和Brotli，让浏览器自动选择（通过
Accept-Encoding头）。
如何测试压缩效果？
1 使用浏览器开发者工具
- 打开Chrome DevTools（F12）。
- 进入 Network 选项卡。
- 刷新页面,查看资源是否被压缩（
Content-Encoding: gzip/br）。
2 使用在线工具
3 命令行测试
curl -H "Accept-Encoding: gzip" -I https://example.com curl -H "Accept-Encoding: br" -I https://example.com
最佳实践
- 优先压缩文本资源（HTML/CSS/JS/JSON），避免压缩已压缩的文件（JPEG/PNG/MP4）。
- 设置合适的压缩级别：
- Gzip：
6（平衡压缩率和CPU消耗）。 - Brotli：静态资源用
11用4-6。
- Gzip：
- 启用缓存：结合CDN和浏览器缓存，减少重复压缩。
- 监控性能：使用Lighthouse或Web Vitals持续优化。
Gzip和Brotli是提升网站性能的关键技术,合理使用它们可以显著减少传输时间，提高用户体验，对于现代网站，建议同时支持Gzip和Brotli，并根据资源类型选择合适的压缩方式。
通过本文的指导,你可以轻松配置服务器，优化网站加载速度，让访客享受更流畅的浏览体验！ 🚀
