精品軟體與實用教程
首次內容繪製 (FCP) 是測量感知載入速度的一個以用戶為中心的重要指標，因為該項指標會在用戶首次在螢幕上看到任何內容時，在頁面加載時間軸中標記出相應的點，迅捷的FCP 有助於讓用戶確信某些事情正在進行。
什麼是FCP？
首次內容繪製(FCP) 指標測量頁面從開始載入到頁面內容的任何部分在螢幕上完成渲染的時FCP間。對於該指標，"內容"指的是文字、圖像（包括背景圖像）、
在上方的載入時間軸中，FCP 發生在第二幀，因為那是第一批文字和影像元素在螢幕上完成渲染的時間點。
您會注意到，雖然部分內容已完成渲染，但並非所有內容都已完成渲染。這是首次內容繪製(FCP) 與*Largest Contentful Paint 最大內容繪製(LCP)*（旨在測量頁面的主要內容何時完成載入）之間的重要區別。
怎樣算是良好的FCP 分數？
為了提供良好的使用者體驗，網站應該努力將首次內容繪製控制在1.8 秒或以內。為了確保您能夠在大部分用戶的訪問期間達成建議目標值，一個良好的測量閾值為頁面加載的第75 個百分位數，且該閾值同時適用於行動和桌面設備
如何測量FCP
FCP 可以進行實驗室測量或實際測量，並且可以在以下工具中使用：
實測工具
實驗室工具
在JavaScript 中測量FCP
要在JavaScript 中測量FCP，您可以使用繪製計時API。以下範例說明如何建立一個PerformanceObserver來偵聽名稱為first-contentful-paint的paint條目並記錄在控制台中。
在上方的範例中，已記錄的first-contentful-paint條目會告訴您首個內容元素的繪製時間點。但在某些情況下，該條目並不能夠用來測量FCP。
以下部分列出了API 報告的內容與指標計算方式的差異。
指標和API 之間的差異
- API 會為在背景標籤中載入的頁面分發first-contentful-paint條目，但在計算FCP 時應忽略這些頁面（只有當頁面始終處於前台時才應考慮首次繪製的時機）。
- 當頁面透過往返緩存恢復時，API 不會報告first-contentful-paint條目，但在這些情況下應該測量FCP，因為這對使用者來說是多次不同的頁面存取體驗。
- API 可能不會報告跨域iframe 中的繪製時機，但要正確測量FCP，您應該考慮所有框架的情況。子框架可以使用API 將這些框架的繪製時機報告給父框架來進行聚合。
開發者不必記住所有這些細微差異，而是可以使用web-vitals JavaScript 函式庫來測量LCP，庫會自行處理這些差異（在可能的情況下）：
import {getFCP} from 'web-vitals';
// 當LCP 可用時立即進行測量和記錄。
getFCP(console.log);
您可以參考getLCP()的原始程式碼，以了解如何在JavaScript 中測量LCP 的完整範例。
如何改進FCP
要了解如何改進某個特定網站的FID，您可以執行一次燈塔性能審計，並留心查看審計建議的各種具體機會或診斷。
若要了解改進FCP 的常見方式（針對任何網站），請參閱以下效能指南：
