首次有效繪製

Lighthouse 報表「效能」部分會追蹤六項指標,「首次有意義的繪製」(FMP) 是其中之一。每項指標都會擷取網頁載入速度的部分面向。

Lighthouse 以秒為單位顯示 FMP:

Lighthouse First 有意義的繪製稽核的螢幕截圖

FMP 評估的項目

FMP 會評估向使用者顯示網頁主要內容的時機。 FMP 的原始分數是指使用者啟動網頁載入,到轉譯不需捲動位置主要內容之間的秒數。FMP 基本上會顯示當下的繪製時間 (不需捲動位置上的最大版面配置發生變化)。如要進一步瞭解 FMP 的技術細節,請參閱 Google 的「首次有效繪製時間:以版面配置為基礎的方法」。

首次顯示內容所需時間 (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 報告中列出的商機。

資源