Save-Data
用戶端提示要求
標題
Chrome、Opera 和 Yandex 瀏覽器提供的版本,讓開發人員為開發人員提供
更快速的應用程式。
對輕量網頁的需求
大家都同意,如果網頁載入速度快、較輕,使用者就能更滿意 提升內容的理解度和留存率 轉換率和收益升幅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 標頭,以及
數據節省模式擴充功能。](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=5&hl=zh-tw)
如果您的應用程式使用服務
工作站,
檢查要求標頭並套用相關邏輯,以便改善體驗。
或者,伺服器可在
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 時載入,而那些省略相同的圖像
。](https://web.developers.google.cn/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=5&hl=zh-tw)
當然,省略圖片不是唯一的辦法。你也可以對
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
。