什么是性能指標(biāo)：Web Performance Metrics 翻譯成 Web 性能指標(biāo)，一般和時間有關(guān)系，在短時間內(nèi)做更多有意義的事情。

一個站點表現(xiàn)得好與不好，標(biāo)準(zhǔn)在于用戶體驗，而用戶體驗好不好，有一套 RAIL 模型來衡量。這個 RAIL 模型可以衡量一個站點用戶體驗到底好不好。那什么是 RAIL 模型勒，里面有 4 個單詞：

| Response 響應(yīng)：你這個網(wǎng)站的響應(yīng)速度是不是足夠的快。

| Animation 動畫：你這站點的動畫是不是足夠絲滑，有沒有跳幀，有沒有丟幀。

| Idle 空閑：你這個站點是不是給用戶留夠了足夠的空閑時間窗口，什么叫空閑，就這時間內(nèi)沒有什么 JS 代碼運行，沒有阻塞主線程，因為只有空閑時間足夠，用戶才能跟這個網(wǎng)站進(jìn)行交互，不然你點一下就卡住了。

| Load 加載：頁面上 DOM 元素過多，導(dǎo)致解析的時間變長，就會影響加載的時間。通過這四個方面進(jìn)行整體的評價。

而 RAIL 模型是個模糊的概念，我們可以借助 LightHouse 可以將性能數(shù)據(jù)化。LightHouse 是瀏覽器很重要的插件，是對站點頁面進(jìn)行分析的插件，使用 f12 打開調(diào)試工具，并將調(diào)試工具漂浮起來，因為如果是附著狀態(tài)會改變?yōu)g覽器窗口大小，分析的時候就會不準(zhǔn)。

?漂浮出來后，配置可以保持默認(rèn)，直接點擊按鈕開始分析，分析的時候會刷新我們的頁面，對整個頁面的性能指標(biāo)進(jìn)行分析。

分析結(jié)果如下，博主的網(wǎng)站是有那么一點點瑕疵，需要優(yōu)化一下。

?往下滑還可以看到一些具體的指標(biāo)

要看懂這些指標(biāo)，就需要知道這些指標(biāo)什么意思。

First Contentful Paint 簡稱 FCP：首次內(nèi)容繪制，就是白屏到第一次出現(xiàn)有意義的內(nèi)容，這段時間就是 FCP。

Largest Contentful Paint 簡稱 LCP：最大內(nèi)容繪制出來的時間，就是一個視口里面最大的元素往往是最重要的元素，最大元素出現(xiàn)的時間節(jié)點就需要去衡量它了。

Total Blocking Time 檢查 TBT：指的是 FCP 期間，用戶點擊了按鈕，但是頁面沒有完全加載，等到頁面完全加載，然后頁面對用戶點擊做出反應(yīng)，這段時間叫 TBT，TBT 時間當(dāng)然是越短越好。

Cumulative Layout Shift 簡稱 CLS：累計偏移，就比如你本來想點擊一個按鈕，點擊的時候，又有一個按鈕冒出來，讓你要點擊的按鈕偏移下去了，點錯了按鈕。

Speed Index 簡稱 SI：總體的速度指標(biāo)，是總體的綜合衡量。

這些就是我們常見的 Web 性能指標(biāo)，而現(xiàn)在這些指標(biāo)都是實驗室指標(biāo)，那什么是實驗室指標(biāo)，就是這些性能指標(biāo)是針對我們開發(fā)者的電腦、配置、瀏覽器的，而到用戶那邊，就可能有不同的結(jié)果。

所以實驗室指標(biāo)只能作為參考，真正有意義的指標(biāo)是要去收集用戶那一側(cè)的數(shù)據(jù)，這就涉及到服務(wù)監(jiān)控和數(shù)據(jù)埋點。就是我們寫一段程序。注入到這個頁面當(dāng)中，當(dāng)用戶訪問我們的站點的時候，那段代碼就會在用戶那端來進(jìn)行運行，在運行的過程中就會收集用戶的指標(biāo)發(fā)送到我們數(shù)據(jù)監(jiān)控的服務(wù)器，那怎么來收集勒，可以使用第三方 API，比如 Web Vitals。