Save-Data
Client Hints リクエスト
ヘッダー
Chrome、Opera、Yandex の各ブラウザで使用可能です。これによりデベロッパーは、
ブラウザでデータ保存モードを有効にしているユーザーには、より高速なアプリケーションが表示されます。
軽量版の必要性
ウェブページが軽くて読みやすいほどユーザーの満足度が高まることは、誰もが同意している コンテンツの理解と定着を向上させ、 コンバージョンと収益が増加しますGoogle 研究によると、 「...最適化されたページの読み込みは元のページの 4 倍速く、残りの 80% は それよりも少ないバイト数ですページの読み込みがはるかに速くなったため 確認できます
また、2G 接続の数は最終的には 不承認 2G は依然として主要なネットワークである テクノロジー 2015 年に発表されました3G と 4G ネットワークの浸透と利用可能性は高まっている 関連する所有コストとネットワークの制約は依然として 何億人ものユーザーにとって重要な要素です。
これらはページの最適化に関する説得力のある引数です。
直接のデベロッパーなしでサイトの速度を向上させる別の方法がある ブラウザやコード変換サービスなどが関与している必要があります。このようなことは 非常に人気があり、大きな欠点があります。 画像とテキストの圧縮(場合によっては許容されないこともある)、 保護されている(HTTPS)ページ、検索結果経由でアクセスしたページのみを最適化する、 できます。こうしたサービスの人気の高さ自体が、 多くの開発者が、高速かつ軽量な通信に対するユーザーの需要に適切に 制限します。しかし、その目標を達成するのは難しく、 困難です。
Save-Data
リクエスト ヘッダー
非常にわかりやすい手法として、
Save-Data
リクエスト ヘッダー。このヘッダーを特定することで
費用とパフォーマンスの制約があるお客様に
最適化されたユーザーエクスペリエンスを提供できます
できます。
サポートされているブラウザ(下記)では、ユーザーは *データ節約モードを有効にしたり、 ブラウザに対して一連の最適化を適用する権限を ページのレンダリングに必要なデータ量この機能が公開される場合 ブラウザが低解像度の画像をリクエストしたり、 適用するサービスを介してリクエストをルーティングしたり コンテンツ固有の最適化(画像やテキストリソースの圧縮など)を行います。
ブラウザ サポート
- Chrome 49 以降: ユーザーが次の場合に
Save-Data
をアドバタイズします。 [データセーバー] がオンになります [データセーバー] オプションを選択して拡張機能を使用できます。 - Opera 35 以降では、ユーザーが「Opera」を有効にすると
Save-Data
と広告が表示され Turbo」設定するには、 または「データ削減」オプション 使用できます。 - Yandex 16.2 以降では、Turbo の場合、
Save-Data
がアドバタイズされます。 モードです パソコンやモバイルで有効に ブラウザ。
Save-Data
設定の検出
「光」を配信すべきタイミングを判断するためユーザー エクスペリエンスの向上、
アプリケーションが Save-Data
Client Hints リクエスト ヘッダーをチェックできます。この
リクエスト ヘッダーは、
転送費用が高い、接続速度が遅いなど、さまざまな原因が考えられます。
ユーザーがブラウザでデータ節約モードを有効にすると、ブラウザは
すべての送信リクエスト(HTTP と HTTPS の両方)に対する Save-Data
リクエスト ヘッダー。
このドキュメントの作成時点で、ブラウザはヘッダーで 1 つの *on- トークンのみをアドバタイズします。
(Save-Data: on
)。ただし、他のユーザーを示すために、今後この範囲が拡張される可能性があります。
設定。
また、JavaScript で Save-Data
がオンになっているかどうかを検出することもできます。
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
navigator
内に connection
オブジェクトが存在するかどうかを確認する
このオブジェクトは、Network Information API を表すため重要です。これは、
Chrome、Android 版 Chrome、Samsung のインターネット ブラウザに実装されています。最低料金
ここでは、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=0000&hl=ja)
アプリケーションでサービス
ワーカーでは、
リクエスト ヘッダーを検査し、関連するロジックを適用してエクスペリエンスを最適化する。
または、サーバーはアドバタイズされた設定を
Save-Data
リクエスト ヘッダーを返し、代替レスポンスを返します。
より小さな画像や動画などです
導入のヒントとベスト プラクティス
Save-Data
を使用する場合は、それをサポートする UI デバイスをいくつか用意し、ユーザーが 簡単に切り替えられますたとえば、次のような情報が得られます。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 接続しても、データの保存に興味がないわけではありません。 ローミング時などに 課金されますさらに ユーザーにさらに適応するためのDevice-Memory
クライアント ヒントを指定したSave-Data
メモリが少ないデバイスにも適していますユーザー デバイスのメモリは、Cloud KMS 鍵と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
状態が含まれ、
表示されます。このメカニズムを図解し、クラウド コンピューティングの
ユーザーに送信するデータの量を制限できるか
見てみましょう
高解像度画面に低解像度の画像を配信する
ウェブ上の画像の一般的な使用例として、次の 2 つのセットで画像を提供することがあります。
「標準」の画像 1 枚(1 倍)、2 倍の大きさの画像
高解像度の画面(例:Retina
ディスプレイ)。この種の高レベル
画面解像度がハイエンド デバイスに限られるわけではなく、
ますます一般的になりつつありますアプリケーション エクスペリエンスの軽量化が
低解像度(1 倍)の画像をこれらの宛先に送信することをおすすめします。
画面のサイズを小さくします。これを実現するには、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
}
このユースケースは、わずかな労力で
送信するデータを減らすよう特に要求されている。気に入らない場合
バックエンドでマークアップを修正しても、同じ結果を得ることができます。
URL 書き換えモジュール(Apache の
mod_rewrite
。そこで、
ビジネス チャンスを
これを
比較的少ない構成で済みます。
次のようにして、このコンセプトを CSS background-image
プロパティに拡張することもできます。
<html>
要素にクラスを追加するだけです。
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
ここから、save-data
クラスを <html>
要素の
画像の配信方法を変更する CSS です。低解像度の背景を送信できる
高解像度の画面に配置するか、
完全に制御できます。
必須ではない画像を省略する
ウェブ上の画像コンテンツの中には、必須ではないものもあります。このような画像は
コンテンツ以外には好ましくないコンテンツがある場合、
従量制のデータプランから
可能な限りすべてを絞り込めます次のうち、最もシンプルなものは
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
}
この手法には間違いなく大きな効果があります。 次の図をご覧ください。
<ph type="x-smartling-placeholder">![重要でない画像の比較
Save-Data が存在しない場合に読み込まれる画像を比較して、同じ画像が除外されます。
Save-Data がある場合です。](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=0000&hl=ja)
もちろん、画像を省略できることだけが考えられるわけではありません。また
Save-Data
: 特定のリソースやリソースなど、重要でない他のリソースの送信を
書体
必須ではないウェブフォントを省略する
通常、ウェブフォントはページ全体のほとんどを占めることはありませんが、 ペイロードを使用することもありますが、現在でも広く利用されています。消費額は 少なからず できます さらに、ブラウザがフォントを取得してレンダリングする方法は、 さまざまなコンセプトを使って、 FOIT FOUT、ブラウザ 微妙な操作のレンダリングを行う ヒューリスティック技術です
そのような場合は、必要のないウェブ サイトを
シンプルなユーザー エクスペリエンスを実現します。Save-Data
ではこれを
それほど苦痛を与えない作業です
たとえば、広告主の URL に Fira
Sans(Google)
サイトのフォント。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
をオンにすると、スタイル化された DOM は読み込まれないため、Fira Sans は読み込まれません。
それを呼び出します。代わりに Arial が有効になります。Fira Sans ほどではありませんが
データプランを伸ばそうとしているユーザーには向いているかもしれません。
概要
Save-Data
ヘッダーはあまり意味がありません。オン、オフのいずれかです。
アプリケーションには、アプリケーション、システム、
その設定が適用されます。
たとえば、データ節約モードを使用している疑いがある場合、ユーザーがそのモードを許可しない可能性があります。 接続が不安定であってもアプリのコンテンツや機能が失われる できます。逆に、一部のユーザーは、保存のために できる限り小さくシンプルにすることです。 アプリは、ユーザーがフル機能かつ無制限の ユーザーが明示的に指示を出すまで、 できます。
サイト所有者およびウェブ デベロッパーは、Google Chat で Google のコンテンツを改善することで、データとコストに制約のあるユーザーのエクスペリエンスを改善できます。
Save-Data
の詳細と実用的な例については、
ユーザー Save Data
。