【性能】web页面性能之lighthouse使用

目录

• 1.1、性能（Performance）
•  
• 1.2、无障碍/可访问性（Accessibility）
• 1.3、最佳做法（Best Practices）
• 1.4、SEO
• 1.5、渐进式Web应用PWA（Progressive Web App）

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	差

 

 

 

回到顶部

 

回到顶部

1.2、无障碍/可访问性（Accessibility）

回到顶部

1.3、最佳做法（Best Practices）

回到顶部

1.4、SEO

回到顶部

1.5、渐进式Web应用PWA（Progressive Web App）