對于前端童鞋來說，優化是一個永恒的話題。上線并不是網站開發的終點，如何吸引用戶、提升用戶體驗，應該成為我們 F2E 的追求目標。

如果你對優化還不了解，建議先閱讀如下兩篇文章：

網站優化實戰

網站優化，這些工具你一定用得著

當然，衡量網站性能的指標有很多，今天我們就來看一個「令人費解而又頭疼」的指標 - FMP。

First Meaningful Paint 是指頁面的首要內容出現在屏幕上的時間。

一、FMP 之怪現象

目前尚無標準化的 FMP 定義，因此也沒有性能條目類型。 部分原因在于很難以通用的方式確定「有效」對于所有頁面意味著什么。但是，一般來說，在單個頁面或單個應用中，最好是將 FMP 視為主角元素呈現在屏幕上的時刻。

所以，我們經常會面臨這樣的問題：

FCP 在可接受范圍，但是 FMP 卻完全失控。

也可能是這樣的問題：

或許還有這樣的問題：

為什么結構類似的站點，FMP 加載卻千差萬別。要了解 FMP 我們需要知道它的計算規則，下面讓我們一層層抽絲剝繭。

二、刨根問底

究竟是什么導致 FMP 的時機差距如此之大？或許我們可以從 FMP 定義來說起。

When FMP and FCP are the same time in seconds, they share the same identical score. If FMP is slower than FCP, say when there's iframe content loading, then the FMP score will be lower than the FCP score.

什么意思呢，我們先來看一張官方圖片：

如果 FCP 是 1.5s，FMP 是 3s，那么 FCP 分數將會是 99，但是 FMP 分數將是 75。

除了上述影響外，我們還需要關注 Lighthouse V3 的記分規則：

雖然 FMP 權重僅為 1 ，很遺憾，因為如上規則的存在，我們站點無法到達滿分💯。

確定頁面上最關鍵的主角元素之后，我們應確保初始腳本加載僅包含渲染這些元素并使其可交互所需的代碼。

相關源碼：
Lighthouse FMP 源碼
Score a perfect 100 in Lighthouse audits

三、重要結論

了解了相關計算規則之后，我們繼續來剖析 FMP。對于不同的站點，首要內容是不同的，例如：

• 對于博客文章：「大標題」 + 「首屏文字」是首要內容；
• 對于百度或者 Google 的搜索結果頁：「首屏的結果」就是首要內容；
• 對于淘寶等購物網站來說，圖片會極為重要，因此它是首要內容；

需要注意的是，通常首要內容是不包括 Headers 和導航條的。

為了方便理解，我們用一個簡單的公式表示：「首次有效繪制 = 具有最大布局變化的繪制」。

很好，此刻我們不用糾結「首次有效渲染」了，轉而去了解「最大布局變化的繪制」。基于 Chromium 的實現，這個繪制是使用 LayoutAnalyzer 進行計算的，它會收集所有的布局變化，當布局發生最大變化時得出時間。

具有最大布局變化的繪制如何計算呢？
1.偵聽頁面元素的變化；
2.遍歷每次新增的元素，并計算這些元素的得分總；
3.如果元素可見，得分為 1 * weight，如果元素不可見，得分為 0；

還是很抽象，我們繼續探索 LayoutAnalyzer，在源碼中得到如下公式：

布局顯著性 = 添加的對象數目 / max(1, 頁面高度 / 屏幕高度)

這下清晰了，既然可以算出來，那么優化 FMP 指日可待。從上面可以看出來「布局顯著性」是通過添加對象數目與頁面高度來計算的。似乎對象數目成了解決問題的關鍵節點。

我們繼續探索，如何去找到對象數目呢？很簡單，打開 Chrome DevTool，切到 Layout 面板。如果你還不會使用 Layout 面板，可以先看看網站優化工具。

這里就不展開了，直接上圖，看看紅框部分：

驚不驚喜，我們精簡 DOM 似乎可以將公式中分子變小，或者讓頁面高度大于屏幕高度。到這里，所有謎團都解開了，優化 FMP 也就變得毫無挑戰了。

相關源碼：
LayoutAnalyzer 源碼
Tracing Results
Understanding about:tracing results

五、總結

我們從撲簌迷離的 FMP 表象一層層找到了 Lighthouse 的記分規則，又從 Tracing Results 中得知最大布局變化的計算規則，因此轉向 LayoutAnalyzer 源碼研究，最終找到 Layout Objects，從而解決了問題。雖然波折，但結局令人舒適。

最后，再啰嗦一下，以下結論對理解 FMP 很重要：

• 對于博客文章：「大標題」 + 「首屏文字」是首要內容；
• 對于百度或者 Google 的搜索結果頁：「首屏的結果」就是首要內容；
• 對于淘寶等購物網站來說，圖片會極為重要，因此它是首要內容；

如果你覺得還是過于復雜，不妨去試試 SSR 吧，FMP 將不再是煩惱。

文章最后，打個小廣告吧。如果你想搭上在線教育的快車，快速成長，不妨加入我們。一起成長，一起學習，一起挑戰更多有趣的事情，「跟誰學-高途課堂」歡迎你，請將簡歷私我～

總結

以上是生活随笔為你收集整理的网站性能指标 - FMP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。