網頁效能資源
有很多 原因 導致您的網站應該儘可能地提高效能。以下是有關最佳實踐、工具、API 的快速回顧，以及指向每個主題的更多資訊的連結。
最佳實踐
- 從學習瀏覽器的 關鍵渲染路徑 開始。瞭解這一點將幫助您瞭解如何提高網站效能。
- 使用諸如
rel=preconnect、rel=dns-prefetch、rel=prefetch、rel=preload等資源提示。 - 將 JavaScript 的大小保持在最低限度。只使用當前頁面所需的 JavaScript。
- CSS 效能因素
- 在您的伺服器（或 CDN）上使用 HTTP/2。
- 對資源使用 CDN，可以顯著減少載入時間。
- 使用 gzip、Brotli 和 Zopfli 壓縮您的資源。
- 影像最佳化（如果可能，請使用 CSS 動畫或 SVG）。
- 延遲載入視窗外的應用程式部分。如果您這樣做，請為 SEO 制定備用計劃（例如，為機器人流量渲染完整頁面）；例如，透過在
<img>元素上使用loading屬性。 - 同樣重要的是要意識到對使用者真正重要的內容。可能不是絕對的時間，而是使用者感知。
快速獲勝
CSS
Web 效能是關於使用者體驗和感知效能。正如我們在 關鍵渲染路徑 文件中瞭解到的那樣，使用傳統的連結標籤（rel="stylesheet"）連結 CSS 是同步的，並且會阻止渲染。透過刪除阻塞 CSS 來最佳化頁面的渲染。
要非同步載入 CSS，可以將媒體型別設定為列印，然後在載入後更改為所有。以下程式碼段包含 onload 屬性，需要 JavaScript，因此務必包含具有傳統回退的 noscript 標籤。
html
<link
rel="stylesheet"
href="/path/to/my.css"
media="print"
onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>
這種方法的缺點是會出現無樣式文字閃爍（FOUT）。解決此問題的最簡單方法是在折線以上渲染的任何內容（即您在滾動之前在瀏覽器視窗中看到的內容）中內聯所需的 CSS。這些樣式將提高感知效能，因為 CSS 不需要檔案請求。
html
<style>
/* Insert your CSS here */
</style>
JavaScript
Web 字型
EOT 和 TTF 格式預設情況下不會被壓縮。對這些檔案型別應用 gzip 或 Brotli 等壓縮。使用 WOFF 和 WOFF2。這些格式內建了壓縮功能。
在 @font-face 中使用 font-display: swap。透過使用字型顯示交換，瀏覽器將不會阻止渲染，並將使用定義的備份系統字型。儘可能最佳化字型粗細 以與 web 字型儘可能匹配。
圖示 web 字型
如果可能，請避免使用圖示 web 字型，並使用壓縮的 SVG。為了進一步最佳化，請在 HTML 標記中內聯 SVG 資料以避免 HTTP 請求。
工具
- 學習使用 Firefox 開發者工具 來分析您的網站。
- PageSpeed Insights 可以分析您的頁面並提供一些提高效能的一般提示。
- Lighthouse 可以詳細分析您網站的許多方面，包括效能、SEO 和無障礙性。
- 使用 WebPageTest.org 測試您的頁面速度，您可以在其中使用不同的真實裝置型別和位置。
- 嘗試 Chrome 使用者體驗報告，該報告量化了真實使用者指標。
- 定義 效能預算。
API
- 使用 boomerang 庫收集使用者指標。
- 或者直接使用 window.performance.timing 收集。
不應做的事情（不良做法）
- 下載所有內容
- 使用未壓縮的媒體檔案