一. 用途
Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。只要为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面的性能报告。
二. 安装步骤
三种安装方式
2.1 Chrome扩展程序
2.2 Chrome Dev Tools
2.3 命令行node
1. 安装命令：# 注意：Lighthouse需要 Node 10 LTS (10.13) 或更高的版本.
npm install -g lighthouse
2. 运行Lighthouse：
lighthouse <url>
3. 以百度为例，输入下面的命令即可：
lighthouse https://www.baidu.com/
完成后，可以查看HTML报告
Performance 性能,性能检测，如网页的加载速度、响应时间等
accessibility 无障碍使用
Best Practice 用户体验
SEO 优化
0 to 49 (red): Poor
50 to 89 (orange): Needs Improvement
90 to 100 (green): Good
三. 报告分析
- **Performance 性能检测，如网页的加载速度、响应时间等
- First Contentful Paint：首次内容绘制时间。
- Speed Index：速度指数，是一个页面加载性能指标，明显的页面填充的速度，此指标的分数越低越好。
- Largest Contentful Paint:（最大内容渲染时间）LCP是一个页面加载时长的技术指标，用于表示当前页面中最重要/占比最大的内容显示出来的时间点。不同于First Contentful Paint，FCP代表的是第一次页面内容渲染的时间点，LCP是FCP的一个重要的补充，它可以代表当前页面主要内容展示的时间。LCP低于2.5s则表示页面加载速度优良。
-
Time to Interactive：可互动时间，页面中的大多数网络资源完成加载并且
CPU在很长一段时间都很空闲的所需的时间。此时可以预期cpu非常空闲，可以及时的处理用户的交互操作。 - Total Blocking Time:（累积阻塞时长）TBT是一个衡量用户事件响应的指标。TBT会统计在FCP和TTI时间之间，主线程被阻塞的时间总和。当主线程被阻塞超过50ms导致用户事件无法响应，这样的阻塞时长就会被统计到TBT中。TBT越小说明页面能够更好的快速响应用户事件。
- Cumulative Layout Shift:（累积布局变化量）CLS是一个衡量页面内容是否稳定的指标，CLS会将页面加载过程中非预期的页面布局的累积变动。CLS的分数越低，表明页面的布局稳定性越高，通常低于0.1表示页面稳定性良好。
- Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是指所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。
Background and foreground colors do not have a sufficient contrast ratio.
这个意思就是某处文字背景色和文字颜色对比度不够，对于视障用户可能不好区分。
- Best Practices 最佳实践 : 实践性检测，如网页安全性，如是否开启HTTPS、网页存在的漏洞等
html element does not have a [lang] attribute
搜索引擎在索引网站内容时也需要知道网站适用的语言,从而更好地为用户返回搜索结果
改为：
<html lang="zh">
当页面链接至使用 target="_blank" 的另一个页面时，两个页面将在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript，当前页面性能可能会受影响。
另外，target="_blank" 也有一个安全漏洞。新的页面可以通过 window.opener 访问旧的窗口对象，甚至可以使用 window.opener.location = newURL 将旧页面导航至不同的网址。
当设置rel="noopener"时chrome会在独立的进程中打开新页面,同时会阻止window.opener，因此不存在跨窗口访问。
<a target="_blank" rel="noopener" href="https://xxx.com">
- SEO 搜索优化
SEO（Search Engine Optimization）：搜索引擎优化检测，如网页title是否符合搜索引擎的优化标准等
Document does not have a meta description
<meta name=”description” content=”leepin”>
四.实战
优化后
这是 Lighthouse 目的：它能识别和修复，影响我们网站的性能、可访问性和用户体验的常见问题。
