CWV救星Chrome DevTools Performance Insights
工作中接触过优化网页优化体验的同学都知道谷歌Chrome浏览器的开发工具DevTools。一些非原生的APP和小程序也需要进行这些优化。谷歌的Chrome浏览器每过一段时间就会推出一些实验功能。今年我们看到的最大的变化可能就是在DevTools中新推出的Performance Insights。
讲到这里你就已经在Chrome中可以按下电脑的F12键开始探索了。也可以看看Chrome团队的新加坡小姐姐的介绍视频。如果想多听小马啰嗦几句请往下读。
Performance Insights与Performance工具
在过去，我们进行CWV（Core Web Vitals）诊断的时候，都是通过DevTools中的Performance标签提供的工具的。现在这个标签的工具依然存在，极诣曾经在去年介绍CWV的LCP优化时介绍过用法。当时是基于Chrome Build88版本，现在经过了一定的更新迭代，界面虽然有些不同，但还是可以正常且有效使用。
Performance Insights的功能更加简洁，它是面向治疗CWV问题的工具。
开始使用Performance Insights之前
在使用Performance Insights之前我们需要做几件事：
- 使用incognito模式，关闭会影响速度的Chrome插件。
- 选定好设备。通常来说，我们更关心手机环境下的CWV。
- 使用Throttling功能，调整CPU和网络情况。
- 禁用缓存。
- 进行设定，简化界面。
最后一步准备是在工具的右上角打开菜单，把不需要的那些模块勾掉即可。
准备好了以后我们便可以开始跑数据了。
查看Performance Insights测试结果
跑完之后我们可以得到上图这样的结果。这里很清晰了，有几个看点小马要讲一下。
- 如图所示，三个关键时间点中FCP先于DCL发生，然后是LCP。我们在两年前的之前《网页提速，你的小抄来了》一文中曾经介绍过“DOMContentLoaded代表着DOM和CSSOM都已经就绪，所有阻塞的JS资源都已经执行完毕。”现代浏览器可以不等DOMContentLoaded完成先画上一些内容，这可以增进用户浏览体验。
- 当我们鼠标移动到右边序列中的Largest Contentful Paint后，我们可以看到页面中会指出具体的Largest Content的DOM元素。这可以帮助我们前端小伙伴锁定问题元素。
- 上面的例子中并没有出现Layout Shift，因此CLS（Cumulative Layout Shift）为0。如果出现Layout Shift，你可以根据具体影响的元素来排查，通常是未事先定义长宽大小。然后前端小伙伴就懂了。👌
- 至于CWV中的FID（First Input Delay），我们可以通过TTI（Time to Interactive）这个指标来评估，因为FID需要用户进行Input。TTI和FID的关系如下图所示。一个优秀的FID的容忍度是100毫秒，相当低。实践中我们可以用TTI的时间减去FCP或者LCP的时间，在这段时间内用户能够看到内容，但是用户的输入浏览器尚无法响应。要缩短TTI的还是要注意消除阻塞资源的影响和那些来自第三方引入脚本的Long Tasks。
在每个Insights问题点点击后可以查看详情，一些时候还可以锁定问题代码片段。这个的确要方便许多。你还可以把你的测试Export出来给前端小哥。记得给那位最Senior的，Junior小哥只管画出来，不管性能的。
好了以上就是小马对Performance Insights这个工具的介绍，有收获吗？祝你的网站/APP也有优秀的用户体验。
