「首次顯示內容所需時間」(FCP) 是以使用者為中心的重要指標，可用於評估感知載入速度。它會在網頁載入時間軸中，標示使用者在畫面上看到任何內容的第一個時間點。快速的 FCP 有助於讓使用者安心正在發生。
FCP 會測量從使用者首次瀏覽至頁面到頁面任何部分內容顯示的時間。就這項指標而言，「內容」是指文字、圖片 (包括背景圖片)、<svg> 元素或非白色的 <canvas> 元素。
顯示第一個內容元素時，可能不會顯示所有內容。這是決定 FCP 和最大內容繪製 (LCP) 之間的重要區別，它會評估網頁主要內容載入完成的時間。
何謂良好的 FCP 分數？
如要提供良好的使用者體驗，網站的 FCP 不得超過 1.8 秒。為確保大部分使用者都能達成這個目標，評估的門檻是網頁載入時間的第 75 個百分位數，在行動裝置和電腦裝置上區隔開來。
如何評估 FCP
您可以在研究室或實際領域測量 FCP，可以透過下列工具進行測量：
現場工具
研究室工具
以 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，因為使用者會將兩者視為不同的網頁造訪次數。 - API 可能不會從跨來源 iframe 回報繪製時間，但為了正確評估 FCP，您必須將所有影格納入考量。子影格可以使用這個 API，將繪製時間回報至上層影格進行匯總。
- API 會從導覽開始來評估 FCP，但對於預先轉譯的頁面，FCP 應從
activationStart測量，因為該值對應使用者經歷的 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 群組。