此页面由 Cloud Translation API 翻译。

利用 Save-Data 交付快速的轻量级应用

Dave Gash

Ilya Grigorik

Jeremy Wagner

Save-Data 客户端提示请求标题支持 Chrome、Opera 和 Yandex 浏览器，这使开发者可以提供更轻量、为在浏览器中选择启用流量节省模式的用户提供更快的应用。

对轻量级页面的需求

Weblight 统计信息

每个人都认为更快、更轻量的网页可以为用户提供更令人满意的内容让用户能够更好地理解和留存内容转化次数和收入的增加。Google 研究表明， “...经过优化的网页加载速度比原始网页快 4 倍，更少字节。由于这类网页的加载速度提高了许多这些网页的流量增加”

而且，虽然 2G 连接的数量最终还是取决于拒绝， 2G 网络仍占据主导地位技术。3G 和 4G 网络的普及率和普及率在不断提高但相关的拥有成本和网络限制仍然是一个是影响数亿用户的重大因素。

这些都是有助于实现网页优化的有力理由。

可以通过其他方法提高网站速度，而无需直接开发者例如代理浏览器和转码服务。尽管如此，服务非常受欢迎，但存在很大的缺点 - 简单（有时不可接受）图片和文字压缩、无法处理安全 (HTTPS) 网页，仅优化通过搜索结果访问的网页；以及。这些服务的受欢迎程度，这本身表明开发者未能妥善满足用户对快速和轻量级的高需求应用和页面但要达到这个目标并不复杂

`Save-Data` 请求标头

有一种相当简单的技术就是让浏览器提供帮助，使用 Save-Data 请求标头。通过标识此标头，网页可以自定义并针对受成本和性能限制的情况提供优化的用户体验用户。

受支持的浏览器（见下文）允许用户启用 *流量节省模式，可让浏览器应用一系列优化措施呈现网页所需的数据量当提供此功能时，或者那么浏览器可能会请求较低分辨率的图片，或者通过应用了其他资源的服务针对特定内容的优化，例如图片和文本资源压缩。

浏览器支持

Chrome 49 及更高版本会在用户Save-Data 启用“流量节省程序” 或“流量节省程序”扩展程序。
当用户启用“Opera”时，Opera 35 及更高版本会通告 Save-Data Turbo”模式，或“节省数据流量”选项。
Yandex 16.2+ 在 Turbo 时通告 Save-Data 模式在桌面设备或移动设备上启用浏览器。

检测 `Save-Data` 设置

确定何时投放“浅色”打造卓越的用户体验，应用可以检查 Save-Data 客户端提示请求标头。这个请求标头，表明由于转移费用高、连接速度慢或其他原因。

当用户在浏览器中启用流量节省模式时，浏览器会附加所有传出请求（HTTP 和 HTTPS）的 Save-Data 请求标头。截止到撰写本文之时，浏览器仅会在标头中通告一个 *on- 令牌 (Save-Data: on)，但将来可能会扩展，以指明其他用户偏好设置。

此外，还可以检测 Save-Data 是否已在 JavaScript 中开启：

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

检查 navigator 中是否存在 connection 对象对象至关重要，因为它代表的是 Network Information API， Chrome 浏览器、Android 版 Chrome 浏览器以及三星互联网浏览器。出发地：您只需要检查 navigator.connection.saveData 是否等于 true，并且您可以在该条件下实现任何数据保存操作。

通过
Chrome 开发者工具中显示的 Save-Data 标头以及
流量节省程序扩展程序。 — 在桌面版 Chrome 中启用“流量节省程序”扩展程序。

如果您的应用使用工作器，它可以检查请求标头并应用相关逻辑来优化体验。或者，服务器可以在 Save-Data 请求标头并返回备用响应 — 与标记、较小的图片和视频等。

植入提示和最佳做法

使用 Save-Data 时，请提供一些支持它的界面设备，并允许用户以便在不同体验之间轻松切换例如：
- 通知用户Save-Data受支持，并鼓励他们使用。
- 允许用户通过适当的提示识别和选择模式，直观的开/关按钮或复选框。
- 选择流量节省模式时，应用通知并提供简单而明显的停用该功能，并根据需要还原为完整体验。
请记住，轻量级应用不是更小的应用。他们不忽略重要的功能或数据，只是更能认识到涉及成本和用户体验例如：
- 图库应用可能会提供较低分辨率的预览，或使用这种机制
- 搜索应用每次返回的结果可能较少，请限制或者减少呈现内容所需的依赖项数量页面。
- 以新闻为主的网站可能会减少显示报道，并省略不太热门的类别，或提供较小的媒体预览。
提供服务器逻辑，以检查是否存在 Save-Data 请求标头并考虑在启用后提供更轻量的备用网页响应，例如减少所需资源和依赖项的数量，更积极地应用资源压缩等 <ph type="x-smartling-placeholder">
- 如果您要根据 Save-Data 标头提供备用响应，记得将其添加到 Vary 列表 Vary: Save-Data 中，应缓存和提供此版本的存在 Save-Data 请求标头。如需了解详情，请参阅最佳实践用于与缓存交互
如果您使用 Service Worker，则您的应用可以检测到数据保存时间选项，通过检查是否存在 Save-Data 请求来启用标头，或检查 navigator.connection.saveData 的值属性。如果已启用，请考虑您能否重新编写用于提取的请求减少字节数，或使用已提取的响应。
不妨考虑使用其他信号来增强 Save-Data，例如：用户的连接类型和技术（请参阅 NetInfo， API）。例如，您可以希望为使用 2G 连接的所有用户提供轻量级体验， Save-Data未启用。相反，仅仅因为用户的网络速度“最快”4G 网络并不意味着他们不想节约流量，例如在漫游时此外，您还可以增强将 Save-Data 替换为 Device-Memory 客户端提示，以进一步适应内存有限的设备用户设备内存也会在 navigator.deviceMemory 客户端提示。

食谱

通过 Save-Data 能实现的目标仅限于您能想出的为了让大家了解可能发生的情况，我们先来演示几个用例，案例在阅读本文时，您可能会想出自己的其他用例，您可以大胆尝试，看看能获得怎样的效果！

检查服务器端代码中的 `Save-Data`

虽然Save-Data状态是您可以在 JavaScript 中通过 navigator.connection.saveData 属性，在服务器端检测此属性为有时更合适JavaScript 在某些情况下可能无法执行。此外，服务器端检测是将标记在发送到该客户端参与了 Save-Data 的一些最有利的用例。

检测服务器端代码中的 Save-Data 标头的具体语法取决于所使用的语言，但基本思路应该与任何应用后端。例如，在 PHP 中，请求标头存储在 $_SERVER 个超级全球索引上的数组从 HTTP_ 开始。这意味着，您可以通过以下方式检测 Save-Data 标头：检查 $_SERVER["HTTP_SAVE_DATA"] 变量是否存在及其值如下所示：

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

如果您在向客户端发送任何标记之前放置此检查，则 $saveData 变量将包含 Save-Data 状态，并且可。通过对这种机制进行说明，我们来看几个示例，我们如何使用它来限制我们向用户发送的数据量。

为高分辨率屏幕提供低分辨率图片

Web 上的图片的常见用例是将图片以两组的形式提供： 1 张“标准”图片以及另一张两倍大的图片 (2x) 适用于高分辨率屏幕（例如Retina Display）。这类高并不一定只限于高端设备越来越普遍轻量级应用体验为此类设备发送低分辨率 (1x) 图片可能比较明智而非更大 (2x) 变体。为了实现这一点，在 Save-Data 标头，因此我们只需修改发送给客户端的标记即可：

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

这个应用场景完美诠释了为适应需求而付出的精力专门要求您减少向他们发送数据的人。如果您不喜欢修改标记，也可以实现相同的效果，网址重写模块（例如 Apache 的 mod_rewrite。那里都是关于如何实现这个和配置相对较少

您也可以通过以下方式将此概念扩展到 CSS background-image 属性：只需向 <html> 元素添加一个类即可：

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

在这里，您可以将 save-data 类定位到 <html> 元素的用于更改图片传送方式的 CSS。您可以发送低分辨率的背景如上述 HTML 示例所示，将图片发送到高分辨率屏幕，也可省略特定资源

忽略非必要的图像

网络上的某些图片内容根本就不是必需内容。虽然此类图像只是为了给内容锦上添花，而那些充分利用按流量计费的流量套餐。在最简单的 Save-Data 的用例，我们可以使用之前的 PHP 检测代码，并省略所有非必需的图片标记：

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

这种方法肯定会产生很明显的效果，如如下图所示：

非关键图像比较
在缺少 Save-Data 的情况下进行加载，而忽略同样的图像
保存数据。 — 使用“Save-Data”时加载的非关键图像的比较而保存数据后，系统会省略相同的图像。

当然，省略图片并不是唯一的可能性。您还可以 Save-Data，放弃发送其他非关键资源，例如特定资源，字体。

省略非必需的网页字体

虽然网页字体在给定网页字体中的占比通常不会但它们仍然很受欢迎用户不消耗微不足道的数据。此外，浏览器获取和渲染字体的方式可能会涉及多种概念， FOIT、 FOUT 和浏览器启发式算法，让渲染过程变得细致入微。

那么您可能需要排除非必需网页字体。Save-Data将此设为

例如，假设您添加了 Fira Google 的 Sans 网站上的字体。Fira Sans 是一个非常棒的身体复制字体，但对于尝试保存数据的用户而言，可能并不是那么重要。通过将将 save-data 类添加到 <html> 元素（当 Save-Data 标头是目前，我们可以编写调用非基本字体的样式，，但当 Save-Data 标头出现时，系统会停用此属性：

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

使用此方法，您可以将 Google Fonts 中的 <link> 代码段保留在因为浏览器会推测性加载 CSS 资源字体），首先对 DOM 应用样式，然后检查 HTML 代码中是否有元素会调用样式表中的任何资源。如果某人当 Save-Data 处于开启状态时，Fira Sans 绝不会加载，因为样式化 DOM 永远不会加载调用它。而 Arial 则会开始发挥作用。不如 Fira Sans 好，可能比那些尝试延长数据计划的用户更可取

摘要

Save-Data 头文件没有太多细微差别；可以开启或关闭，应用应负责根据不同的原则无论原因为何

例如，有些用户怀疑存在流量节省模式时可能不允许使用流量节省模式将失去应用内容或功能，即使在网络连接状况不佳的情况下也是如此情况。反过来，有些用户理所当然地可能会启用此功能网页应尽可能精简、简明扼要。您的应用最好假定用户想要完整无限制的直到用户明确表明另有声明，操作。

作为网站所有者和网站开发者，我们的内容，为那些受限于数据流量和费用的用户改善用户体验。

要详细了解 Save-Data 和出色的实际示例，请参阅帮助用户：Save Data。