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

戴夫加什
Dave Gash
伊利亞 (Ilya Grigorik)
Ilya Grigorik
X 首頁
傑瑞米.瓦格納 (Jeremy Wagner)

Chrome、Opera 和 Yandex 瀏覽器提供的 Save-Data 用戶端提示要求標頭可讓開發人員為選擇在瀏覽器中啟用數據節省模式的使用者，提供速度更快的應用程式。

網頁的重要性

Weblight 統計資料

大家都一致認同，更快、更淺的網頁能讓使用者享有更滿意的使用者體驗、更佳的內容理解和留存率，以及提高轉換和收益。Google 研究指出，「...最佳化的網頁載入速度比原始網頁快四倍，使用的位元組數也減少了 80%，由於載入速度提升，這些網頁的流量也增加了 50%。」

雖然 2G 連線的數量最後是落惡的，但 2G 在 2015 年仍是最重要的網路技術。雖然 3G 和 4G 網路的普及率和可用性正迅速攀升，但相關的擁有權成本和網路限制仍然是數億名使用者的重要因素。

這些是可用於網頁最佳化的強大論點。

還有其他方法可在開發人員未直接介入的情況下，改善網站速度，例如 Proxy 瀏覽器和轉碼服務。這類服務相當受歡迎，但有很大的缺點，包括簡單 (有時是無法接受) 的圖片與文字壓縮、無法處理安全 (HTTPS) 網頁、只最佳化透過搜尋結果造訪的網頁等等。這些服務的最受歡迎指標本身就是一個指標，代表網頁開發人員未能妥善解決快速及輕量應用程式與頁面的大量使用者需求。但要達成這個目標 是一個複雜且有時難以達成的目標

Save-Data 要求標頭

有一個相當直接的技術，就是讓瀏覽器使用 Save-Data 要求標頭來提供協助。只要識別這個標頭，網頁就能自訂並提供最佳化的使用者體驗，滿足成本和效能方面的限制。

支援的瀏覽器 (如下所述) 可讓使用者啟用 *數據節省模式，授權瀏覽器套用一組最佳化設定，以減少轉譯頁面所需的資料量。公開或宣傳這項功能時，瀏覽器可能會要求解析度較低的圖片、延遲載入部分資源，或透過套用其他內容專屬最佳化功能 (例如圖片和文字資源壓縮) 的服務轉送要求。

瀏覽器支援

  • 如果使用者在行動裝置上啟用「數據節省模式」選項，或在電腦版瀏覽器啟用「Data Saver」擴充功能，Chrome 49 以上版本就會宣傳 Save-Data。
  • Opera 35 以上版本會在使用者在電腦上啟用「OperaTurbo」模式或在 Android 瀏覽器中啟用「節省數據用量」選項時，宣傳 Save-Data。
  • 在電腦或行動瀏覽器啟用Turbo 模式時，Yandex 16.2 以上版本會通告 Save-Data。

偵測 Save-Data 設定

如要判斷何時向使用者提供「輕量」體驗，應用程式可以檢查 Save-Data 用戶端提示要求標頭。這個要求標頭指出用戶端因為傳輸費用高、連線速度較慢或其他原因，而降低資料用量的偏好。

當使用者在瀏覽器中啟用資料儲存模式時，瀏覽器會在所有傳出要求 (HTTP 和 HTTPS) 中附加 Save-Data 要求標頭。截至本文撰寫時，瀏覽器只會在標頭 (Save-Data: on) 中通告一個「on」符記，但日後可能會進一步擴大，表示其他使用者偏好的設定。

此外，您也可以偵測 JavaScript 是否已開啟 Save-Data：

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

檢查 navigator 物件內是否存在 connection 物件非常重要，因為這代表 Network Information API，這種 API 僅適用於 Chrome、Chrome for Android 和 Samsung 網際網路瀏覽器。因此，您只需檢查 navigator.connection.saveData 是否等於 true，即可在該條件中實作任何資料儲存作業。

Chrome 開發人員工具中顯示的 Save-Data 標頭，與 Data Saver 擴充功能一併顯示。
在 Chrome 電腦版中啟用 Data Saver 擴充功能。

如果應用程式使用服務工作站，就可以檢查要求標頭並套用相關邏輯，將體驗最佳化。或者，伺服器可以在 Save-Data 要求標頭中尋找通告的偏好設定，並傳回替代回應，包括不同的標記、較小的圖片和影片等。

導入提示和最佳做法

  1. 使用 Save-Data 時，請提供部分支援的 UI 裝置，並讓使用者輕鬆切換體驗。例如：
    • 通知使用者，並鼓勵他們使用 Save-Data。
    • 透過適當提示和直覺式的開啟/關閉按鈕或核取方塊，讓使用者識別並選擇所需模式。
    • When data saving mode is selected, announce and provide an easy and obvious way to disable it and revert back to the full experience if desired.
  2. 請記住，輕量型應用程式並不是比較小的應用程式。它們不會省略重要功能或資料，而是更瞭解牽涉到的費用和使用者體驗。例如：
    • 相片庫應用程式可能會提供解析度較低的預覽，或使用較少程式碼的輪轉介面機制。
    • 搜尋應用程式一次可能會傳回較少的結果、限制含有媒體內容的結果，或減少轉譯頁面所需的依附元件數量。
    • 新聞導向網站可能會顯示較少報導、省略較不熱門的類別，或提供較小的媒體預覽。
  3. 提供伺服器邏輯來檢查 Save-Data 要求標頭，並在啟用時提供較精簡的替代頁面回應，例如減少所需資源和依附元件的數量，以及套用更積極的資源壓縮等。
    • 如果您根據 Save-Data 標頭提供替代回應，請記得將其新增至 Vary 清單 (Vary: Save-Data)，告訴上游快取只有在 Save-Data 要求標頭存在時，才會快取並提供這個版本。詳情請參閱與快取互動的最佳做法。
  4. 如果您使用 Service Worker，應用程式可以檢查 Save-Data 要求標頭是否存在，或檢查 navigator.connection.saveData 屬性的值，藉此偵測已啟用資料儲存選項的時機。啟用後，請考慮您是否能重寫要求來擷取較少的位元組，或使用已經擷取的回應。
  5. 建議您使用其他信號 (例如使用者連線類型與技術資訊) 來擴充 Save-Data (請參閱 NetInfo API)。舉例來說，即使未啟用 Save-Data，您可能仍想為使用 2G 連線的任何使用者提供輕量體驗。相反地，即使使用者是透過「快速」的 4G 連線，並不表示他們不想儲存資料 (例如漫遊時)。此外，您也可以使用 Device-Memory 用戶端提示，擴大 Save-Data 的存在，進一步配合記憶體有限的裝置使用者。使用者裝置記憶體也會顯示在 navigator.deviceMemory 用戶端提示中。

套件

透過 Save-Data 實現的目標只是您可以實現自己的目標。為了讓您瞭解有哪些可能，讓我們來看看幾個應用實例。您可能會在閱讀本文時，想出其他個人用途，因此不妨試著做實驗，看看會有哪些做法！

正在伺服器端程式碼檢查 Save-Data

雖然 Save-Data 狀態可透過 navigator.connection.saveData 屬性在 JavaScript 中偵測，但有時候最好在伺服器端進行偵測。在某些情況下，JavaScript 可能無法執行。除此之外，伺服器端偵測功能是唯一在將標記傳送至用戶端「之前」修改標記的方法，而在部分 Save-Data 最有益的用途中。

偵測伺服器端程式碼中 Save-Data 標頭的特定語法取決於使用的語言，但對於任何應用程式後端而言，基本概念都應相同。例如在 PHP 中，要求標頭會儲存在 $_SERVER Superglobal 陣列中，開頭為 HTTP_ 的索引。這表示您可以檢查 $_SERVER["HTTP_SAVE_DATA"] 變數的存在性和值，藉此偵測 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)，另一種是高解析度圖片 (例如 2 倍) 的圖片。Retina 螢幕)。這類高解析度螢幕不一定僅限高階裝置，而且即將越來越普遍。如果偏好較輕而的應用程式體驗，則可放心將解析度較低的 (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) 達到相同的結果。您可以參考這些示例，瞭解如何使用相對很少的設定完成這項操作。

您也可以在 <html> 元素中新增類別，將這個概念擴充至 CSS background-image 屬性：

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

您可以在這裡針對 CSS 中的 <html> 元素指定 save-data 類別，變更圖片的傳送方式。您可以將低解析度的背景圖片傳送至高解析度螢幕 (如上述 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 執行操作，開始傳送其他非重要資源，例如特定字體。

省略非必要的網路字型

雖然網頁字型通常不像圖片一樣，佔了特定網頁的總酬載，但它們仍相當受歡迎。也不會耗用大量資料。此外，瀏覽器擷取和轉譯字型的方式比您想像中的還要複雜，FOIT、FOUT 和瀏覽器經驗法則等概念，就是要進行細微的作業。

這樣一來，對於想要更精簡的使用者體驗來說，您最好省略非必要的網頁字型。Save-Data 讓操作不費吹灰之力。

舉例來說，假設您在網站上加入 Google Fonts 中的 Fira Sans。Fira Sans 是很好的內文字型 但對使用者來說，儲存資料可能不太重要。只要在有 Save-Data 標頭時，將 save-data 的類別新增至 <html> 元素，我們就能撰寫樣式，先叫用非重要字體，但在具有 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> 程式碼片段，因為瀏覽器會先將樣式套用至 DOM，然後檢查是否有任何 HTML 元素叫用樣式表中的任一資源，藉此推測 CSS 資源 (包括網頁字型)。如果某個人啟用 Save-Data，則 Fira Sans 永遠不會載入，因為樣式化的 DOM 絕對不會叫用。反之儘管不像 Fira Sans 一樣好，但是他們可能更適合嘗試擴充數據方案的使用者。

摘要

Save-Data 標頭並沒有太大的細微差異；無論是否開啟這項功能，應用程式都可免除根據其設定提供適當體驗的負擔 (無論原因為何)。

舉例來說，部分使用者若認為應用程式內容或功能可能會遺失，即使連線品質不佳，系統可能也不會允許資料節省模式。反過來說，有些使用者甚至會啟用此功能，即使在良好的連線狀態下，也能盡量縮小網頁。建議您讓應用程式假設使用者想要完整且無限制的體驗，直到您透過明確的使用者動作提供明確指示為止。

我們建議網站擁有者和網頁程式開發人員負責管理內容，為資料和費用受限的使用者改善使用者體驗。

如果想進一步瞭解 Save-Data 和出色的實務範例，請參閱「協助使用者 Save Data」一文。