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

总结

Lighthouse 6.0的能力越来越强大，其性能分析报表对于页面性能诊断和优化始终能够提供很好的建设意见。这次新增的性能指标能够更好地反映真实用户的使用情况，赶紧尝试起来吧~~

-End-

推荐阅读

Chrome Dev Summit 2019，你需要知道关于前端性能的内容都在这里

为新的Facebook.com重建我们的前端技术栈

Instagram.com网站性能优化之路：第一部分

『奶爸码农』从事互联网研发工作10+年，经历IBM、SAP、陆金所、携程等国内外IT公司，目前在美团负责餐饮相关大前端技术团队，定期分享关于大前端技术、投资理财、个人成长的思考与总结。