压缩技术：性能提升 20%？

许多团队听到“压缩可提高 20% 的性能”之类的说法，并期望立即提高速度。结果取决于压缩的内容、压缩运行的位置以及系统是否有足够的 CPU 容量。我将压缩视为数据大小和处理时间之间的权衡。较小的有效负载可以更快地通过网络移动。相同的有效负载可能还需要额外的 CPU 工作才能使用。一个有用的设置可以衡量双方，而不是只关注一个百分比。 ### “性能提高 20%”可能意味着什么 该短语可以描述几种不同的结果： - 每秒处理的请求增加 20% - 网络传输时间减少 20% - 存储使用减少 20% - 页面交付速度加快 20% - 数据库读取速度提高 20% 这些结果并不相同。网络连接速度较慢的服务可能会受益于较小的响应。添加压缩后，在 CPU 受限的服务器上运行的服务可能会变慢。当系统处理大量、重复或高度结构化的数据时，通常会出现最强的结果。文本、JSON、日志、CSV 文件和源代码通常可以很好地压缩。 JPEG 图像、MP4 视频、ZIP 档案和许多加密文件通常没有进一步压缩的空间。 ### 一个我使用常见 API 模式的实际示例：报告服务向 Web 仪表板返回大量 JSON 响应。每个响应都包含重复的字段名称、产品类别和客户记录。未压缩的响应约为 2 MB。启用 gzip 后，响应下降到大约 420 KB。服务器使用更多的 CPU 来创建压缩响应，但仪表板在较慢的连接上加载速度更快，因为通过网络的数据更少。结果并不是每次测试都有固定的 20% 增益。在本地办公网络上，差异很小。在移动连接上，改进更容易看到。这就是为什么压缩声明需要明确的测试条件。 ### 我如何测试更改 #### 1. 记录当前基线 我在更改设置之前测量系统： - 平均响应时间 - 第 95 个百分位响应时间 - 每秒请求数 - CPU 使用情况 - 内存使用情况 - 负载大小 - 错误率 - 网络传输量 第 95 个百分位很重要，因为平均结果可能隐藏缓慢的请求。一项服务可能总体上看起来很健康，但有些用户等待的时间却更长。 #### 2. 单独的压缩类型我测试与内容匹配的格式。 Gzip 得到广泛支持，并且适用于 HTML、CSS、JavaScript、XML、JSON 和文本文件。 Brotli 在许多情况下可以生成较小的 Web 有效负载，特别是对于静态文本资产。其压缩级别可能会增加构建时间或服务器 CPU 使用率。 Zstandard 提供一系列速度和压缩设置。它可以适合需要控制这两个因素的内部服务、数据管道和存储系统。最佳选择取决于客户端支持、服务器资源、文件类型和响应大小。 #### 3. 设置大小阈值 小响应可能无法从压缩中受益。标头和压缩元数据可能会占用部分节省的空间。服务可能会压缩大于 1 KB 或 2 KB 的响应，然后使用自己的流量测试阈值。正确的值取决于应用。 #### 4. 检查 CPU 成本 压缩不应仅根据有效负载大小来判断。我观察正常流量和高负载测试期间的 CPU 使用情况。高压缩级别可以节省更多字节，但需要更长的时间才能产生响应。较低的水平可能会带来更好的平衡。对于许多服务，快速设置比最小的可能文件提供更强的结果。 #### 5. 测试不同的网络条件 本地测试可能会产生误导性的印象。我比较： - 快速有线连接 - 标准家庭宽带 - 移动网络 - 高延迟连接 - 内部数据中心流量 有效负载大小减少 20% 对于快速内部网络可能影响不大。同样的减少可以缩短带宽有限的用户的加载时间。 ### 压缩可能导致问题的地方 压缩会增加工作量。在繁忙的服务器上，这项工作可能会与应用程序任务、数据库查询和加密竞争。重复压缩也浪费资源。静态文件可以在构建过程中进行压缩并以随时可用的形式提供。动态响应可能需要在请求时进行压缩，这使得 CPU 监控变得更加重要。某些数据不应再次压缩。压缩的存档或视频文件可能会变得稍微小一点，同时需要额外的处理时间。加密数据通常不能很好地压缩，因为其模式已被删除。安全设置也需要小心。将敏感内容和公共内容压缩在一起可能会在某些 Web 攻击场景中产生风险。团队应检查私有数据在响应中的显示方式，并避免将机密放在攻击者控制的内容旁边。 ### 如何提出 20% 的性能声明 精确的声明应包括测试条件： - 测量的内容 - 使用哪种压缩格式 - 压缩级别 - 平均文件大小 - 网络状况 - 服务器硬件 - 流量级别 - 比较周期 更清晰的声明是：“Brotli 在我们的测试环境中将 JavaScript 传输大小减少了约 20%，页面加载结果因连接速度和设备而异。”该措辞提供了有用的信息，但并不表明每个系统都会产生相同的结果。 ### 我推荐的方法是从测量开始，而不是压缩设置。我选择一组有代表性的文件或 API 响应，测试两种或三种格式，并将传输节省与 CPU 成本进行比较。对于 Web 应用程序，我通常会查看 Brotli 或 gzip 以获取基于文本的资产。对于内部服务，我会考虑网络距离、请求量和CPU容量。对于备份和数据存储，我会一起测试压缩率、恢复时间和硬件使用情况。压缩可以带来有意义的性能提升，在适当的条件下可以提高 20%。这不是一个保证的结果。有用的问题不是“哪种格式提供最高的压缩？”但是“哪种设置可以为系统提供更小的有效负载而不产生新的瓶颈？”

速度缓慢的网站可能会在页面加载完成之前失去访问者。大图像、未压缩的脚本和大量视频文件会消耗带宽，特别是对于使用移动网络的人来说。我经常看到团队添加更多功能，而真正的问题在于文件大小。压缩技术提供了一种减少浏览器需要下载的数据量的实用方法。目标很简单：保持页面有用，同时发送更少的字节。当我查看一个缓慢的网站时，我会从最大的文件开始。图像通常会产生最大的负载。相机照片可能包含比产品页面所需的更多细节。我调整图像大小以匹配其显示区域，然后选择合适的格式： - WebP 适用于许多照片和图形。 - 当浏览器支持和图像质量满足项目需求时，AVIF 可以进一步减小文件大小。 - PNG 对于需要清晰透明度或锐利平面颜色的图像仍然有用。 - 当首选简单的工作流程时，JPEG 仍然可以提供一些照片内容。 4000 像素的图像不需要出现在 600 像素的产品卡中。发送较大的文件会浪费数据，并且可能会延迟页面的可见部分。我还使用响应式图像，以便浏览器可以为较小的屏幕选择较小的文件。文本文件受益于服务器端压缩。 Gzip 得到广泛支持，而 Brotli 经常为 HTML、CSS、JavaScript 和其他基于文本的内容生成较小的文件。服务器应该在将这些文件发送到浏览器之前对其进行压缩。基本设置可能包括： 1. 检查服务器是否支持 Brotli 或 Gzip。 2. 启用 HTML、CSS、JavaScript、JSON、XML 和 SVG 文件的压缩。 3. 避免压缩已经压缩的格式，例如 JPEG、WebP、AVIF、ZIP 和 MP4。 4. 确认响应包含正确的“Content-Encoding”标头。 5. 通过移动连接和桌面连接测试页面。压缩不会取代代码清理。 JavaScript 包可以被压缩并且仍然包含未使用的功能。我检查重复的库、未使用的样式、大型第三方脚本以及在主要内容之前加载的文件。删除不必要的代码可以减少网络和浏览器的工作量。视频需要不同的方法。即使其他资源很小，大背景视频也会使着陆页感觉沉重。我可能会为不需要运动的访客使用较短的剪辑、较低的分辨率或静态海报图像。应谨慎处理自动播放，尤其是在移动设备上。缓存可以帮助访问者避免再次下载相同的文件。静态资源可以使用合适期限的缓存头，而文件名可以随着内容的变化而改变。常见的模式是：“app.2025-01.js”或构建系统添加的版本哈希。这使得浏览器可以保留已知文件，同时在更新后接收新文件。缓存设置应与站点发布更改的方式相匹配。我还审查了内容交付选项。内容交付网络可以将静态文件存储在距离不同区域的访问者更近的地方。压缩仍然很重要，因为 CDN 通过其网络将压缩文件发送到浏览器。这两种方法针对交付过程的不同部分。一个简单的例子来自带有产品页面的在线商店。该页面使用了几个大的 PNG 文件、一个全尺寸的英雄图像和一个未压缩的 JavaScript 包。该团队将合适的图像转换为 WebP，调整了英雄图像的大小以适应常见的屏幕宽度，为文本文件启用了 Brotli，并删除了一个未使用的脚本。测试中页面变得更轻，而产品图像仍然足够清晰，可以正常浏览。确切的结果取决于访问者的设备、连接、缓存状态和位置。我衡量变化而不是仅仅依靠外观。有用的检查包括： - 页面总权重 - 最大内容绘制 - 第一个字节的时间 - 网络请求数 - 图像文件大小 - JavaScript 传输大小 - 移动加载行为 Lighthouse、PageSpeed Insights、WebPageTest 和浏览器开发人员工具等工具可以显示权重的来源。我使用类似的测试条件比较每次更改之前和之后的同一页面。更快的分数并不能取代用户反馈，因此我还会检查页面是否仍然易于使用。压缩作为常规发布过程的一部分效果最好。新图像应在上传前进行检查。构建工具可以自动压缩 CSS 和 JavaScript。服务器设置应在平台更改后进行测试。每月进行一次小审查可以防止文件大小在没有通知的情况下增长。我的方法是仅发送访问者需要的内容，以浏览器可以使用的格式，以与屏幕匹配的尺寸。压缩技术可以支持更快的加载，但良好的性能还取决于图像选择、代码质量、缓存和页面设计。当这些部分一起审查时，网站可以提供更干净的体验，而不会删除有用的内容。

压缩可以带来 20% 的增益，但结果取决于您测量的内容。较小的文件可能会减少带宽使用。压缩图像可以改善页面加载。较短的数据库记录可以降低存储成本。这些增益并不总是出现在同一个地方，因此我首先在更改任何设置之前定义目标。如果我的目标是加快网站交付速度，我会跟踪： - 文件大小 - 传输时间 - 最大内容绘制 - 服务器响应时间 - 压缩期间的 CPU 使用情况 - 图像或视频质量 - 存储和带宽成本 文件大小减少 20% 并不总能带来 20% 的页面速度提高。网络条件、服务器距离、浏览器缓存和页面结构也会影响结果。 ### 压缩可以创造可衡量的收益 图像通常提供最清晰的机会。保存为大 PNG 的产品图像可能包含比页面需要的更多数据。将其转换为 WebP 或 AVIF 可以减少传输大小，同时在普通屏幕上保持图像清晰。 Google 报告称，WebP 图像可能比同类 JPEG 和 PNG 文件小，但具体结果会随图像内容和质量设置而变化。实际测试可能如下所示： - 原始 JPEG：500 KB - 压缩 WebP：380 KB - 文件大小减少：24% - 可见质量：审核后可接受 - 页面传输：移动连接时较低 这并不意味着每个图像都会达到 20%。平面图形、照片和屏幕截图对压缩的响应不同。文本文件提供了另一个有用的路径。 HTML、CSS、JavaScript、XML 和 JSON 通常包含重复的空格、标签和字符。 Gzip 和 Brotli 可以在这些文件在服务器和浏览器之间传输之前对其进行压缩。 Brotli 通常对于基于文本的资产表现良好，但服务器需要足够的处理能力来处理压缩而不增加延迟。视频需要不同的方法。大型源文件可以使用现代编解码器进行压缩，但结果取决于分辨率、帧速率、运动和音频设置。简短的产品演示通常比高速运动的体育剪辑更容易减少。 ### 测试 20% 目标的简单方法我使用受控比较，而不是立即更改整个站点。 1.选择清晰的示例 选择一组代表正常流量的页面、图像、API 响应或视频。保持样本足够大，以避免根据一个不寻常的文件做出决定。 2.记录当前数字 记下原始文件大小、加载时间、服务器 CPU 使用情况和质量得分。 Lighthouse、PageSpeed Insights、WebPageTest 和服务器日志等工具可以帮助创建基线。 3.应用一种压缩方法 一次更改一个变量。对于图像，测试格式和质量。对于文本，请测试 Brotli 或 Gzip。对于视频，测试编解码器、比特率和分辨率。 4.检查真实设备上的输出 文件可能在大显示器上看起来很好，但在手机上看起来很软。在接受结果之前，我会检查不同的屏幕尺寸、较慢的连接和常见的浏览器。 5.比较全部成本 压缩可以节省带宽，但可以使用更多的 CPU。花费太多时间压缩每个请求的服务器可能会响应更慢。缓存压缩文件可以减少这个问题。 6。分阶段发布更改 小型部署有助于暴露损坏的资产、缓存标头、不受支持的格式或图像质量差的问题。我在更改后查看错误日志和性能数据。 ### 一个实际示例想象一家拥有 10,000 张产品图片的在线商店。每个图像平均为 450 KB，该站点每月收到 200,000 个图像请求。压缩前每月传输量约为90GB。减少 20% 会将平均图像大小降低至 360 KB。假设请求数量保持不变，预计传输量将降至 72 GB 左右。商店可以节省带宽并改善较慢网络上的图像传输。如果许多访问者已经缓存了图像，结果可能会更小。如果旧文件包含不必要的元数据或使用低效格式，它也可能会更大。店主不应仅根据文件大小来判断更改。产品图片仍然需要显示颜色、纹理、标签和小细节。如果购物者无法正确检查产品，较小的文件大小就没有什么价值。 ### 降低收益的常见错误 一些团队会压缩已经很小的文件。 CPU 成本可能超过带宽节省。其他人则多次压缩图像。每次有损转换都会删除更多细节，尤其是在再次编辑并导出 JPEG 时。单一的质量设置也不可能适合所有资产。英雄图像可能需要比缩略图更多的细节。产品照片可能需要与徽标不同的设置。删除缓存头可以取消部分增益。如果浏览器每次访问时都下载相同的压缩文件，服务器仍然会承受可避免的负载。我还避免将所有问题隐藏在压缩背后。过大的图像可能是布局规则不佳的症状。将 2,000 像素的图像提供给 320 像素的显示器会产生浪费，而仅靠压缩无法完全解决这一问题。响应式图像、延迟加载和正确的尺寸可能会产生更好的结果。 ### 最终结果如何判断我把20%作为一个测试目标，而不是一个承诺。一个成功的压缩项目应该显示出几个健康的信号： - 较低的平均传输大小 - 类似或更好的视觉质量 - 稳定的服务器响应时间 - 较低的带宽使用 - 失败请求不会增加 - 移动连接上更好的加载结果 我的观点很简单：压缩在支持更广泛的性能计划时效果最好。选择正确的文件格式，删除不必要的数据，设置合适的尺寸，缓存结果并测量每个更改。对于许多网站和数据系统来说，20% 的增益是可能的。当检查质量、服务器负载和用户体验后保存仍然可见时，它会变得有用。

许多团队在做出决定之前都会等待大型数据集。这种延迟所带来的代价不仅仅是少量的不确定性。我发现更快的结果通常来自于提出更狭窄的问题、跟踪更少的操作以及在收集每个可能的细节之前审查有用的信号。数据较少并不意味着分析粗心。这意味着消除噪音，以便更容易看到下一个决定。一个有重点的流程可以很好地适用于营销活动、产品页面、电子邮件测试和小型在线商店。从一个商业问题开始。不要以“数据说明了什么？”开始。提出一个可以指导行动的问题： - 哪个着陆页可以帮助访问者了解优惠？ - 哪个电子邮件主题行能从现有订阅者那里获得更多打开率？ - 结帐时人们会在哪里停下来？ - 哪个广告带来了与产品匹配的访问量？明确的问题会限制您所需的数据。如果目标是比较两个登陆页面，您可能只需要访问、参与会话、表单开始和完成的表单。跟踪数十个不相关的事件可能会使报告更难阅读。选择与决策相匹配的信号。高访问量可能看起来很积极，但它并不能告诉我访问者是否找到了他们需要的东西。我更喜欢将每个指标与用户操作联系起来。对于产品页面，一个简单的集合可能包括： - 页面访问 - 阅读关键内容所花费的时间 - 添加到购物车操作 - 已完成的购买 - 客户关于缺失信息的问题 每个信号都回答问题的不同部分。页面访问量显示覆盖范围。添加到购物车的操作表明了兴趣。购买显示已完成的操作。客户的问题可能会揭示数字可能遗漏的困惑。在收集更多数据之前清理跟踪。更多的数据无法修复损坏的设置。重复的购买事件、缺少表单提交或不明确的流量来源都可能导致错误的决定。我检查了一份小的跟踪列表： 1. 每个事件都有一个明确的名称。 2、同一动作不计两次。 3. 尽可能排除内部访问。 4. 测试订单被标记或删除。 5、流量来源使用一致的标签。 6. 报告显示日期范围和设备类型。这项工作可能感觉很基础，但它通常比添加另一个仪表板更能提高下一份报告的质量。使用具有明确限制的简短测试。小测试应该有明确的变更和明确的审查点。我可能会更改一个标题、一项号召性用语或一项表单布局。一次更改多个元素会使结果更难以理解。想象一下一家销售存储产品的小型在线商店。店主注意到许多访问者查看产品页面，但很少有人将商品添加到购物车。店主没有收集所有可能的行为，而是测试了更清晰的产品摘要，并将交货详细信息放在价格附近。测试期结束后，所有者会检查： - 产品页面访问量 - 添加到购物车率 - 结帐开始 - 有关交货的客户消息 - 按设备划分的销售 结果可能无法证明每次销售都是由一项更改引起的。它仍然可以显示页面是否需要更多工作以及下一步值得关注的部分。这是来自集中数据集的有用结果。将早期信号与坚定决策分开。小数据集可以指导下一步，但它们可能无法支持广泛的业务主张。我把早期的运动视为一个信号，而不是一个承诺。如果一个版本在短暂测试后获得更多点击，我可能会继续观察它。如果不检查流量质量、设备组合、季节性和重复访问等因素，我不会将其描述为永久赢家。这种方法可以防止企业对某一不寻常的日子做出过度反应。根据用户反馈审查数据。数字表明发生了什么。他们并不总是说明事情发生的原因。简短的客户调查、支持消息或一些可用性会话可以添加有用的上下文。如果访问者在到达电话号码字段后留下表格，调查可能会揭示对骚扰电话的担忧。如果人们询问运费，该页面可能需要更清晰的送货信息。我喜欢将一小组行为​​指标与直接的客户语言配对。这可以在不建立大型研究项目的情况下创建更平衡的观点。让下一步行动可见。报告应该帮助某人决定要做什么。每次审核都可以以一个实际行动结束： - 保留当前页面并测试表单。 - 重写交付部分。 - 删除产生噪音的事件。 - 对移动流量运行相同的测试。 - 在进行另一个页面更改之前与客户交谈。简短的行动清单可以让团队不断前进。它可以防止报告成为无人使用的图表集合。更快的结果并不是来自仓促的分析。它们来自减少不必要的工作、保护数据质量以及密切关注重要问题。当我使用更少、更好的信号时，我可以更快地发现有用的模式，并更有信心地解释下一步。数据集可能更小，但决策变得更容易理解。有兴趣了解更多有关行业趋势和解决方案的信息吗？联系院长：dean@mojoysports.com/WhatsApp +86153 5612 6305。

MDN Web Docs (2025) 内容编码 HTTP 标头 Google Developers (2024) 优化最大内容绘制 Cloudflare (2024) Brotli 压缩简介 Google Developers (2024) 图像优化 Web.dev (2024) 高效加载第三方资源 Martin Kleppmann (2017) 设计数据密集型应用程序