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

最佳化文字型素材資源的編碼和傳輸大小

Ilya Grigorik

Jeremy Wagner

除了排除不必要的資源下載之外，改善網頁載入速度的最佳方法，是最佳化和壓縮剩餘資源，盡可能降低整體下載大小。

資料壓縮 101

設定網站以避免下載任何未使用的資源後，下一步就是壓縮瀏覽器必須下載的所有剩餘資源。視資源類型 (文字、圖片、字型等) 而定，您可以選擇多種不同的技術：可在網頁伺服器上啟用的通用工具、針對特定內容類型的預處理最佳化，以及需要開發人員輸入的資源專屬最佳化。

如要發揮最佳效能，您必須同時採用下列所有技巧：

壓縮是指使用較少位元來編碼資訊的程序。
刪除不必要的資料一向能帶來最佳結果。
壓縮技術和演算法有很多種。
您將需要各種技術來達成最佳壓縮。

縮減資料大小的程序稱為「資料壓縮」。許多人已提供演算法、技術和最佳化方式，以改善壓縮比、壓縮速度，以及各種壓縮演算法所需的記憶體。

完整討論資料壓縮功能超出本指南的範圍。不過，請務必先瞭解壓縮功能的運作方式，以及如何使用各種技巧來縮減網頁所需的各種素材資源大小。

為了說明這些技巧的核心原則，請考慮針對此範例特別設計的簡單文字訊息格式，進行最佳化程序：

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

訊息可能包含任意註解 (有時稱為註解)，並以「#」前置字元表示。註解不會影響訊息的意義或行為。
訊息可能包含標頭，也就是鍵/值組合 (在上述範例中以 ":" 分隔)，會顯示在訊息開頭。
訊息帶有文字酬載。

請問可以採取哪些措施來縮減先前訊息的大小，因為該訊息的長度為 200 個半形字元？

這則留言很有趣，但不會影響訊息的意思。傳送訊息時請移除該字元。
有許多方法可有效地編碼標頭。舉例來說，如果您知道所有訊息都有「格式」和「日期」，可以將這些訊息轉換為短整數 ID，然後直接傳送。不過，可能並不正確，因此建議您暫時先保留此設定。
酬載僅包含文字。雖然我們不知道內容實際上是什麼 (顯然使用 "secret-cipher")，但只要看文字就知道內容中有很多重複的部分。或許您可以不傳送重複的字母，而是計算重複字母的數量，並以更有效率的方式對其編碼。舉例來說，"AAA" 會變成 "3A"，代表三個 A 字母的序列。

結合這些技術後，您會得到以下結果：

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

新訊息的長度為 56 個字元，這表示您將原始訊息壓縮了 72%。這代表大幅減少！

這是一個簡單的例子，說明壓縮演算法如何有效減少文字資源的傳輸大小。實際上，壓縮演算法比前述範例所示的更為複雜，在網路上，壓縮演算法可用於大幅縮短資源的下載時間。將壓縮功能套用至文字式素材資源，網頁就能減少載入資源的時間，讓使用者更快看到這些資源的效果，而非在未壓縮的情況下。

壓縮：預先處理和特定情境最佳化

這裡要討論的第一個技巧是縮減。雖然壓縮並不是嚴格的壓縮演算法，但可以移除原始碼中非必要且多餘的字元，讓資源更容易理解。不過，在實際運作網站上維持原始碼的功能並非必要，且可能會延遲網站上資源的載入作業。

壓縮是針對特定內容最佳化的一種類型，可大幅縮減所提供資源的大小，因此最適合在建構和部署程序中套用最佳化。舉例來說，捆綁程式是一種常用的軟體類型，可在將新正式版程式碼部署至網站之前，自動縮減資源。

壓縮多餘或不必要的資料的最佳做法是刪除這些資料。但不能只刪除任意資料。不過，在某些情況下，如果我們對資料格式及其屬性有特定內容知識，就可以大幅縮減酬載大小，而不影響其實際意義或功能。

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

請參考先前的 HTML 程式碼片段，以及其中包含的三種不同內容類型：

HTML 標記。
CSS，用於自訂網頁的呈現方式。
JavaScript 可提供互動功能和其他進階網頁功能。

每種內容類型都有不同的規則，定義有效內容、指定留言等。不過，仍有一個問題尚未解決：「如何縮減這個網頁的大小？」

程式碼註解是開發人員的最佳夥伴，但瀏覽器不需要這些註解！移除 CSS (/* ... */)、HTML () 和 JavaScript (// ...) 註解，可減少網頁及其子資源的總傳輸大小。
聰明的 CSS 壓縮器會發現我們使用效率不彰的方式定義 .awesome-container 的規則，並將這兩個宣告合併為一個，不影響任何其他樣式，進而節省更多位元組。在大量 CSS 規則中，移除這類重複項目可能會造成累積效應，但這項做法可能無法積極套用，因為在不同情境 (例如媒體查詢) 中，選取器經常會不必要地重複。
空格和 tab 是 HTML、CSS 和 JavaScript 中方便開發人員使用的符號。額外的壓縮器可以移除所有分頁和空格。與其他簡化技術不同，這類最佳化作業「可以」公平地套用，只要頁面呈現時不需要這類空格或分頁即可。舉例來說，您最好在 HTML 文件中保留文字的空格，因為使用者實際上會看到內容。

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

完成上述步驟後，網頁的字元數從 516 個減少為 204 個，節省約 60%。有鑑於此，此做法無法閱讀，但其實不一定可用。現代開發做法還可讓您將格式正確且易讀的原始碼版本與您發布至實際工作環境的最佳化程式碼分開。搭配來源對應圖 (可提供可讀的轉換後正式版程式碼表示法，讓您更輕鬆地排除正式版中的錯誤)，您就能同時享有良好的開發人員體驗，並為使用者體驗最佳化效能。

前述範例說明了一個重要觀點：通用壓縮器 (例如設計用於壓縮任意文字的壓縮器) 可有效壓縮前述範例中的網頁，但不會知道要移除註解、折疊 CSS 規則，或執行其他數十種特定內容最佳化作業。因此，預處理、縮減和其他情境感知最佳化功能非常重要。

同樣地，上述技術不只適用於文字資產。圖片、影片和其他內容類型都包含各自的中繼資料和各種酬載。例如，當您使用相機拍照時，其檔案通常會嵌入大量額外資訊，例如相機設定、位置等。依您的應用程式而定，這項資料可能很重要 (例如相片分享網站)，或是完全沒有用。您應考慮是否值得移除。實際上，每張圖片最多可增加數十千位元大小的中繼資料。

簡而言之，在改善素材資源效率的第一步中，請建立不同內容類型的廣告素材資源，並考量可套用的內容專屬最佳化方式，以縮減檔案大小。確定設定項目後，請將這些最佳化作業新增至建構作業和發布步驟，藉此自動化處理最佳化作業，確保每次發布至正式版群組時都能採用相同的最佳化設定。

使用壓縮演算法壓縮文字

如要縮減文字型素材資源的大小，下一步是對這些素材資源套用壓縮演算法。這項功能更進一步，在將文字型酬載傳送給使用者之前，會積極搜尋可重複的模式，並在抵達使用者瀏覽器後解壓縮。結果是這些資源進一步大幅減少，隨後下載時間也加快。

gzip 和 Brotli 是常用的壓縮演算法，在文字型素材資源 (CSS、JavaScript、HTML) 上執行效果最佳。
所有新型瀏覽器都支援 gzip 和 Brotli 壓縮，並會在 Accept-Encoding HTTP 要求標頭中宣傳這兩種壓縮方式。
您必須設定伺服器才能啟用壓縮功能。網路伺服器軟體通常會預設啟用模組，以便壓縮文字型資源。
gzip 和 Brotli 兩者皆可微調，以提高壓縮率。以 gzip 為例，壓縮設定介於 1 到 9 之間，9 為最佳。對於 Brotli，這個範圍為 0 到 11，其中 11 是最佳值。不過，壓縮設定需要較長的時間才能完成。對於動態壓縮的資源 (也就是在要求時)，範圍中間的設定通常可在壓縮率和速度之間取得最佳平衡。不過，您可以使用靜態壓縮功能，也就是在回應提前壓縮時，使用每個壓縮演算法提供的最大壓縮設定。
內容傳遞網路 (CDN) 通常提供自動壓縮符合條件的資源。CDN 也能為您管理動態和靜態壓縮，讓您不必再擔心壓縮問題。

gzip 和 Brotli 是常見的壓縮器，可套用至任何位元組串流。實際上，他們會記得之前檢查過的檔案內容，然後嘗試有效找出並取代重複的資料片段。

在實際應用中，gzip 和 Brotli 在文字內容上的表現最佳，對於較大的檔案，通常可達到 70% 至 90% 的壓縮率。不過，如果已使用其他演算法壓縮的演算法資產 (例如使用無損或有損壓縮技術的大部分圖片格式)，執行這些演算法後，效果幾乎沒有改善。

所有新型瀏覽器都會在 Accept-Encoding HTTP 要求標頭中宣告支援 gzip 和 Brotli。不過，代管服務供應商有責任確保網路伺服器設定正確，以便在用戶端要求時提供壓縮資源。

檔案	演算法	未壓縮時的大小	壓縮大小	壓縮比
angular-1.8.3.js	Brotli	1,346 KiB	256 KiB	81%
angular-1.8.3.js	gzip	1,346 KiB	329 KiB	76%
angular-1.8.3.min.js	布羅特利	173 KiB	53 KiB	69%
angular-1.8.3.min.js	gzip	173 KiB	60 KiB	65%
jquery-3.7.1.js	Brotli	302 KiB	69 KiB	77%
jquery-3.7.1.js	gzip	302 KiB	83 KiB	73%
jquery-3.7.1.min.js	Brotli	85 KiB	27 KiB	68%
jquery-3.7.1.min.js	gzip	85 KiB	30 KiB	65%
lodash-4.17.21.js	Brotli	531 KiB	73 KiB	86%
lodash-4.17.21.js	gzip	531 KiB	94 KiB	82%
lodash-4.17.21.min.js	Brotli	71 KiB	23 KiB	68%
lodash-4.17.21.min.js	gzip	71 KiB	25 KiB	65%

上表顯示 Brotli 和 gzip 壓縮功能可為幾個知名的 JavaScript 程式庫節省多少空間。節省量介於 65% 至 86% 之間，視檔案和演算法而定。為方便您參考，我們已將最高壓縮等級套用至每個 Brotli 和 gzip 檔案。盡可能使用 Brotli，而非 gzip。

啟用壓縮功能是實作最簡單且最有效的最佳化方式之一。如果您的網站未善用這項功能，就會錯失改善使用者成效的絕佳機會。幸運的是，許多網頁伺服器都提供可啟用這項重要最佳化功能的預設設定，而 CDN 尤其擅長以平衡壓縮速度和比率的方式實作這項功能。

如要快速查看壓縮功能的運作情形，請開啟 Chrome 開發人員工具，開啟「Network」面板，載入所選網頁，然後觀察網路面板的底部。

開發人員工具的實際與傳輸大小讀數。 — 所有網頁資源的傳輸大小 (經過壓縮) 表示法，以及 Chrome 開發人員工具網路面板中的實際大小。

和上圖一樣，您應該會看到下列項目的細目：

請求數量，即為網頁載入的資源數量。
所有要求的傳輸大小。這項指標反映了對網頁任何資源套用的壓縮效果。
所有要求的資源大小。這項指標反映網頁資源在經過壓縮後的大小。

對 Core Web Vitals 的影響

除非有指標可反映這些改善，否則無法評估成效。Core Web Vitals 計畫旨在建立並提高使用者對反映實際使用者體驗的指標的認知。這與簡單的網頁載入時間等指標不同，後者無法明確轉換為使用者體驗品質。

當您將本指南所述的最佳化方式套用至網站上的資源時，對 Core Web Vitals 的影響可能會因最佳化資源和相關指標而異。不過，在某些情況下，套用這些最佳化作業可改善網站的 Core Web Vitals：

經過壓縮及壓縮的 HTML 資源可以改善 HTML 的載入情形、其子資源的偵測能力，進而改善這些資源的載入效能。這對於網頁的最大內容繪製 (LCP) 很有幫助。雖然 rel="preload" 等資源提示可能會影響資源的探索性，但使用過多資源提示可能會造成頻寬爭用問題。只要確保導覽要求的 HTML 回應已壓縮，預先載入掃描器就能盡快發現其中的資源。
使用壓縮功能，也可以更快載入部分 LCP 候選項目。舉例來說，SVG 圖片是 LCP 候選項目，可透過文字式壓縮來縮短資源載入時間。這與您對其他圖片類型所做的最佳化方式不同，因為這些圖片是透過其他壓縮方法進行內部壓縮，例如 JPEG 圖片使用有損壓縮。
此外，文字節點也可以是 LCP 候選項。本指南所述的技術，取決於您是否在網頁上使用網頁字型。如果您使用的是網路字型，請參考網路字型最佳化最佳做法。不過，如果您不使用網路字型，而是使用系統字型，且系統字型在顯示時不會產生任何資源載入時間，則縮減和壓縮 CSS 可縮短這段時間，也就是說，系統可能會更快完成 LCP 文字節點的算繪。

結論

如何最佳化文字素材資源的編碼和轉移作業，是成效概念的基礎，但也是影響成效的關鍵。請務必盡力確保可進行縮減和壓縮的資源能從這些最佳化作業中受益。

更重要的是，請確保這些流程已自動化。為簡化作業，請使用整合工具將壓縮套用至符合資格的資源。請確認您的網路伺服器設定支援壓縮，但必須使用最有效的壓縮。為了讓這項工作變得簡單，請使用 CDN 自動壓縮資源，因為 CDN 不僅可以為您壓縮資源，還能快速完成。

將這些基準成效概念融入網站架構，可確保成效最佳化工作有良好的基礎，後續的最佳化作業也能以良好的基準做法為基礎。