First Contentful Paint (FCP)

Philip Walton

什麼是 FCP？

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

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

您會發現，雖然部分內容已轉譯完畢，但並非完全轉譯。這項重要的區別在於「首次顯示內容所需時間」和「最大內容繪製」(LCP)，目的是評估網頁的主要內容載入完畢的時間。

FCP 分數良好？

為了提供良好的使用者體驗，網站應力求預設顯示內容所需時間不超過 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，但針對預先算繪的網頁，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 群組提供。