Google的性能分析利器-Lighthouse 6.0发布
这是奶爸码农第62篇原创文章，点击上方蓝字关注
01
引言
Lighthouse是一个可以对网站进行性能分析的工具，并且针对不足之处提供了大量改进建议。上周Google官方团队宣布推出Lighthouse 6.0版本，将会集成在Chrome Devtools、npm包、CLI工具和Chrome插件。
可以通过以下命令行按照最新的Lighthouse CLI工具：
npm install -g lighthouse
lighthouse https://www.example.com --view
下面我们来看下Lighthouse 6.0提供哪些更新功能。
02
新的指标
Lighthouse 6.0引入了三个新的性能指标，Largest Contentful Paint（最大内容渲染时间）、Cumulative Layout Shift（累积布局变化量）和Total Blocking Time（累积阻塞时长）。
Largest Contentful Paint (LCP)
LCP是一个页面加载时长的技术指标，用于表示当前页面中最重要/占比最大的内容显示出来的时间点。不同于First Contentful Paint，FCP代表的是第一次页面内容渲染的世界点，LCP是FCP的一个重要的补充，它可以代表当前页面主要内容展示的时间。LCP低于2.5s则表示页面加载速度优良。
Cumulative Layout Shift (CLS)
CLS是一个衡量页面内容是否稳定的指标，CLS会将页面加载过程中非预期的页面布局的累积变动。CLS的分数越低，表明页面的布局稳定性越高，通常低于0.1表示页面稳定性良好。
Total Blocking Time (TBT)
TBT是一个衡量用户事件响应的指标。TBT会统计在FCP和TTI时间之间，主线程被阻塞的时间总和。当主线程被阻塞超过50ms导致用户事件无法响应，这样的阻塞时长就会被统计到TBT中。TBT越小说明页面能够更好的快速响应用户事件。
性能分数计算权重更新
由于Lighthouse 6.0中新增了几个性能指标，因此其性能分数的计算逻辑也发生了变化，具体变化如上图。
TTI的权重下降，TBT的权重占比高：这个变化是期望开发者不要仅仅关注于页面最终的响应时间，而是要关注页面加载过程中的响应速度。
FCP的权重下降，LCP的权重占比高：这个变化是期望开发中不要仅仅关注页面首次渲染的速度，而要更关注页面中主要内容的展示时间，这样可以为用户提供更好的使用体验。
FID、FMP、FCI等指标被废弃，不再作为性能分数的计算参考。
同时，在Lighthouse 6.0的性能报告页面也提供了一个性能分数计算器，可以让开发者自行进行数据的调整，并且提供了v5和v6版本的对比。
03
性能审计、持续集成、移动设备支持
新的性能审计
无用的JavaScript
这个审计能力并不是新添加的，早在2017年就有了，但是由于担心性能问题，这个能力是默认关闭的。Lighthouse 6.0中提升了其执行效率，因此目前是默认打开的。
其他审计
无障碍化审计 - 可以用于提升页面无障碍化的能力。
Maskable icon - 一种新的图标格式，可以用于PWA网站，实现了多个设备的兼容能力。
字符集声明 - 这个审计帮助保证网站页面中字符集声明没有缺失，避免字符显示错乱的问题。
Lighthouse CI
Lighthouse提供了完整的CLI和持续集成的能力，可以给每一次代码提交都进行代码审计。Lighthouse CI可以和众多系统进行集成：Travis, Circle, GitLab和Github。
移动设备支持
Lighthouse遵循移动为先的理念。性能问题往往在移动设备上表现的更为明显，但开发者总是在本地开发，未能针对移动设备进行测试，因此，Lighthouse将采用默认移动设备的配置环境。模拟器的能力包括：
模拟更慢的网络环境和CPU状况
移动设备屏幕尺寸
同时，Lighthouse 6.0也将默认移动设备从Nexus 5X改成了Moto G4。
其他实验性特性
Lighthouse还基于source map提供了不少实验性的能力
在JavaScript Bundle中发现重复的模块
检测多余的Polyfill
提供模块级别的无用JavaScript代码
在性能报表中提供源代码预览
04
总结
-End-
推荐阅读
Chrome Dev Summit 2019，你需要知道关于前端性能的内容都在这里
为新的Facebook.com重建我们的前端技术栈
Instagram.com网站性能优化之路：第一部分
『奶爸码农』从事互联网研发工作10+年，经历IBM、SAP、陆金所、携程等国内外IT公司，目前在美团负责餐饮相关大前端技术团队，定期分享关于大前端技术、投资理财、个人成长的思考与总结。