First Contentful Paint (FCP)

Philip Walton

什麼是 FCP？

首次顯示內容所需時間 (FCP) 是指從使用者首次前往網頁到畫面顯示網頁任何部分內容的時間。這項指標的「內容」是指文字、圖片 (包括背景圖片)、<svg> 元素或非白色的 <canvas> 元素。

在上圖所示的載入時間軸中，FCP 會在第二個影格中發生，也就是在畫面顯示第一個文字和圖片元素時。

您會發現，雖然部分內容已轉譯完畢，但並非完全轉譯。這項指標與首次內容繪製和最大內容繪製 (LCP) 有重要差異，後者旨在評估網頁主要內容載入完成的時間。

什麼是良好的 FCP 分數？

為了提供良好的使用者體驗，網站應力求 First Contentful Paint 為 1.8 秒以下。為確保您大多數的使用者都能達成此目標，評估頁面載入內容的第 75 個百分位數，是針對行動裝置和電腦裝置的區隔，理想的評估門檻。

如何評估 FCP

您可以在研究室或實際操作環境中評估 FCP，以下工具也有提供這項指標：

現場工具

• PageSpeed Insights
• Chrome 使用者體驗報告
• Search Console (速度報表)
• web-vitals JavaScript 程式庫

研究室工具

• 燈塔
• Chrome 開發人員工具
• PageSpeed Insights

在 JavaScript 中評估 FCP

如要在 JavaScript 中評估 FCP，可以使用 Paint Timing API。以下範例說明如何建立 PerformanceObserver，讓系統監聽名稱為 first-contentful-paint 的 paint 項目，並將其記錄到控制台。

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

在先前的程式碼片段中，系統記錄的 first-contentful-paint 項目會在系統繪製第一個內容元素時通知您。不過，在某些情況下，這個項目無法用於評估 FCP。

下節將說明 API 報表與指標計算方式之間的差異。

指標和 API 的差異

• API 會分派在背景分頁中載入的 first-contentful-paint 項目，但在計算 FCP 時，請忽略這些網頁 (僅應在網頁在整個前景中都處於前景時，才考慮首次繪製時間)。
• 當網頁透過往返快取還原時，API 不會回報 first-contentful-paint 項目，但應評估 FCP 項目，因為使用者會將 FCP 視為不同網頁造訪。
• API 可能不會回報跨來源 iframe 的繪製時間，但為了正確評估 FCP，建議您考量所有影格。子影格可以使用 API 將其繪製時間回報給父項影格，以便匯總。
• API 會從導覽開始時刻起測量 FCP，但對於預先轉譯的網頁，應從 activationStart 開始測量 FCP，因為這會對應到使用者體驗的 FCP 時間。

開發人員可以使用 web-vitals JavaScript 程式庫來測量 FCP，這樣就不必記住所有細微差異，程式庫會為您處理這些差異 (盡可能如此，請注意，程式庫不處理 iframe 問題)：

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

如需在 JavaScript 中評估 FCP 的完整範例，請參閱 onFCP() 的原始碼。

如何改善 FCP

如要瞭解如何改善特定網站的 FCP，您可以執行 Lighthouse 效能稽核，並留意稽核建議的任何特定商機或診斷資訊。

如要瞭解如何改善 FCP 整體 (適用於任何網站)，請參閱下列效能指南：

• 排除會妨礙顯示的資源
• 壓縮 CSS
• 移除未使用的 CSS
• 移除未使用的 JavaScript
• 預先連線至必要來源
• 縮短伺服器回應時間 (TTFB)
• 避免進行多次網頁重新導向
• 預先載入關鍵要求
• 避免耗用大量網路酬載
• 運用有效率的快取政策來放送靜態素材資源
• 避免 DOM 過大
• 盡量減少關鍵要求深度
• 確認載入網站字型時文字不會消失
• 減少要求數量，並縮減傳輸大小

變更記錄

有時，我們會在用於評估指標的 API 中發現錯誤，有時也會在指標定義中發現錯誤。因此，有時必須進行變更，這些變更可能會在內部報表和資訊主頁中顯示為改善或回歸。

為方便您管理，這些指標導入或定義的所有變更都會顯示在這份變更記錄中。

如果您對這些指標有任何意見，歡迎前往 web-vitals-feedback Google 群組提供意見。