「首次顯示內容所需時間」(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 群組。