【效能】web頁面效能之lighthouse使用
阿新 • • 發佈：2021-11-24
1、lighthouse指標
1.1、效能（Performance）
1、FCP（First Contentful Paint）
FCP度量使用者導航到您的頁面後瀏覽器呈現第一塊DOM內容所花費的時間。頁面上的影象、非白色的<canvas>元素和svg被認為是DOM內容;iframe裡面的任何東西都不包括在內。
| 範圍（s） | 等級 |
| 0-1.8 | 優 |
| 1.8-3 | 良 |
| >3 | 差 |
2、SI（Speed Index）
指介面可見內容的顯示速度
| 範圍（s） | 等級 |
| 0-3.4 | 優 |
| 3.4-5.8 | 良 |
| >5.8 | 差 |
3、LCP（Largest Contentful Paint）
指頁面渲染出最大文字或圖片的時間
| 範圍（s） | 等級 |
| 0-2.5 | 優 |
| 2.5-4 | 良 |
| >4 | 差 |
4、TTI（Time to Interactive）
指網頁需要多長時間才能提供完整互動功能
| 範圍（s） | 等級 |
| 0-3.8 | 優 |
| 3.8-7.3 | 良 |
| >7.3 | 差 |
5、TBT（Total Blocking Time）
TBT度量頁面被阻止響應使用者輸入(如滑鼠單擊、螢幕點選或鍵盤按下)的總時間。這個總和是通過在FCP和可互動時間之間新增所有長任務的阻塞部分來計算的。任何執行時間超過50毫秒的任務都是長任務。50毫秒後的時間量就是阻塞部分。
| 範圍（ms） | 等級 |
| 0-200 | 優 |
| 200-600 | 良 |
| >600 | 差 |
6、CLS（Cumulative Layout Shift）
整個頁面生命週期內發生的所有意外佈局偏移中一連串的佈局偏移分數，CLS指整個頁面生命週期內發生的所有單次佈局偏移分數的總和。
| 範圍（分數） | 等級 |
| 0-0.1 | 優 |
| 0.1-0.25 | 良 |
| >0.25 | 差 |