此页面由 Cloud Translation API 翻译。

优化基于文本的资源的编码和传输大小

Ilya Grigorik

Jeremy Wagner

除了避免不必要的资源下载，您可以采取的通过优化并压缩其余资源

数据压缩基础知识

在您设置好网站以避免下载任何未使用的资源后，那么接下来就要先压缩浏览器剩下的所有符合条件的资源下载。根据资源类型（文字、图片、字体等）有许多不同的技术可供选择：在网络服务器上启用、针对特定内容的预处理优化以及需要从广告系列开发者。

要想实现最佳效果，需要综合考虑以下所有因素方法：

压缩就是使用更少的位对信息进行编码的过程。
消除不必要的数据总是会产生最好的结果。
有许多不同的压缩技术和算法。
您需要采用各种技术来实现最佳压缩。

缩减数据大小的过程称为数据压缩。许多人贡献了用于提高压缩率的算法、技术和优化措施比、压缩速度和各种压缩所需的内存等算法。

关于数据压缩的完整讨论远远超出本指南的讨论范围。然而，概要了解压缩的工作原理非常重要，您可以运用哪些技巧来缩减网页中的各种资源的大小所需的资源。

为了说明这些技术的核心原理，我们来看一下优化一种简单的短信格式（仅为此示例编制）：

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

消息可能包含任意注释，有时也称为评论（以“#”表示）前缀。注释不会影响消息的含义或行为。
邮件可以包含标头，标头是键值对（以 ":"）。
消息带有文本载荷。

怎样才能缩减之前的邮件（从 200 个字符？

评论很有趣，但并不影响消息的含义。请在发送消息时将其删除。
有一些好的技术可以高效对标头进行编码。对于例如，如果您知道所有消息都带有“format”“date”和“date”你可以将这些 ID 转换为短整数 ID，然后只发送这些 ID。不过，如果不是真的，所以最好暂时不予理会。
载荷为纯文字。虽然我们不知道其中到底是什么内容（显然，它使用了 "secret-cipher"），只看文本这表明其中存在大量冗余或许您不想发送您可以只数一下重复字母的个数从而更高效地对它们进行编码。例如，"AAA" 会变为 "3A"，表示三个 A 的序列。

结合使用这些技术会产生以下结果：

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

新讯息的长度为 56 个字符，这表示您已将提高 72%。大幅削减了！

这只是一个典型示例，展示了压缩算法减少基于文本资源的传输大小。在实践中，压缩该算法比上例所示复杂得多，压缩算法可显著降低下载量为资源节省的时间对基于文本的资产应用压缩后，可以减少加载资源的时间，这样用户就可以了解这些资源的运行速度会比不压缩要少

缩减大小：预处理和针对特定上下文的优化

此处讨论的第一项技术是“缩减大小”。虽然缩小严格来说，这是一种在源代码中使用了冗余字符，以使资源更易于人类。不过，这些可读性对于维护相应功能并且可能会延迟网络上的资源。

缩减大小是一种针对特定内容的优化，缩减所交付资源的大小，并且优化在。例如，捆绑器是能自动缩减资源大小的常用软件然后再将新的生产代码部署到网站。

若要压缩冗余或不必要数据，最好的办法是将其消除。但是，您不能只是删除任意数据。然而，在某些情况下，对数据格式及其属性有内容特定了解，可以在不影响有效负载的情况下实际含义或功能。

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

想一想前面的 HTML 代码段及其支持的三种不同内容类型，包含：

HTML 标记。
用于自定义网页的呈现方式的 CSS。
为互动和其他高级网页功能提供支持的 JavaScript。

以上每种内容类型都有不同的规则，规定哪些内容构成有效内容、指定评论的不同规则等等。问题如何减小此页面的大小？”

代码注释是开发者最好的朋友，但浏览器并不需要！移除 CSS (/* ... */)、HTML () 和 JavaScript (// ...) 评论可减少网页的总传输大小及其子资源。
一个“智能”CSS 压缩工具会注意到，我们使用定义 .awesome-container 规则，并收起两个声明而不影响其他任何样式，从而节省更多字节。大型一组 CSS 规则，移除这种冗余可能会积少成多，可以采取积极的方式，因为选择器通常是在不同上下文中（例如在媒体查询中）必然重复。
空格和制表符在 HTML、CSS 和 JavaScript 中方便开发者使用。一个额外的压缩工具可以去掉所有制表符和空格。与其他去重技术，此类优化将得到合理应用只要对该网页而言并不需要此类空格或制表符，例如，您可以保留多段内容中的空格，因为这样可确保用户阅读的内容清晰易读看到的内容

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

执行上述步骤后，网页字符数从 516 增加到 204，相当于节省了大约 60%的费用不得不说，它不太好读而不必为便于使用。现代开发实践让您可以保留格式正确、易于阅读的源代码版本与分发到生产环境的经过精心优化的代码区分开来。组合对象源映射 - 提供转换后的可读表示形式正式版代码可让您更轻松地排查生产环境中的错误，既能提供良好的开发者体验，又能出于为目的而优化性能影响用户体验

前面的示例说明了重要的一点：例如，用于压缩任意文本的压缩工具，在前面的示例中压缩网页，但它永远不知道删除注释、折叠 CSS 规则或数十种其他内容特定优化。正因如此，我们才会执行预处理、缩减大小以及非常重要。

同样，上述方法不仅仅局限于基于文本的技术，资源。图片、视频和其他内容类型都包含其各自的元数据和各种载荷。例如，每当您使用相机，其文件通常会嵌入很多额外信息：相机设置、位置等。这些数据可能至关重要，具体取决于您的应用（例如照片分享网站），也可能完全毫无用处。您应考虑是否值得将其移除实际上，这些元数据最多几万字节。

简而言之，作为优化资产效率的第一步，各种内容类型的清单，并考虑您可以应用针对特定内容的优化来减小其大小。之后 - 之后那么您就可以将这些优化措施添加到您的构建和发布步骤，以确保应用优化持续发布新版本。

利用压缩算法进行文本压缩

缩减基于文本的素材资源大小的下一步是应用压缩算法给它们。这又向前迈进了一步先在基于文本的载荷中搜索可重复的模式，然后再将其发送到并在到达用户浏览器后进行解压缩通过从而进一步大幅削减了这些资源，随后下载速度更快

gzip 和 Brotli 是常用的压缩算法，基于文本的资源：CSS、JavaScript、HTML。
所有现代浏览器都支持 gzip 和 Brotli 压缩在 Accept-Encoding HTTP 请求标头中同时支持这两种情况。
您的服务器必须配置为启用压缩功能。Web 服务器软件通常会使模块默认压缩基于文本的资源。
gzip 和 Brotli 都可以对 gzip 和 Brotli 进行微调，调整压缩级别。对于 gzip，压缩设置范围为 1 到 9，9 为最好。对于 Brotli，此范围为 0 至 11，其中 11 成为最好的。但是，压缩设置越高，需要的时间就越长。对于动态压缩的资源，也就是因此，取值范围中中间的设置往往能够提供最佳的权衡压缩比和速度之间的变化。不过，静态压缩也就是提前压缩响应，因此会对每个视频采用最激进的压缩设置压缩算法。
内容分发网络 (CDN) 通常提供自动压缩的内容，符合条件的资源CDN 还可以为这样您就减少了需要担心的压缩方面。

gzip 和 Brotli 是常用的压缩工具，字节。他们会在后台记住之前查看过的一些内容，并随后尝试在文件中查找和替换重复的数据片段一种高效的方式

在实践中，gzip 和 Brotli 在基于文本的内容上效果最好，压缩率高达 70-90%。但是，运行这些已使用其他算法压缩过的资源（例如与使用无损压缩或有损压缩技术的大多数图片格式一样，几乎没有改进。

所有现代浏览器都会在 Accept-Encoding HTTP 请求标头。但是由托管服务提供商确保网络服务器得到正确配置，压缩资源。

文件	算法	未经压缩的大小	压缩后的大小	压缩比
Angular-1.8.3.js	布罗特利	1,346 KiB	256 KiB	81%
Angular-1.8.3.js	gzip	1,346 KiB	329 KiB	76%
Angular-1.8.3.min.js	布罗特利	173 KiB	53 KiB	69%
Angular-1.8.3.min.js	gzip	173 KiB	60 KiB	65%
jquery-3.7.1.js	布罗特利	302 KiB	69 KiB	77%
jquery-3.7.1.js	gzip	302 KiB	83 KiB	73%
jquery-3.7.1.min.js	布罗特利	85 KiB	27 KiB	68%
jquery-3.7.1.min.js	gzip	85 KiB	30 KiB	65%
lodash-4.17.21.js	布罗特利	531 KiB	73 KiB	86%
lodash-4.17.21.js	gzip	531 KiB	94 KiB	82%
lodash-4.17.21.min.js	布罗特利	71 KiB	23 KiB	68%
lodash-4.17.21.min.js	gzip	71 KiB	25 KiB	65%

上表显示了 Brotli 和 gzip 压缩可节省的费用提供了几个众所周知的 JavaScript 库。节省的费用范围从 65% 到 86% 具体取决于文件和算法。为便于您参考 Brotli 和 gzip 的每个文件均应用了压缩级别。任何地方建议使用 Brotli，而非 gzip。

启用压缩是实现以下目标的最简单、最有效的优化之一：实施。如果您的网站没有加以利用，您将错失良机是您提升用户性能的绝佳机会。幸运的是，许多网络服务器提供的默认配置可实现这项重要的优化尤其是 CDN，可以非常有效地平衡压缩速度和比率。

要想快速了解压缩效果，请打开 Chrome 开发者工具，打开 Network 面板，加载您选择的页面，然后观察 “网络”面板

开发者工具显示实际大小与传输大小的对比情况。 — 传输大小（即压缩）的表示所有网页资源与其在网络中直观呈现的实际大小 Chrome 开发者工具的面板。

与上图一样，您应该会看到以下细分数据：

请求数，即为页面。
所有请求的传输大小。这反映了资源压缩。
所有请求的资源大小。该指标反映了相应网页在解压缩之后。

。 <ph type="x-smartling-placeholder">

对核心网页指标的影响

除非有能够反映效果的指标，否则无法衡量效果提升情况这些改进“核心网页指标”计划旨在建立并提升用户对可反映实际用户体验的指标的认知度。这与指标（例如简单的网页加载时间）不同无法明确地转化为用户体验质量。

当您将本指南中列出的优化措施应用于您网站上的资源时，对 Core Web Vitals 的影响可能会因资源而异和所涉及的指标。但在某些情况下应用这些优化可改进您网站的核心网页指标：

经过缩减和压缩的 HTML 资源可提高以及其子资源的可检测性，从而改进加载。这有助于网页的Largest Contentful Paint (LCP)。虽然 rel="preload" 等资源提示可用于影响但使用太多资源可能会导致带宽争用确保导航请求的 HTML 响应这样就能尽快发现其中的资源预加载扫描器。
通过使用压缩，某些 LCP 候选项也可以更快地加载。对于例如，LCP 候选 SVG 图像的资源加载缩短了时长。这不同于对其他映像类型进行的所有优化，通过其他压缩方法进行固有压缩，例如 JPEG 使用有损压缩
此外，文本节点也可以是 LCP 候选节点。如何运用这些技术取决于您是否对网页上的文字使用了网页字体，。如果您使用网页字体，则网页字体优化做法。不过，如果您使用的不是网页字体，而是使用系统字体，这类字体显示时不会产生任何资源加载持续时间，但 Google 会缩小和压缩 CSS 可缩短这一时长潜在 LCP 文本节点的出现时间可能会更早。

总结

如何优化基于文本资产的编码和传输是基准但这个概念具有很大的影响。确保尽一切可能确保资源符合缩减大小和压缩将从这些优化中获益。

更重要的是，确保这些流程是自动完成的。对于缩减大小，请使用捆绑器将缩减大小应用于符合条件的资源。确保您的网络服务器配置支持压缩，但除此之外，您还可以使用最有效的压缩。为了尽可能简单易懂使用 CDN 自动进行压缩但也可以非常快速地做到这一点

通过将这些基本的效果概念巩固到您网站的架构，您可以确保自己的性能优化工作并且后续优化可以奠定坚实的基础最佳做法。