First Contentful Paint (FCP)

瀏覽器支援

  • Chrome:60。
  • Edge:79,
  • Firefox:84。
  • Safari:14.1。

資料來源

什麼是 FCP?

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

來自 google.com 的 FCP 時間表
在這個載入時間軸中,FCP 會在第二個影格發生,因為這是第一個文字和圖像元素轉譯至螢幕的時間。

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

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

什麼是良好的 FCP 分數?

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

良好的 FCP 值為 1.8 秒或更短,不良的值為 3.0 秒以上,介於兩者之間的值則需要改善
良好的 FCP 值為 1.8 秒或更短。不佳值大於 3.0 秒

如何評估 FCP

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

現場工具

研究室工具

在 JavaScript 中評估 FCP

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

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 整體 (適用於任何網站),請參閱下列效能指南:

變更記錄

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

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

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