最佳實踐
- 首先學習瀏覽器的關鍵渲染路徑。瞭解這一點將幫助您理解如何提高網站的效能。
- 使用資源提示，例如
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 效能 all about 使用者體驗和感知效能。正如我們在關鍵渲染路徑文件中學到的，使用帶有 rel="stylesheet" 的傳統連結標籤連結 CSS 是同步的，會阻塞渲染。透過移除阻塞性的 CSS 來最佳化頁面的渲染。
要非同步載入 CSS，您可以將 media 型別設定為 print，然後在載入後將其更改為 all。這需要 JavaScript，因此包含一個帶有傳統回退的 <noscript> 標籤很重要。
html
<link
id="my-stylesheet"
rel="stylesheet"
href="/path/to/my.css"
media="print" />
<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>
js
const stylesheet = document.getElementById("my-stylesheet");
stylesheet.addEventListener("load", () => {
stylesheet.media = "all";
});
這種方法的缺點是未樣式化文字閃爍（FOUT）。解決此問題的最簡單方法是內聯 CSS，這些 CSS 是渲染在首屏（或在滾動之前在瀏覽器視口中看到的任何內容）所必需的。這些樣式將提高感知效能，因為 CSS 不需要檔案請求。
html
<style>
/* Insert your CSS here */
</style>
JavaScript
使用 async 或 defer 屬性避免 JavaScript 阻塞，或者在頁面 DOM 元素之後連結 JavaScript 資源。JavaScript 僅阻塞 DOM 樹中出現在指令碼標籤之後的元素的渲染。
Web 字型
EOT 和 TTF 格式預設未壓縮。對這些檔案型別應用 GZIP 或 Brotli 等壓縮。使用 WOFF 和 WOFF2。這些格式內建了壓縮功能。
在 @font-face 中使用 font-display: swap。透過使用 font-display swap，瀏覽器不會阻塞渲染，並將使用定義的備份系統字型。最佳化字型粗細，使其儘可能接近 Web 字型。
圖示 Web 字型
如果可能，避免使用圖示 Web 字型，而是使用壓縮的 SVG。要進一步最佳化，請在 HTML 標記中內聯您的 SVG 資料，以避免 HTTP 請求。
工具
- 學習使用 Firefox Dev Tools 來分析您的網站。
- PageSpeed Insights 可以分析您的頁面並提供一些改進效能的通用提示。
- Lighthouse 可以為您提供網站許多方面的詳細分析，包括效能、SEO 和可訪問性。
- 使用 WebPageTest.org 測試您頁面的速度，您可以在其中使用不同的真實裝置型別和位置。
- 嘗試 Chrome 使用者體驗報告，它量化了真實使用者指標。
- 定義一個效能預算。
API
- 使用 boomerang 庫收集使用者指標。
- 或者直接使用 window.performance.timing 收集
不該做的事（壞習慣）
- 下載所有內容
- 使用未壓縮的媒體檔案