First Contentful Paint (FCP)

瀏覽器支援

  • 60
  • 79
  • 84
  • 14.1

資料來源

什麼是 FCP?

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

google.com 的 FCP 時間軸

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

您會發現,有些內容已轉譯,而非全部轉譯。這項重要的差異在於評估首次顯示內容所需時間 (FCP) 和最大內容繪製 (LCP) 時,兩者的目的在於評估頁面主要內容載入完成的時間。

何謂良好的 FCP 分數?

為了提供良好的使用者體驗,網站應力求將「首次顯示內容所需時間」1.8 秒以下。為確保大部分使用者都能達成這個目標,評估的理想門檻是網頁載入第 75 個百分位數,在行動裝置和電腦裝置上區隔開來。

良好的 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,因為使用者遇到的網頁瀏覽方式與內容不同。
  • API 可能無法從跨來源 iframe 回報繪製時間,但若要正確評估 FCP,您應考量所有影格。子影格可以使用這個 API,將繪製時間回報至上層影格進行匯總。
  • API 會從導覽開始來評估 FCP,但針對預先轉譯的頁面,FCP 應從 activationStart 評估,因為此指標相當於使用者遇到的 FCP 時間。

開發人員不必記住所有細微的差異,只要使用 web-vitals JavaScript 程式庫來評估 FCP 即可。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 群組提出。