在排除不必要的資源下載之外,如要加快頁面載入速度,最好的方法就是最佳化並壓縮剩餘資源,藉此將整體下載大小降至最低。
資料壓縮指南
當您設定好網站,避免下載任何未使用的資源後,下一步就是壓縮瀏覽器必須下載的所有剩餘可用資源。視資源類型 (文字、圖片、字型等) 而定,有許多不同的技巧可以選擇:可在網路伺服器上啟用的一般工具、特定內容類型的預先處理最佳化,以及需要開發人員輸入內容的資源專屬最佳化功能。
如要提供最佳效能,您需要綜合採用下列所有技術:
- 壓縮是使用較少的位元對資訊進行編碼的程序。
- 消除不必要的資料一律會產生最佳結果。
- 有許多不同的壓縮技術和演算法
- 您需要多種技術才能達到最佳壓縮效果。
縮減資料大小的程序為「資料壓縮」。許多人已提供演算法、技術和最佳化功能,藉此提高壓縮率、壓縮速度,以及各種壓縮演算法所需的記憶體。
完整介紹資料壓縮並不在本指南的討論範圍內。不過,您必須大致瞭解壓縮的運作方式,以及可用來縮減網頁需要各種資產大小的技術。
為了說明這些技術的核心原則,請參考我們專為這個範例發明的簡單文字訊息格式,最佳化程序:
# 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
- 訊息可能包含任意註解,有時也稱為「註解」,這些註解會以「#」前置字串表示。註解不會影響訊息的意義或其行為。
- 訊息可能包含「標頭」headers,這是顯示在訊息開頭的鍵/值組合 (在上述範例中以
":"
分隔)。 - 訊息帶有文字酬載。
如何縮減前一則訊息的大小 (從 200 個字元開始)?
- 留言很有趣,但不會影響訊息的含義。 傳送時,請不要使用連接器。
- 有一些不錯的技術可以有效地編碼標頭。舉例來說,如果您知道所有訊息都有「format」和「date」,就可以將這兩個 ID 轉換為短整數 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 標記。
- 自訂網頁的簡報。
- 使用 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% 的壓縮率。不過,如果執行這些已使用替代演算法壓縮的演算法資產 (例如使用無損或有損壓縮技術的大多數圖片格式),則幾乎沒有改善。
所有新版瀏覽器都會在 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」面板、載入您選擇的頁面,然後查看網路面板的最底部。
就像上圖一樣,畫面上應該會顯示以下細分項目:
- 要求數,也就是頁面載入的資源數量。
- 所有要求的轉移大小。這反映出對任何網頁資源套用壓縮的效果。
- 所有要求的「資源大小」。這反映了網頁資源在解壓縮「之後」的大小。
網站體驗核心指標的影響
除非指標能反映改善情形,否則無法評估效能改善情形。網站體驗核心指標計畫旨在打造能夠反映實際使用者體驗的指標,並提高這類指標的知名度。 這與無法清楚轉譯使用者體驗品質的指標 (例如簡單的網頁載入時間) 不同。
將本指南列出的最佳化做法運用於網站上的資源時,網站體驗核心指標所造成的影響,會因最佳化的資源和相關指標而異。不過,在下列情況中,套用這些最佳化作業可以改善網站的 Core Web Vitals:
- 壓縮和壓縮的 HTML 資源可以改善 HTML 的載入情形、子資源的能見度,進而改善這些資源的載入速度。這對於網頁的最大內容繪製 (LCP) 很有幫助。雖然
rel="preload"
等資源提示可用來影響資源的能見度,但使用太多資源時,則會產生頻寬爭用的問題。確保已壓縮導覽要求的 HTML 回應,預先載入掃描器可以盡快找到其中資源。 - 部分 LCP 候選項目也可透過壓縮功能更快載入。舉例來說,LCP 候選 SVG 圖片的資源載入時間長度可透過文字型壓縮功能縮短。這不同於您對其他圖片類型所做的最佳化 (即透過其他壓縮方法進行內建壓縮,例如 JPEG 圖片如何使用有損壓縮) 的最佳化。
- 此外,文字節點也可以是 LCP 候選項目。本指南說明的技術方式,取決於您是否為網頁中的文字使用網路字型。如果您使用網路字型,則適用網路字型最佳化最佳做法。不過,如果您「並未」使用網路字型,而是希望在不產生任何資源載入時間長度的情況下顯示的系統字型,壓縮及壓縮 CSS 可以縮短這段時間長度,從而更快顯示潛在的 LCP 文字節點。
結論
如何最佳化文字型資產的編碼和傳輸作業是基準效能概念,但影響深遠。請確保您能執行所有工作,確保資源符合壓縮和壓縮資格,可受惠於這些最佳化作業。
更重要的是,這些程序必須自動化。如要壓縮,請使用 Bundler 將壓縮套用至符合資格的資源。請確認您的網路伺服器設定支援壓縮功能,但至少要支援壓縮作業,請使用最具效益的壓縮功能。如要盡可能簡化這項作業,請使用 CDN 為您自動壓縮,因為 CDN 不僅可以為您壓縮資源,也可以快速完成壓縮。
將這些基準效能概念納入您的網站架構後,就能確保效能最佳化工作協助奠定良好基礎,後續的最佳化工作也能奠定穩固的基礎,奠定良好的基準做法。