除了刪除不必要的資源下載作業之外 加快網頁載入速度是最佳化 然後壓縮剩餘資源
資料壓縮 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
- 訊息可能包含任意註解，有時也稱為 comments：以「#」表示前置字串。註解不會影響 訊息的意義或行為
- 訊息可能包含「標頭」，也就是鍵/值組合 (
":")， - 訊息帶有文字酬載。
如何縮減舊訊息的大小，開頭是 200 個半形字元嗎？
- 留言很有趣，但不會影響訊息的含義。 在傳輸訊息時刪除。
- 有一些不錯的技術可以有效地對標頭進行編碼。適用對象 舉例來說，如果您知道所有訊息都已加上「format」和「date」您可以 將這些 ID 轉換為短整數 ID 並直接傳送不過， 但不一定是如此，因此目前最好先自行保留。
- 酬載僅包含文字。但我們不清楚搜尋結果是什麼
(基本上，我們使用
"secret-cipher")，只要查看文字即可 表示其中有許多備援功能不傳送 重複字母，只需計算重複字母的數量。 更有效率舉例來說，"AAA"會變為"3A"代表三個 A 序列
合併這些技術會產生以下結果：
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
新訊息的長度為 56 個字元，這表示您壓縮了 原始訊息提高 72%這大幅減少了！
這是一個玩具範例，說明瞭壓縮演算法在 減少文字型資源的傳輸大小。實務上 與上一個範例相比，演算法更加複雜。 可以運用壓縮演算法大幅減少網路下載次數 省下大量資源的時間對文字型素材資源 (也就是網頁) 就能減少載入資源的時間，讓使用者查看 讓這些資源比不壓縮時更快
壓縮：預先處理和針對內容最佳化
本文討論的第一項技巧是「壓縮」。雖然壓縮作業並非 嚴格定義壓縮演算法，這種方法可以移除不必要的 在原始碼中使用多餘字元，使其更容易 人類。不過，就算無法維持可讀性， 導致實際執行環境延遲 取得網路上所有相關資源
壓縮是針對特定內容進行最佳化，可大幅提高 縮減提供的資源大小，並最適合套用最佳化設定 購買與部署 API例如套裝組合 常用的軟體類型 可以自動壓縮資源 。
壓縮多餘或不必要的資料時，最佳方式就是刪除這些資料。 但不能只刪除任意資料。然而，在某些情況下 具備資料格式及其屬性的內容特定知識 以便大幅縮減酬載大小 其實際意義或功能
<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 規則集，移除這類備援可能會增加，但 通常是可積極套用的項目，因為選擇器通常 卻會在不同的情境 (例如在媒體查詢中) 重複。 - 空格和分頁方便開發人員在 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-EncodingHTTP 要求標頭中兩者都支援。 - 你必須將伺服器設定為啟用壓縮功能。網路伺服器軟體 根據預設，模組通常會壓縮文字資源。
- gzip 和 Brotli 兩者皆可微調，提高壓縮率 調整壓縮率gzip 壓縮設定的範圍如下： 1 至 9，9 代表最佳。以布魯特利為例，這個範圍介於 0 至 11 之間，11 號 最棒的是不過，壓縮設定需要較長的時間才能完成。適用對象 也就是動態壓縮的資源，也就是在 要求，設定範圍中間的設定往往可以提供最佳的取捨 介於壓縮率和速度之間不過，靜態壓縮 這會提前壓縮回應 因此，系統會針對各個 壓縮演算法
- 內容傳遞網路 (CDN) 通常提供自動壓縮 取得合格資源CDN 也能管理 可讓您少一個壓縮的部分不用擔心
gzip 和 Brotli 是常見的壓縮工具，可套用至 一個位元組基本上，他們還記得先前檢查過的 檔案，並隨後嘗試找出並取代 以更有效率的方式
實務上，gzip 和 Brotli 對文字內容的成效最佳，通常達成 大型檔案的壓縮率高達 70-90%不過，執行中的 已透過替代演算法壓縮的演算法資產，例如 因為大部分的圖片格式都使用無損或有損壓縮技術 幾乎沒有改善
所有新式瀏覽器都廣告支援 gzip 和 Brotli
Accept-Encoding HTTP 要求標頭。不過，它是代管服務供應商
負責確保網路伺服器正確設定
並壓縮資源數量
| 檔案 | 演算法 | 未壓縮時的大小 | 壓縮大小 | 壓縮率 |
|---|---|---|---|---|
| angular-1.8.3.js | 布羅特利 | 1,346 KB | 256 KiB | 81% |
| angular-1.8.3.js | gzip | 1,346 KB | 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 開發人員工具並開啟 聯播網面板並載入所選頁面，然後觀察 網路面板
和上圖一樣，您應該會看到下列項目的細目：
- 要求數，也就是為 頁面。
- 所有要求的傳輸大小。這麼做反映了 即可將壓縮套用至頁面的任何資源。
- 所有要求的資源大小。這表示 在網頁解壓縮「之後」。
對 Core Web Vitals 的影響
無法評估效能改善情形，除非有指標能反映 這些改進措施Core Web Vitals 計畫的宗旨是 建立可反映實際使用者體驗的指標，並提高知名度。 相較於簡單網頁載入時間等指標 無法清楚指出使用者體驗的品質
將本指南列出的最佳化調整套用至您 可能會根據資源 以及相關指標不過，以下是一些 採行下列最佳化做法可改善網站的 Core Web Vitals：
- 壓縮及壓縮 HTML 資源
藉由使用 HTML 程式碼的方式，讓子資源更容易找到，進而提高
載入這些元件這種做法對於網頁的最大內容繪製
(LCP)。雖然
rel="preload"等資源提示可以用來 資源是否可用，如果使用過多資源， 減少頻寬爭執。確保導覽要求的 HTML 回應 會盡快將資源中的資源壓縮起來 預先載入掃描器。 - 部分 LCP 候選項目也可以透過壓縮功能更快載入。適用對象 例如，LCP 候選人的 SVG 圖片可以載入資源 時間減少了。這與 其他圖片類型的最佳化作業 透過其他壓縮方法 (例如 JPEG 和 JPEG) 的壓縮比例 圖片會採用有損壓縮
- 此外，文字節點也可以是 LCP 候選項目。技巧 則會根據您是否在開啟網頁文字的情況下使用網路字型 即可。如果您使用網路字型，請最佳化網站字型 實務作法。不過，如果您「並未」使用網路字型，而是系統 不會產生任何資源載入時間長度的字型，並且將 壓縮 CSS 可縮短這段長度，也就是說，顯示 潛在 LCP 文字節點可能會較快發生。
結論
如何最佳化文字型資產的編碼及傳輸做法 因為這個概念具有深遠影響請確認 盡力確保資源符合壓縮和 這些最佳化措施很有幫助
更重要的是，請確保這些程序會自動執行。適用對象 壓縮，使用整合工具將壓縮套用至符合資格的資源。確保 網路伺服器設定支援壓縮功能，但除此之外 最有效的壓縮為了盡量提升成效 CDN 能為您自動壓縮 但也能迅速完成作業
將這些基準成效概念與網站的 就能確保效能最佳化工作維持在 只要奠定良好基礎 後續的最佳化調整就可放在穩固的基礎上 並列出優秀的基準做法