このページは Cloud Translation API によって翻訳されました。

データの保存で高速かつ軽量なアプリケーションを提供

Dave Gash

Ilya Grigorik

Jeremy Wagner

Save-Data Client Hints リクエストヘッダー Chrome、Opera、Yandex の各ブラウザで使用可能です。これによりデベロッパーは、ブラウザでデータ保存モードを有効にしているユーザーには、より高速なアプリケーションが表示されます。

軽量版の必要性

Weblight の統計情報

ウェブページが軽くて読みやすいほどユーザーの満足度が高まることは、誰もが同意しているコンテンツの理解と定着を向上させ、コンバージョンと収益が増加します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 ヘッダーは、
データセーバー拡張機能。 — デスクトップ版 Chrome でデータセーバー拡張機能を有効にします。

アプリケーションでサービスワーカーでは、リクエストヘッダーを検査し、関連するロジックを適用してエクスペリエンスを最適化する。または、サーバーはアドバタイズされた設定を Save-Data リクエストヘッダーを返し、代替レスポンスを返します。より小さな画像や動画などです

導入のヒントとベストプラクティス

Save-Data を使用する場合は、それをサポートする UI デバイスをいくつか用意し、ユーザーが簡単に切り替えられますたとえば、次のような情報が得られます。
- 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 接続しても、データの保存に興味がないわけではありません。ローミング時などに課金されますさらにユーザーにさらに適応するための 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
}

この手法には間違いなく大きな効果があります。次の図をご覧ください。

重要でない画像の比較
Save-Data が存在しない場合に読み込まれる画像を比較して、同じ画像が除外されます。
Save-Data がある場合です。 — Save-Data の作成時に読み込まれる重要性の低い画像の比較保存データの取り込み時に同じ画像が省略されるのに対し、役立ちます。

もちろん、画像を省略できることだけが考えられるわけではありません。また 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。

データの保存で高速かつ軽量なアプリケーションを提供

軽量版の必要性

Save-Data リクエスト ヘッダー

ブラウザ サポート

Save-Data 設定の検出

導入のヒントとベスト プラクティス

レシピ

サーバーサイドのコードで Save-Data を確認