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

在排除不必要的資源下載之外,如要加快頁面載入速度,最好的方法就是最佳化並壓縮剩餘資源,藉此將整體下載大小降至最低。

資料壓縮指南

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

如要提供最佳效能,您需要綜合採用下列所有技術:

  • 壓縮是使用較少的位元對資訊進行編碼的程序。
  • 消除不必要的資料一律會產生最佳結果。
  • 有許多不同的壓縮技術和演算法
  • 您需要多種技術才能達到最佳壓縮效果。

縮減資料大小的程序為「資料壓縮」。許多人已提供演算法、技術和最佳化功能,藉此提高壓縮率、壓縮速度,以及各種壓縮演算法所需的記憶體。

完整介紹資料壓縮並不在本指南的討論範圍內。不過,您必須大致瞭解壓縮的運作方式,以及可用來縮減網頁需要各種資產大小的技術。

為了說明這些技術的核心原則,請參考我們專為這個範例發明的簡單文字訊息格式,最佳化程序:

# 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
  1. 訊息可能包含任意註解,有時也稱為「註解」,這些註解會以「#」前置字串表示。註解不會影響訊息的意義或其行為。
  2. 訊息可能包含「標頭」headers,這是顯示在訊息開頭的鍵/值組合 (在上述範例中以 ":" 分隔)。
  3. 訊息帶有文字酬載。

如何縮減前一則訊息的大小 (從 200 個字元開始)?

  1. 留言很有趣,但不會影響訊息的含義。 傳送時,請不要使用連接器。
  2. 有一些不錯的技術可以有效地編碼標頭。舉例來說,如果您知道所有訊息都有「format」和「date」,就可以將這兩個 ID 轉換為短整數 ID 並直接傳送。不過,這可能不是真的,因此最好暫時保留。
  3. 酬載僅限文字。雖然我們不知道其真正的內容為何 (明確來說,就是使用 "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 程式碼片段和其中包含的三種不同內容類型:

  1. HTML 標記。
  2. 自訂網頁的簡報。
  3. 使用 JavaScript 加強互動和其他進階網頁功能。

每種內容類型都有不同的規則,分別規定可構成有效內容的條件、指定註解的不同規則等等。但這個問題仍然是,「如何縮減這個網頁的大小?」

  • 程式碼註解是開發人員的最佳夥伴,但瀏覽器不需使用程式碼!去除 CSS (/* ... */)、HTML (<!-- ... -->) 和 JavaScript (// ...) 註解可減少網頁及其子資源的總傳輸大小。
  • 「智慧型」CSS 壓縮工具可能會發現,我們以效率不佳的方式定義 .awesome-container 規則,並將兩個宣告合併為一個,而不影響任何其他樣式,從而節省更多位元組。透過大量的 CSS 規則,移除這類多餘的多餘項目可能會增加,但也可能是無法積極套用的項目,因為選取器往往必須在不同的情境中重複出現,例如在媒體查詢中。
  • 空格和分頁是開發人員方便使用 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 規則,或是執行數十種其他特定內容最佳化。這也就是預先處理、壓縮及其他情境感知最佳化作業的重要性。

同樣地,上述技術的延伸範圍可以延伸至文字型資產之外。圖片、影片和其他內容類型都包含自己的中繼資料形式和各種酬載。舉例來說,每次用相機拍照時,檔案中的檔案通常會嵌入許多額外資訊,例如相機設定、位置等。視您的應用程式而定,這類資料可能非常重要 (例如相片分享網站),也可能完全無法使用。建議您考慮是否值得移除。實際上,每張圖片的中繼資料加起來可能多達數十 KB。

簡而言之,如要最佳化資產效率,第一步就是建構不同內容類型的清查,並考慮可以套用哪種內容專屬最佳化功能來縮減大小。接著,在瞭解各項功能之後,請將這些最佳化作業新增至建構和發布步驟,自動執行這些最佳化作業,以確保每個新版本的新版本套用最佳化作業。

使用壓縮演算法進行文字壓縮

如要縮減文字型素材資源的大小,下一步就是對它們套用壓縮演算法。這個做法則更進一步,先積極搜尋文字型酬載中的可重複模式,再將模式傳送給使用者,然後在使用者抵達使用者的瀏覽器時予以解壓縮。結果可以進一步大幅減少這些資源,進而縮短下載時間。

  • gzip 和 Brotli 是常用的壓縮演算法,最適合用於文字型資產:CSS、JavaScript、HTML。
  • 所有新式瀏覽器都支援 gzip 和 Brotli 壓縮,而且將在 Accept-Encoding HTTP 要求標頭中公告這兩種格式。
  • 您的伺服器必須設定為啟用壓縮功能。根據預設,網路伺服器軟體通常會啟用模組來壓縮文字型資源。
  • 您可以調整 gzip 和 Brotli 的壓縮,藉此改善壓縮率。以 gzip 格式來說,壓縮設定的範圍介於 1 至 9 之間,9 代表最佳。如為布洛利,這個範圍是 0 到 11,而 11 是最佳值。然而,壓縮設定較高的需要較多時間。對於「動態壓縮」的資源 (即要求進行時),位於範圍中間的設定通常能在壓縮率和速度之間取得最佳平衡。不過,靜態壓縮是可行的,也就是在回應之前預先壓縮回應,因此可以使用每個壓縮演算法可用的最積極的壓縮設定。
  • 內容傳遞網路 (CDN) 通常可以自動壓縮符合資格的資源。CDN 還能為您管理動態和靜態壓縮,減少壓縮方面的限制。

gzipBrotli 是常見的壓縮工具,可套用至任何位元組串流。實際上,他們會記得先前檢查過的部分檔案內容,隨後就能有效找出並取代重複的資料片段。

實際上,gzip 和 Brotli 在文字內容方面的效能最佳,通常能針對大型檔案達到高達 70-90% 的壓縮率。不過,如果執行這些已使用替代演算法壓縮的演算法資產 (例如使用無損或有損壓縮技術的大多數圖片格式),則幾乎沒有改善。

所有新版瀏覽器都會在 Accept-Encoding HTTP 要求標頭中宣告支援 gzip 和 Brotli。但是,主機供應商必須負責確保網路伺服器已正確設定,可在用戶端要求時提供壓縮資源。

檔案 演算法 未壓縮時的大小 壓縮後的大小 壓縮比率
angular-1.8.3.js 布洛利 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 布洛利 302 KiB 69 KiB 77%
jquery-3.7.1.js gzip 302 KiB 83 KiB 73%
jquery-3.7.1.min.js 布洛利 85 KiB 27 KiB 68%
jquery-3.7.1.min.js gzip 85 KiB 30 KiB 65%
lodash-4.17.21.js 布洛利 531 KiB 73 KiB 86%
lodash-4.17.21.js gzip 531 KiB 94 KiB 82%
lodash-4.17.21.min.js 布洛利 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:

  • 壓縮和壓縮的 HTML 資源可以改善 HTML 的載入情形、子資源的能見度,進而改善這些資源的載入速度。這對於網頁的最大內容繪製 (LCP) 很有幫助。雖然 rel="preload" 等資源提示可用來影響資源的能見度,但使用太多資源時,則會產生頻寬爭用的問題。確保已壓縮導覽要求的 HTML 回應,預先載入掃描器可以盡快找到其中資源。
  • 部分 LCP 候選項目也可透過壓縮功能更快載入。舉例來說,LCP 候選 SVG 圖片可透過文字壓縮,縮短資源載入時間。這不同於您對其他圖片類型所做的最佳化 (即透過其他壓縮方法進行內建壓縮,例如 JPEG 圖片如何使用有損壓縮) 的最佳化。
  • 此外,文字節點也可以是 LCP 候選項目。本指南說明的技術方式,取決於您是否為網頁中的文字使用網路字型。如果您使用網路字型,則適用網路字型最佳化最佳做法。不過,如果您「並未」使用網路字型,而是希望在不產生任何資源載入時間的情況下顯示的系統字型,壓縮及壓縮 CSS 可以縮短載入時間,進而加快顯示潛在 LCP 文字節點的轉譯作業。

結語

如何最佳化文字型資產的編碼和傳輸作業是基準效能概念,但影響深遠。請確保您能執行所有工作,確保資源符合壓縮和壓縮資格,可受惠於這些最佳化作業。

更重要的是,這些程序必須自動化。如要壓縮,請使用 Bundler 將壓縮套用至符合資格的資源。請確認您的網路伺服器設定支援壓縮功能,但至少要支援壓縮作業,請使用最具效益的壓縮功能。如要盡可能簡化這項作業,請使用 CDN 為您自動壓縮,因為 CDN 不僅可以為您壓縮資源,也可以快速完成壓縮。

將這些基準效能概念納入您的網站架構後,就能確保效能最佳化工作協助奠定良好基礎,後續的最佳化工作也能奠定穩固的基礎,奠定良好的基準做法。