这些时间，都可以点击图中红框切换展示方式，会附上对应的时间解释，然后可以点击 Learn more 来查看详细的指标介绍。在文档中，每一项指标都会明确的分为三个部分：为什么说此审查非常重要；如何通过此审查；如何实现此审查；
性能指标优化建议解读性能建议主要分为3类， Opportunities 可优化项、手动诊断项、通过的审查项。本次的例子如下图：
图中的每一项都可以展开来看明细解释，其中：
可优化项有2个建议：
延迟会阻塞渲染的资源加载，这里是一个 navfoot.6bf68af7.css
延迟视口外的图片加载，这里列举了不必要加载的图片(和我上文提的优化建议一致，哈哈)
这项里面的内容指的是LightHouse发现的一些可以直接优化的点，你可以对应这些点来进行优化。
手动诊断项有6个建议：
最小化主线程工作
减少JavaScript执行时间
避免DOM太大
通过有效的缓存策略缓存一些静态资源
避免链接关键请求
保持低请求数量和小传输大小
这些项目表示LightHouse并不能替你决定当前是好是坏，但是把详情列出来，由你手动排查每个项目的情况
通过的审查项
这里列出的都是做的好的地方，本文例子共有16条，不过即使做的好，依然值得我们进去仔细看一下，因为像所有条目一样，这里的每个条目也有一个showmore，我们可以点进去仔细学习背后的知识和原理！
Accessibility辅助功能辅助功能指的是那些可能超出"普通"用户范围之外的用户的体验，他们以不同于你期望的方式访问你的网页或进行交互，本文的例子建议如下图：
辅助功能类别测试屏幕阅读器的能力和其他辅助技术是否能在页面中正常工作。例如：按元素来使用属性，标签使用是否规范，img 标签是否缺少 alt 属性，可辨别的元素命名等等。这一项我们不展开讲，但是还是建议大家按照审计建议修改一下网页。
其他几项，本文的例子最佳实践评分挺高的，而例子不支持PWA，也不需要考虑SEO，这里就不展开说明了，有对应需求的可以自己详细看看即可。
总结最后总结一下，我们利用Chrome Dev Tools 进行页面性能分析有以下指标可以参考：
从网络面板分析
从性能面板分析
从Memory面板等分析内存泄露
用Audits工具分析
而这些分析方法，本文都详细写了。可以认真看看～
姊妹篇推荐前端性能优化之自定义性能指标及上报方法详解
最后欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个有专业的技术人...