1 基本操作介绍
1.1 入口
打开最新版本Google Chrome，F12一下弹出开发者页面，在顶部的导航栏选项选择Lighthouse选项（旧版本的浏览器是需要从应用商店下载Lighthouse插件的）
1.2 首页基本信息
从该页的英文字面意思可以知道，主要是生成一份性能检测报告
（PS：奈何本人英语见识短，而且开发者模式并没有中文版的，遇到不懂的只能谷歌翻译下）
2 生成报告分析
这里以公司官网为例，Desktop模式下的报告
2.1 总览
2.2 四大指标介绍
2.2.1 Performance（性能，6项统计）
First Contentful Paint（初始渲染时间）
该指标测量用户感知页面首要内容所需可见时间，对于不同平台首要内容都是不一样的，例如微博的首要内容就是标题，而购物网站的首要内容就是商品的图片
Speed Index（速度指标）
速度指标展示页面内容的渲染速度
Largest Contentful Paint（最大内容渲染时间）
该指标测量浏览器渲染最大内容（图片或文字）的时间
Time to Interactive（页面交互时间）
该页面所有内容都已经加载完成，指标测量页面交互所需时间
Total Blocking Time（初始渲染到页面交互总时间）
初始渲染和页面交互完成的总时间
Cumulative Layout Shift（累计布局偏移）
测量页面可见的并且偏移的元素
以上的6项指标值数都是越小越好
往下滑动可以看到还有Opportunities、Diagnostics两个部分，这两个部分会给你一些优化的提示和方法，点击Learn more，可以获取更详细的教程（PS: 是时候考验你的英语功底了，实在不行谷歌一键翻译也行）
关于Eliminate render-blocking resources 问题（冗余代码）的检测方法
快捷键 ctrl + shift + p打开开发者工具命令行，输入show coverage检测代码执行覆盖率
2.2.2 Accessibility（可访问度）
这一项主要是用来提升优化页面的可访问度
2.2.3 Best Practices（最佳实践）
这一项它提示我图片分辨率低、而且与原图比例不对应
2.2.4 SEO（搜索引擎优化）
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
