優化基於文字的資產的編碼和傳送大小

小瑪麗在隔壁發表於2018-11-28
優化

除了避免不必要的資源下載，在提高網頁載入速度上您可以採取的最有效措施就是，通過優化和壓縮其餘資源來最大限度減小總下載大小。

資料壓縮基礎知識

在您消除了任何不必要的資源之後，下一步就是對瀏覽器需要下載的其餘資源進行壓縮。根據資源型別（文字、影像、字型等），有若干不同的技術可供您驅使：可在伺服器上啟用的通用工具、適用於特定內容型別的預處理優化以及需要開發者輸入的資源特定優化。

實現最佳效能需要組合使用上述所有技術。

TL;DR

  • 壓縮就是使用更少的位對資訊進行編碼的過程。
  • 消除不必要的資料總是會產生最好的結果。
  • 有許多種不同的壓縮技術和演算法。
  • 您需要利用各種技術來實現最佳壓縮。

減小資料大小的過程稱為資料壓縮。許多人終其一生致力於演算法、技術和優化研究，以期提高各種壓縮程式的壓縮比率、速度和記憶體要求。對資料壓縮排行詳細討論超出了本主題的範圍。但是，概要了解壓縮的工作原理以及在減小網頁所需各類資產大小方面可供我們利用的技術，仍具有重要意義。

為說明這些技術的核心原理，我們看看如何優化一種簡單的簡訊格式（不過是我們專為此示例編造的格式）：

# 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. 簡訊可能包含鍵-值對形式並顯示在簡訊開頭的“標頭”（以“:”分隔）。
  3. 簡訊帶有文字負載。

您有什麼辦法可以減小上面這條 200 個字元長簡訊的大小呢？

  1. 註釋是很有意思，但它實際上並不影響簡訊的含義，因此您可以在傳送簡訊時將它去掉。
  2. 或許您可以利用某些智慧技術對標頭進行高效編碼。例如，如果您知道所有簡訊都包含“format”和“date”，您就可以將它們轉換成短整型 ID 並只傳送這些 ID。不過，情況可能不是這樣，因此您可以暫且不去管它。
  3. 負載是純文字，儘管我們不知道其實際內容（顯然，它使用的是一種“secret-message”），但只需看一看文字內容，就會發現其中存在大量多餘內容。或許，您可以不傳送重複的字母，而是直接對重複的字母計數，再對它們進行更高效的編碼。例如，將“AAA”編碼成“3A”，表示三個 A 的序列。
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
複製程式碼

新簡訊的長度為 56 個字元，這意味著您已將原有簡訊壓縮了 72%，令人吃驚。

好是好，但這對優化網頁有什麼幫助嗎？我們不會嘗試發明自己的壓縮演算法，但正如您將會看到的那樣，我們在優化網頁上的各種資源時，將會採用完全相同的技術和思維方式：預處理、環境特定優化以及為不同的內容採用不同的演算法。

原始碼壓縮：預處理和環境特定優化

TL;DR

  • 內容特定優化可顯著減小所提供資源的大小。
  • 內容特定優化在內部版本/發行版本週期內應用的效果最好。
  • 壓縮冗餘或不必要資料的最佳方法是將其全部消除。我們不能只是刪除任意資料，但在某些環境中，我們可能對資料格式及其屬性有內容特定了解，往往可以在不影響其實際含義的情況下顯著減小負載的大小。
<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>…</div>
   <!-- awesome container content: END -->
   <script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>
複製程式碼

試一下

以上面這個簡單 HTML 網頁及其包含的三個不同內容型別為例：HTML 標記、CSS 樣式和 JavaScript。其中的每一個內容型別針對構成有效內容的元素都具有不同的規則，在註釋指示等方面也具有不同的規則。我們如何才能減小這個網頁的大小呢？

  • 程式碼註釋是開發者最好的朋友，但瀏覽器不需要看到它們！直接刪除 CSS (/* … */)、HTML () 和 JavaScript (// …) 註釋可顯著減小網頁的總大小。
  • “智慧”CSS 壓縮程式會注意到採用低效率的方式為“.awesome-container”定義規則，它會將兩個宣告摺疊為一個而不影響任何其他樣式，從而節省更多位元組。
  • 空白（空格和製表符）能夠在 HTML、CSS 和 JavaScript 中給開發者提供方便。可以增加一個壓縮程式來去掉所有制表符和空格。
<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>
複製程式碼

試一下

執行以上步驟後，可將網頁字元數從 406 縮減到 150，縮減率高達 63%。不得不承認，其可讀性不太好，但其實也不必具有多好的可讀性：您可以保留原始網頁作為“開發版本”，然後在您準備好在網站上釋出網頁時再執行以上步驟。

退一步講，上例說明了一個要點：通用壓縮程式（例如設計用於壓縮任意文字的壓縮程式）在壓縮以上網頁時可能同樣可以取得相當不錯的效果，但永遠別指望它能去除註釋、摺疊 CSS 規則或者進行大量的其他內容特定優化。正因如此，預處理/原始碼壓縮/環境感知優化才會成為功能如此強大的工具。

Note: 舉個有說服力的例子，JQuery 內容庫未壓縮開發版本的大小現已接近大約 300KB。而壓縮（移除註解等內容）後同一內容庫的大小僅為原來的大約 1/3：大約 100KB。

同理，可以將以上技術運用到基於文字的資產以外的其他領域。影像、視訊以及其他內容型別都包含其自己的後設資料形式和各種負載。例如，每當您使用相機拍攝照片時，照片通常也會嵌入大量額外的資訊：相機設定、位置等等。視具體應用而定，這些資料可能很關鍵（例如照片分享網站），也可能毫無用處，因此您應該考慮將其刪除是否值得。事實上，每一幅影像的這些後設資料加起來可能多達數萬位元組。

簡言之，作為優化資產效率的第一步，您需要建立一個不同內容型別的清單，並考慮可以進行哪些型別的內容特定優化來減小其大小。然後，在您確定具體的優化後，通過將其加入內部版本和發行版本流程來自動執行這些優化，以便確保優化一直有效。

通過 GZIP 壓縮文字

TL;DR

  • GZIP 對基於文字的資產的壓縮效果最好：CSS、JavaScript 和 HTML。
  • 所有現代瀏覽器都支援 GZIP 壓縮，並且會自動請求該壓縮。
  • 您的伺服器必須配置為啟用 GZIP 壓縮。
  • 某些 CDN 需要特別注意以確保 GZIP 已啟用。
    GZIP 是一種可以作用於任何位元組流的通用壓縮程式。它會在後臺記憶一些之前看到的內容，並嘗試以高效方式查詢並替換重複的資料片段。（欲知詳情，請參閱淺顯易懂的 GZIP 低階說明。）但實際上，GZIP 對基於文字的內容的壓縮效果最好，在壓縮較大檔案時往往可實現高達 70-90% 的壓縮率，而如果對已經通過替代演算法壓縮過的資產（例如，大多數圖片格式）執行 GZIP，則效果甚微，甚至毫無效果。

所有現代瀏覽器都支援並自動協商將 GZIP 壓縮用於所有 HTTP 請求。您必須確保伺服器得到正確配置，能夠在客戶端請求時提供壓縮過的資源。

優化基於文字的資產的編碼和傳送大小

上表顯示了 GZIP 壓縮對幾種最流行的 JavaScript 內容庫和 CSS 框架可實現的壓縮率。壓縮率範圍為 60% 至 88%，將檔案壓縮原始碼後（產生檔名中包含“.min”的檔案），再使用 GZIP 進行壓縮，可進一步提高壓縮率。

1. 先應用內容特定優化：CSS、JS 和 HTML 壓縮原始碼程式。
2. 採用 GZIP 對壓縮原始碼後的輸出進行壓縮。

啟用 GZIP 是實現起來最簡單並且回報最高的優化之一，遺憾的是，仍有許多人不去實現它。大多數網路伺服器都會代您完成壓縮內容的工作，您只需要確認伺服器進行了正確配置，能夠對所有可受益於 GZIP 壓縮的內容進行壓縮。

HTML5 Boilerplate 專案包含所有最流行伺服器的配置檔案樣例，其中為每個配置標誌和設定都提供了詳細的註解。要為您的伺服器確定最佳配置，請執行以下操作： 在列表中找到您喜愛的伺服器。 查詢 GZIP 部分。 * 確認您的伺服器配置了推薦的設定。

優化基於文字的資產的編碼和傳送大小

可通過以下這種快速而又簡單的方法瞭解 GZIP 的實用效果：開啟 Chrome DevTools，然後檢查“Network”皮膚中的“Size / Content”列：“Size”表示資產的傳送大小，“Content”表示資產的未壓縮大小。對於上例中的 HTML 資產，GZIP 在傳送時節省了 98.8KB。

Note:GZIP 有時會增加資產的大小。當資產非常小且 GZIP 字典的開銷大於壓縮縮減的大小時，或者資源已經得到充分壓縮時，通常會發生這種情況。為了避免此問題，某些伺服器允許您指定最小檔案大小閾值。

最後，儘管大多數伺服器會在向使用者提供這些資產時自動對其進行壓縮，但某些 CDN 需要特別注意和手動操作，以確保 GZIP 資產得到提供。務請稽核您的網站並確保資產確實得到壓縮。

本文轉自：

優化基於文字的資產的編碼和傳送大小

參考工具：

Lighthouse

相關文章