首次有效繪製

「首次有效繪製」(FMP) 是 Lighthouse 報告「效能」部分追蹤的六項指標之一。每項指標都會擷取網頁載入速度的部分資訊。

Lighthouse 可在幾秒內顯示 FMP:

Lighthouse First Meaningful Paint 稽核螢幕截圖

FMP 評估的項目

FMP 會評估使用者看見網頁主要內容的時機。FMP 原始分數是指從使用者開始載入網頁,到網頁顯示主要不需捲動位置內容之間的時間 (以秒為單位)。基本上,FMP 基本上會顯示繪製時間,之後最大的不需捲動位置版面配置會發生變化。如要進一步瞭解 FMP 的技術細節,請參閱 Google 的《First Meaningful Paint:一種版面配置方法》。

First Contentful Paint (FCP) 和 FMP 通常相同,當頁面中轉譯的內容的第一個位元包含不需捲動位置的內容時,通常會相同。不過,當的內容是 iframe 中不需捲動位置的內容時,這些指標就會有所不同。當使用者可以看到 iframe 中的內容時,FMP 就會註冊,但 FCP「不」包含 iframe 內容。

Lighthouse 如何決定 FMP 分數

和 FCP 一樣,FMP 也是根據 HTTP 封存檔的實際網站效能資料

如果 FMP 和 FCP 相同,兩者的分數會相同。如果 FMP 是在 FCP 之後 (例如網頁含有 iframe 內容) 後發生,FMP 分數就會低於 FCP 分數。

假設您的 FCP 是 1.5 秒,FMP 是 3 秒。FCP 分數為 99,但 FMP 分數為 75。

下表說明如何解讀 FMP 分數:

FMP 指標
(以秒為單位)
顏色標記 FMP 分數
(FCP HTTP 封存百分位數)
0 至 2 個 綠色 (快) 75 到 100
2 至 4 個 橘色 (中等) 50 到 74 歲
超過 4 人 紅色 (慢) 0–49

如何提高 FMP 分數

請參閱如何改善網站上的最大內容繪製。改善 FMP 的策略與改善最大內容繪製的策略大致相同。

在使用者實際裝置上追蹤 FMP

如要瞭解如何評估 FMP 在使用者裝置上實際發生的時間,請參閱 Google 的以使用者為中心的效能指標頁面。「使用主要元素追蹤 FMP」一節說明如何透過程式輔助方式存取 FCP 資料並提交給 Google Analytics (分析)。

如要進一步瞭解如何收集實際使用者指標,請參閱 Google 的「透過導覽和資源時間評估現實生活中的載入效能」。使用者載入時間標記及測量 Lighthouse 稽核項目可讓您在報表中查看使用者時間資料。

如何提高整體成效分數

除非您有特別關注特定指標的理由,否則最好著重於改善整體效能分數。

使用 Lighthouse 報表的「商機」部分,判斷哪些改善項目為您的網頁帶來最多價值。商機越大,對效能分數的影響就越大。例如,下方的 Lighthouse 螢幕截圖顯示移除會封鎖轉譯資源將產生最大的改善效果:

Lighthouse:商機部分

請參閱效能稽核到達網頁,瞭解如何處理 Lighthouse 報告指出的商機。

資源