Lighthouse是一个由Google开发并开源的Web性能测试工具,用于改进网络应用的质量。您可以将其作为一个Chirome扩展程序运行,或从命令行运行。您为Lighthouse提供一个您要审查的网址,它将针对此页面运行一连串的测试,然后生成衣蛾有关页面性能的报告。
想要优化项目,首先得学会如何测试项目性能,那么怎么直观的知道项目有哪些地方需要优化呢?
这时候们可以使用谷歌浏览器自带的DevTools : LightHouse
进行性能分析
使用方法:
- 控制台:F12=>Lighthouse
- 找到LightHouse工具(灯塔测试工具)
- 选择测试方向,可以选择测试桌面和移动端的测试方向,以及测试的内容
- 然后进行测试
一、性能(Performance)
1.FCP(First Contentful Paint):
FCP度量用户导航到您的页面后浏览器呈现第一块DOM(首页)内容所花费的时间
范围(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和是通过在FCP和可交互时间之间添加所有场任务的阻塞部分来计算的。任何执行时间超过50毫秒的任务都是长任务。50ms后的时间量就是阻塞部分
范围(ms)等级:
- 0-200 优
- 200-600 良
- >600 差
6.CLS(Cumulative Layout Shift)
整个页面生命周期内发生的所有意外布局偏移中一连串的布局偏移分数,CLS指整个页面生命周期内发生的所有单词布局偏移分数的总和。
范围(ms)等级:
- 0-0.1 优
- 0.1-0.25 良
- >0.25 差
二、无障碍/可访问性(Accessibility)
如下图:
完整写法测试:
alt="" : 去掉盲人阅读属性测试
三、最佳做法(Best Practices)
四、SEO
如下图:
完整写法测试
去掉搜索引擎测试:<meta name="Description" content="梦中学习_Oh">
五、渐进式Web应用PWA(Progressive Web App)
六、测试案例
更新中......