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

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

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

| Animation 動(dòng)畫：你這站點(diǎn)的動(dòng)畫是不是足夠絲滑，有沒有跳幀，有沒有丟幀。

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

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

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

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

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

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

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

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

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

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

Cumulative Layout Shift 簡(jiǎn)稱 CLS：累計(jì)偏移，就比如你本來想點(diǎn)擊一個(gè)按鈕，點(diǎn)擊的時(shí)候，又有一個(gè)按鈕冒出來，讓你要點(diǎn)擊的按鈕偏移下去了，點(diǎn)錯(cuò)了按鈕。

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

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

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