除了刪除不必要的資源下載作業之外 加快網頁載入速度是最佳化 然後壓縮剩餘資源
資料壓縮 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-Encoding
HTTP 要求標頭中兩者都支援。 - 你必須將伺服器設定為啟用壓縮功能。網路伺服器軟體 根據預設,模組通常會壓縮文字資源。
- 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 開發人員工具並開啟 聯播網面板並載入所選頁面,然後觀察 網路面板
![開發人員工具解讀實際大小與傳輸大小。](https://web.dev/static/articles/optimizing-content-efficiency-optimize-encoding-and-transfer/image/resource-size-fig.png?authuser=1&hl=zh-tw)
和上圖一樣,您應該會看到下列項目的細目:
- 要求數,也就是為 頁面。
- 所有要求的傳輸大小。這麼做反映了 即可將壓縮套用至頁面的任何資源。
- 所有要求的資源大小。這表示 在網頁解壓縮「之後」。
對 Core Web Vitals 的影響
無法評估效能改善情形,除非有指標能反映 這些改進措施Core Web Vitals 計畫的宗旨是 建立可反映實際使用者體驗的指標,並提高知名度。 相較於簡單網頁載入時間等指標 無法清楚指出使用者體驗的品質
將本指南列出的最佳化調整套用至您 可能會根據資源 以及相關指標不過,以下是一些 採行下列最佳化做法可改善網站的 Core Web Vitals:
- 壓縮及壓縮 HTML 資源
藉由使用 HTML 程式碼的方式,讓子資源更容易找到,進而提高
載入這些元件這種做法對於網頁的最大內容繪製
(LCP)。雖然
rel="preload"
等資源提示可以用來 資源是否可用,如果使用過多資源, 減少頻寬爭執。確保導覽要求的 HTML 回應 會盡快將資源中的資源壓縮起來 預先載入掃描器。 - 部分 LCP 候選項目也可以透過壓縮功能更快載入。適用對象 例如,LCP 候選人的 SVG 圖片可以載入資源 時間減少了。這與 其他圖片類型的最佳化作業 透過其他壓縮方法 (例如 JPEG 和 JPEG) 的壓縮比例 圖片會採用有損壓縮
- 此外,文字節點也可以是 LCP 候選項目。技巧 則會根據您是否在開啟網頁文字的情況下使用網路字型 即可。如果您使用網路字型,請最佳化網站字型 實務作法。不過,如果您「並未」使用網路字型,而是系統 不會產生任何資源載入時間長度的字型,並且將 壓縮 CSS 可縮短這段長度,也就是說,顯示 潛在 LCP 文字節點可能會較快發生。
結論
如何最佳化文字型資產的編碼及傳輸做法 因為這個概念具有深遠影響請確認 盡力確保資源符合壓縮和 這些最佳化措施很有幫助
更重要的是,請確保這些程序會自動執行。適用對象 壓縮,使用整合工具將壓縮套用至符合資格的資源。確保 網路伺服器設定支援壓縮功能,但除此之外 最有效的壓縮為了盡量提升成效 CDN 能為您自動壓縮 但也能迅速完成作業
將這些基準成效概念與網站的 就能確保效能最佳化工作維持在 只要奠定良好基礎 後續的最佳化調整就可放在穩固的基礎上 並列出優秀的基準做法