Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

輕量網頁的必要性

Weblight 統計資料

大家都同意，網頁速度越快、越輕巧，使用者體驗就越好，內容理解和記憶程度也越高，轉換次數和收益也會增加。Google 研究顯示，「…最佳化處理的網頁，其載入速度比原始網頁快了 4 倍，所用的位元組容量更大幅減少了 80%。由於載入速度提升，這些網頁的流量也提高了 50%。

雖然 2G 連線數量終於開始減少，但 2015 年仍以 2G 為主要網路技術。3G 和 4G 網路的普及率和可用性迅速成長，但相關擁有權成本和網路限制，對數億使用者來說仍是重要因素。

這些都是網頁最佳化的有力論據。

您也可以使用其他方法提升網站速度，不需直接請開發人員介入，例如使用 Proxy 瀏覽器和轉碼服務。雖然這類服務相當熱門，但缺點也不少，例如圖片和文字壓縮程度簡單 (有時甚至無法接受)、無法處理安全 (HTTPS) 網頁、只能最佳化透過搜尋結果造訪的網頁等等。這些服務之所以廣受歡迎，本身就代表網頁開發人員並未妥善滿足使用者對快速輕巧應用程式和網頁的高需求。但要達成這個目標，過程複雜且有時相當困難。

`Save-Data` 要求標頭

其中一個相當簡單的技巧是使用 Save-Data 要求標頭，讓瀏覽器提供協助。網頁可藉由識別這個標頭，為費用和成效受限的使用者提供最佳化的使用者體驗。

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

瀏覽器支援

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

偵測 `Save-Data` 設定

如要判斷何時為使用者提供「輕量」體驗，應用程式可以檢查 Save-Data 用戶端提示要求標頭。這個要求標頭表示用戶端偏好減少數據用量，原因可能是傳輸費用高昂、連線速度緩慢或其他因素。

使用者在瀏覽器中啟用省流量模式後，瀏覽器會將 Save-Data 要求標頭附加至所有外送要求 (包括 HTTP 和 HTTPS)。截至本文撰寫時，瀏覽器只會在標頭中宣傳一個 *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，而這項 API 只會在 Chrome、Android 版 Google Chrome 和 Samsung Internet 瀏覽器中實作。接著，您只需要檢查 navigator.connection.saveData 是否等於 true，即可在該條件中實作任何資料儲存作業。

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

如果應用程式使用服務工作人員，可以檢查要求標頭並套用相關邏輯，進而提升使用者體驗。或者，伺服器可以在 Save-Data 要求標頭中尋找廣告宣傳的偏好設定，並傳回替代回應，例如不同的標記、較小的圖片和影片等。

導入訣竅和最佳做法

使用 Save-Data 時，請提供支援該功能的 UI 裝置，並讓使用者輕鬆切換體驗。例如：
- 通知使用者系統支援 Save-Data，並鼓勵他們使用。
- 讓使用者透過適當的提示和直覺式的開啟/關閉按鈕或核取方塊，識別及選擇模式。
- 選取數據節省模式時，請公告並提供簡單明瞭的方式來停用這項模式，並視需要還原完整體驗。
請記住，輕量型應用程式並非較差的應用程式。這些行銷人不會省略重要功能或資料，只是更瞭解相關成本和使用者體驗。例如：
- 相片庫應用程式可能會提供較低解析度的預覽畫面，或使用程式碼較少的輪播機制。
- 搜尋應用程式一次傳回的結果可能較少、限制多媒體內容豐富的結果數量，或減少顯示網頁所需的依附元件數量。
- 新聞網站可能會減少顯示報導、省略較不受歡迎的類別，或提供較小的媒體預覽畫面。
提供伺服器邏輯，檢查 Save-Data 要求標頭，並考慮在啟用時提供替代的輕量版網頁回應，例如減少必要資源和依附元件的數量、套用更積極的資源壓縮等。
- 如果根據 Save-Data 標頭提供替代回應，請務必將該標頭新增至 Vary 清單 (Vary: Save-Data)，告知上游快取，只有在出現 Save-Data 要求標頭時，才應快取及提供這個版本。詳情請參閱「與快取互動的最佳做法」。
如果您使用 Service Worker，應用程式可以檢查 Save-Data 要求標頭是否存在，或檢查 navigator.connection.saveData 屬性的值，偵測資料節省選項是否已啟用。如果啟用這項功能，請考慮是否可以重新編寫要求，以擷取較少的位元組，或使用已擷取的回應。
建議您使用其他信號來擴增 Save-Data，例如使用者連線類型和技術的相關資訊 (請參閱 NetInfo API)。舉例來說，即使未啟用 Save-Data，您可能還是想為使用 2G 連線的任何使用者提供輕量版體驗。反之，即使使用者連上「快速」的 4G 網路，也不代表他們不想節省數據用量，例如在漫遊時。此外，您也可以使用 Device-Memory 用戶端提示，進一步配合記憶體容量有限的裝置，擴增 Save-Data 的存在。使用者裝置記憶體也會在navigator.deviceMemory用戶端提示中宣傳。

食譜

Save-Data 的用途取決於您的想像力。為協助您瞭解可執行的操作，我們將介紹幾個應用情境。閱讀本文時，您可能會想到其他用途，歡迎盡情實驗，看看有哪些可能性！

檢查伺服器端程式碼中的 `Save-Data`

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

在伺服器端程式碼中偵測 Save-Data 標頭的特定語法取決於所用語言，但任何應用程式後端的概念應該都相同。舉例來說，在 PHP 中，要求標頭會儲存在以 HTTP_ 開頭的索引，位於 $_SERVER 超全域陣列中。也就是說，您可以檢查 $_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)，另一組則適用於高解析度螢幕 (例如 Retina 螢幕)，大小是前者的兩倍 (2x)。這類高解析度螢幕不一定只會出現在高階裝置，而且越來越常見。如果偏好較輕量的應用程式體驗，建議傳送較低解析度 (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; ?>">

您可以在 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 採取行動，放棄傳送其他非重要資源，例如特定字體。

省略不必要的網頁字型

雖然網頁字型通常不會像圖片一樣，佔用特定網頁的大部分總酬載，但仍相當受歡迎。也不會耗用大量資料。此外，瀏覽器擷取及算繪字型的方式比您想像的更複雜，其中包含 FOIT、FOUT 和瀏覽器啟發式等概念，因此算繪作業相當細緻。

因此，如果使用者想要更精簡的使用體驗，您可能會想省略非必要的網路字型。Save-Data 讓這項作業變得相當輕鬆。

舉例來說，假設您在網站上加入了 Google 字型的 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 樣式表中的任何資源，藉此推測載入 CSS 資源 (包括網頁字型)。如果有人剛好使用 Save-Data，Fira Sans 就不會載入，因為樣式化的 DOM 不會叫用該字型。系統會改用 Arial。雖然不如 Fira Sans 漂亮，但對於想節省數據用量的使用者來說，這或許是更好的選擇。

摘要

Save-Data 標頭沒有太多細微差異，只有開啟或關閉兩種狀態，且無論原因為何，應用程式都必須根據設定提供適當體驗。

舉例來說，即使連線品質不佳，部分使用者仍可能不允許使用節省數據模式，以免應用程式內容或功能遺失。反之，部分使用者可能會一律啟用這項功能，盡可能縮小網頁大小並簡化網頁，即使連線狀況良好也不例外。在使用者明確採取行動前，應用程式最好假設使用者想要完整且不受限制的體驗。

身為網站擁有者和網頁開發人員，我們有責任管理內容，為資料和費用受限的使用者提升體驗。

如要進一步瞭解 Save-Data，以及查看實用範例，請參閱「協助使用者Save Data」。