Core Web Vitals：測量與改善網頁效能
為何 Core Web Vitals 很重要
你已經建立了一個快速的網站，但使用者仍抱怨速度慢。或者 Google Search Console 警告你 Core Web Vitals 表現不佳。這些指標直接影響使用者體驗與搜尋排名。忽略它們意味著流失訪客與流量。在本指南中，你將了解什麼是 Core Web Vitals、如何測量它們，以及改善每一項的實用步驟。
什麼是 Core Web Vitals？
Core Web Vitals 是 Google 定義的一組指標，用於量化網頁上的使用者體驗。它們聚焦於載入、互動性與視覺穩定性：
- Largest Contentful Paint (LCP)：衡量載入效能。它標記最大的內容元素（圖片、文字區塊）變為可見的時間。目標是 LCP 低於 2.5 秒。
- First Input Delay (FID)：衡量互動性。它是從使用者首次互動（點擊、輕觸）到瀏覽器回應的時間。目標是 FID 低於 100 毫秒。
- Cumulative Layout Shift (CLS)：衡量視覺穩定性。它量化頁面載入期間非預期的版面位移。目標是 CLS 低於 0.1。
這些指標是 Google 頁面體驗訊號的一部分，並影響搜尋排名。它們也反映真實世界的使用者體驗，而不僅僅是實驗室測試。
如何測量 Core Web Vitals
你可以在實驗室（合成測試）或現場（真實使用者監控）中測量 Core Web Vitals。兩種方法都很有價值。
實驗室工具
- Lighthouse：內建於 Chrome DevTools，可審核效能並提供 LCP、FID（以 TBT 表示）和 CLS 的分數。請在無痕模式下執行，以避免擴充功能影響結果。
- WebPageTest：提供詳細的瀑布圖和影片條。你可以從不同位置和裝置進行測試。
- PageSpeed Insights：結合實驗室與現場資料。它顯示 CrUX（Chrome 使用者體驗報告）的真實世界效能資料。
現場工具
- Chrome 使用者體驗報告 (CrUX)：提供數百萬個網站的彙總真實使用者資料。可透過 PageSpeed Insights 或 CrUX API 存取。
- Google Search Console：在「Core Web Vitals」報告下，顯示你網站的現場資料，並按 URL 分組。
- Web Vitals JavaScript 函式庫：使用
web-vitals從真實使用者收集指標並傳送到你的分析工具。
從實驗室工具開始進行除錯，然後用現場資料驗證，以確保真實世界的改善。
改善 Largest Contentful Paint (LCP)
LCP 通常是最具挑戰性的指標。要改善它，請聚焦於關鍵渲染路徑。
- 優化圖片：壓縮圖片，使用 WebP 或 AVIF 等現代格式，並透過
srcset提供響應式圖片。 - 預載 LCP 資源：如果 LCP 元素是圖片或字型，加入
<link rel="preload">以提早開始載入。 - 消除阻礙渲染的資源：延遲非關鍵的 CSS 和 JavaScript。內嵌關鍵 CSS。
- 使用 CDN：從靠近使用者的位置提供資源，以減少延遲。
- 快取資源：透過
Cache-Control標頭為靜態資源設定較長的快取生命週期。
例如，預載你的主視覺圖片：
<link rel="preload" as="image" href="/hero.webp">
此外，確保你的伺服器快速回應。使用 Nginx Log Analyzer 等工具來找出慢速請求並優化伺服器效能。
改善 First Input Delay (FID)
FID 衡量回應性。長時間的 JavaScript 任務會阻塞主執行緒，延遲互動。
- 拆分長任務：使用
setTimeout或requestIdleCallback將大型 JavaScript 拆成較小的區塊。 - 壓縮 JavaScript：透過最小化和 gzip/brotli 壓縮來減少檔案大小。
- 延遲非關鍵 JavaScript：使用
async或defer屬性。 - 移除未使用的程式碼：使用 tree shaking 和程式碼分割。
- 優化第三方腳本：以非同步方式載入，並考慮自行託管。
使用 DevTools 中的 Performance 面板來識別長任務。
改善 Cumulative Layout Shift (CLS)
CLS 發生在元素非預期地移動時。常見原因：沒有尺寸的圖片、廣告、嵌入內容和網頁字型。
- 設定尺寸屬性：始終在圖片和影片上包含
width和height。 - 為廣告和嵌入內容保留空間：使用 CSS
aspect-ratio或固定尺寸的容器。 - 避免在現有內容上方插入內容：除非是由使用者互動觸發。
- 使用
font-display: swap：但要注意字型替換可能導致位移；考慮使用font-display: optional或預載字型。 - 套用
transform動畫：而不是會觸發版面的屬性。
使用 DevTools 中的 Layout Instability API 進行測試。
Core Web Vitals 閾值比較
| 指標 | 良好 | 需要改進 | 差 |
|---|---|---|---|
| LCP | ≤ 2.5秒 | 2.5秒 – 4.0秒 | > 4.0秒 |
| FID | ≤ 100毫秒 | 100毫秒 – 300毫秒 | > 300毫秒 |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
這些閾值是基於 Google 的建議。
持續改善的實用工作流程
改善 Core Web Vitals 不是一次性任務。請遵循以下工作流程：
- 測量：使用實驗室和現場工具建立基準。
- 識別：使用 Lighthouse 和 CrUX 找出最大的改善機會。
- 優化：針對 LCP、FID、CLS 實施修正。
- 監控：使用 web-vitals 函式庫設定真實使用者監控，並追蹤變化。
- 迭代：定期審核並改進。
將效能預算整合到你的 CI/CD 流程中，以防止效能退步。
常見問題
什麼是 Core Web Vitals，為何它們很重要？
Core Web Vitals 是量化使用者體驗的指標（LCP、FID、CLS）。它們很重要，因為它們影響搜尋排名，並直接影響使用者對你網站速度和穩定性的感知。
我應該多久測量一次 Core Web Vitals？
在重大變更後測量，並透過現場資料持續監控。目標是在開發期間審查實驗室指標，並每月監控現場資料以捕捉效能退步。
我可以在不重新設計網站的情況下改善 Core Web Vitals 嗎？
可以。許多改善措施，例如圖片優化、預載和設定尺寸屬性，都可以在不進行完整重新設計的情況下套用。從低投入、高影響的修正開始。
準備好分析你的伺服器效能了嗎？使用 Nginx Log Analyzer 來找出慢速請求並優化你的後端，這會間接改善 LCP 和整體使用者體驗。