本頁面由 Cloud Translation API 翻譯而成。

提供快速、輕量化的應用程式，讓您節省數據用量

Dave Gash

Ilya Grigorik

Jeremy Wagner

Save-Data 用戶端提示要求標題 Chrome、Opera 和 Yandex 瀏覽器提供的版本，讓開發人員為開發人員提供更快速的應用程式。

對輕量網頁的需求

Weblight 統計資料

大家都同意，如果網頁載入速度快、較輕，使用者就能更滿意提升內容的理解度和留存率轉換率和收益升幅Google 研究顯示「...最佳化網頁的載入速度比原始網頁快四倍，而且佔了 80% 減少位元組由於載入速度提升，我們也將網頁數量增加 50% 。」

雖然 2G 連線數最終還是拒絕， 2G 直到成為主流網路平台技術 2015 年。3G 和 4G 網路的滲透率和供應量持續攀升但相關的所有權成本和網路限制對數億名使用者造成重大影響

這些是網頁最佳化的重要論點。

有其他方法可以改善網站速度，而且無須直接開發人員互動性化資料，例如 Proxy 瀏覽器和轉碼服務。雖然如此這些服務都備受好評，但也有很大的缺點 (有時不接受) 圖片和文字壓縮，無法處理安全 (HTTPS) 網頁，只最佳化透過搜尋結果造訪的網頁；以及內容。這些服務廣受歡迎，就是網頁開發人員未能妥善因應使用者需求快速應用程式和頁面但實現這個目標相當複雜，

`Save-Data` 要求標頭

有一個相當直觀的技巧，就是使用 Save-Data 要求標頭。識別此標頭後，網頁就能自訂並提供最佳化的使用者體驗，同時兼顧成本和效能使用者。

支援的瀏覽器 (如下) 可讓使用者啟用 *數據節省模式，授權瀏覽器套用一組最佳化設定，以減少顯示網頁所需的資料量公開這項功能時，或瀏覽器可能會要求解析度較低的圖片，或將要求轉送到圖片與文字資源壓縮等與內容相關的最佳化作業

瀏覽器支援

Chrome 49 以上版本在使用者Save-Data 啟用「數據節省模式」選項，或是將「數據節省模式」擴充功能。
Opera 35 以上版本會在使用者啟用「Opera」時，宣傳 Save-Data 強化型」模式、或「節省數據流量」選項。
Yandex 16.2 以上版本在 Turbo 時宣傳 Save-Data 模式是在電腦或行動裝置上啟用瀏覽器。

正在偵測 `Save-Data` 設定

判斷何時應交付「光電」提供更良好的使用者體驗應用程式可以檢查 Save-Data 用戶端提示要求標頭。這個要求標頭指出用戶端對於資料用量降低的偏好：高傳輸成本、連線速度速度緩慢或其他原因。

當使用者在瀏覽器中啟用資料儲存模式時，瀏覽器會附加傳送至所有傳出要求 (HTTP 和 HTTPS) 的 Save-Data 要求標頭。截至本文撰寫時，瀏覽器在標頭中只通告一個 *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 和 Samsung 網路瀏覽器的 Chrome最低價格：如此一來，您只需檢查 navigator.connection.saveData 是否等於 true，您可以在該條件中實作任何資料儲存作業。

Chrome 開發人員工具中顯示的 Save-Data 標頭，以及
數據節省模式擴充功能。 — 在 Chrome 電腦版中啟用數據節省模式擴充功能。

如果您的應用程式使用服務工作站，檢查要求標頭並套用相關邏輯，以便改善體驗。或者，伺服器可在 Save-Data 要求標頭並傳回替代回應 - 不同標記、較小的圖片和影片等等

導入訣竅和最佳做法

使用 Save-Data 時，請提供支援此 API 的部分 UI 裝置，並允許使用者存取就能輕鬆切換體驗例如：
- 告知使用者系統支援 Save-Data，並鼓勵他們使用。
- 透過適當的提示，讓使用者識別和選擇模式，並直覺易用的「開啟/關閉」按鈕或核取方塊。
- 選取數據節省模式後，系統會公告並提供簡單明瞭的即可停用這些功能，並視需要改回完整版服務。
提醒您，輕量級應用程式不是數量較少的應用程式。他們沒有省略了重要功能或資料，只是更容易辨識需要付出成本和使用者體驗例如：
- 相片庫應用程式提供的預覽解析度可能會較低，或是小於包含大量程式碼的輪轉介面機制
- 搜尋應用程式一次可能傳回的結果較少，出現大量媒體的結果，或減少轉譯所需的依附元件數量該網頁。
- 新聞導向網站可能會顯示較少報導、省略較不熱門的類別、或提供較小的媒體預覽畫面
提供伺服器邏輯以檢查 Save-Data 要求標頭並考量瀏覽器啟用時，提供較精簡的網頁回應，例如減少所需的資源和依附元件數量，並採取更積極的做法資源壓縮等
- 如果您要根據 Save-Data 標頭提供替代回應，記得加到「Vary」清單「Vary: Save-Data」才能快取及提供這個版本具有Save-Data要求標頭。如需詳細資訊，請參閱最佳做法的與快取互動的部分。
如果您使用 Service Worker，應用程式可以偵測何時儲存資料這個選項會檢查是否存在 Save-Data 要求標頭或檢查 navigator.connection.saveData 的值資源。如果啟用，請考慮能否重新編寫要求以擷取減少的位元組數，或使用已擷取的回應。
建議搭配其他信號來擴大Save-Data，例如：使用者的連線類型和技術 (請參閱 NetInfo API)。舉例來說我們希望透過 2G 連線讓任何擁有 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 狀態，而且可從任何位置使用以及網頁上的樣式在這個機制中，我們來看看幾個例子我們如何使用它來限制傳送給使用者的資料量。

針對高解析度螢幕提供低解析度圖片

網路圖片的常見用途之一，就是以下列兩種方式提供圖片：一張「標準」圖片螢幕 (1x)，其他圖片的尺寸是兩倍大 (2x) 適用於高解析度螢幕 (例如Retina Display)。此高量類別解析度畫面不見得僅限於高階裝置，而且越來越常見應用程式速度較快最好將解析度較低的 (1 倍) 圖片傳送到而不是更大的 (2 倍) 變化版本。如要在 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 為。

當然，省略圖片不是唯一的辦法。你也可以對 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 資源 (包括然後檢查任何 HTML 程式碼元素會呼叫樣式表中的任何資源。如果發生啟用 Save-Data，則 Fira Sans 一律不會載入，因為已設定樣式的 DOM 一律不會載入呼叫該函式。系統會改為使用 one。沒有像 Fira Sans 那樣超讚，但可能適合想擴展數據傳輸資本的使用者

摘要

Save-Data 標頭沒有太多細微差異；可能處於開啟或關閉狀態依據基礎架構不論原因為何

舉例來說，部分使用者可能會因為即使連線品質不佳，也會導致應用程式內容或功能無法使用情境。相反地，某些使用者可能為了保持精簡最好讓應用程式假設使用者希望獲得除非有明確指示動作。

身為網站擁有者和網頁程式開發人員改善資料及費用受限的使用者體驗。

若要進一步瞭解 Save-Data 和絕佳的實務範例，請參閱協助使用者 Save Data。