Save-Data
客户端提示请求
标题
支持 Chrome、Opera 和 Yandex 浏览器,这使开发者可以提供更轻量、
为在浏览器中选择启用流量节省模式的用户提供更快的应用。
对轻量级页面的需求
每个人都认为更快、更轻量的网页可以为用户提供更令人满意的内容 让用户能够更好地理解和留存内容 转化次数和收入的增加。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 标头以及
流量节省程序扩展程序。](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=9&hl=hu)
如果您的应用使用
工作器,它可以
检查请求标头并应用相关逻辑来优化体验。
或者,服务器可以在
Save-Data
请求标头并返回备用响应 — 与
标记、较小的图片和视频等。
植入提示和最佳做法
- 使用
Save-Data
时,请提供一些支持它的界面设备,并允许用户 以便在不同体验之间轻松切换例如:- 通知用户
Save-Data
受支持,并鼓励他们使用。 - 允许用户通过适当的提示识别和选择模式, 直观的开/关按钮或复选框。
- 选择流量节省模式时,应用通知并提供简单而明显的 停用该功能,并根据需要还原为完整体验。
- 通知用户
- 请记住,轻量级应用不是更小的应用。他们不
忽略重要的功能或数据,只是更能认识到
涉及成本和用户体验例如:
- 图库应用可能会提供较低分辨率的预览,或使用 这种机制
- 搜索应用每次返回的结果可能较少,请限制 或者减少呈现内容所需的依赖项数量 页面。
- 以新闻为主的网站可能会减少显示报道,并省略不太热门的类别, 或提供较小的媒体预览。
- 提供服务器逻辑,以检查是否存在
Save-Data
请求标头并考虑 在启用后提供更轻量的备用网页响应,例如 减少所需资源和依赖项的数量,更积极地应用 资源压缩等 <ph type="x-smartling-placeholder">- </ph>
- 如果您要根据
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 的情况下进行加载,而忽略同样的图像
保存数据。](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=9&hl=hu)
当然,省略图片并不是唯一的可能性。您还可以
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
。