什么是性能指標：Web Performance Metrics 翻譯成 Web 性能指標，一般和時間有關系，在短時間內做更多有意義的事情。

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

| Response 響應：你這個網站的響應速度是不是足夠的快。

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

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

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

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

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

分析結果如下，博主的網站是有那么一點點瑕疵，需要優化一下。

?往下滑還可以看到一些具體的指標

要看懂這些指標，就需要知道這些指標什么意思。

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

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

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

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

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

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

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