一、Lighthouse 介绍
Lighthouse 是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。
Lighthouse 主要监测指标
| 指标 | 说明 |
|---|---|
| 性能指标（Performance） | 页面的性能评分，包括：首次内容绘制（First Contentful Paint）、首次有效绘制（First Meaningful Paint）、首次 CPU 空闲（First CPU Idle）、可交互时间（Time to Interactive）、速度指标（Speed Index）、输入延迟估值（Estimated Input LFirst Contentful Patency）。 |
| 可访问性（Accessibility） | 监测页面的可访问性与优化建议。 Accessibility 辅助功能 : 无障碍设计，也称为网站可达性。是指所创建的网站对所有用户都可用/可访问，不管用户是以何种方式访问网站。 |
| 最佳实践（Best Practice） | 页面是否符合最佳实践 : 实践性检测，如网页安全性，如是否开启 HTTPS、网页存在的漏洞等。 |
| 搜索引擎优化（SEO） | SEO（Search Engine Optimization）：搜索引擎优化检测，如网页 title 是否符合搜索引擎的优化标准, 页面是否针对搜索引擎结果排名进行了优化。 |
| PWA（Progressive Web App） | 验证 PWA 的各个方面的性能情况。 |
Lighthouse 评分说明
经过检测，Lighthouse 会对上述五个维度给出一个的评估得分，分值范围0-100，主要分为三个档次，分别用红黄绿三种颜色代表：
- 0 – 49（慢）：红色
- 50 – 89（平均值）： 橙色
- 90 – 100（快）： 绿色
如果没有分数或得分为 0，则很有可能是检测过程发生了错误，比如网络连接状况异常等；如果得分能达到 90 分以上（绿色），则说明网站应用在该方面的评估表现符合最佳实践。
Lighthouse 的三种使用方式
- 使用 chrome 调试面板中的 LightHouse (推荐)
- 使用 chrome 插件扩展
- 通过命令行使用 LightHouse
| #### First Contentful Paint (FCP) | 首次内容绘制的时间，首次有内容的绘制标志着第一个文本或图像被绘制的时间（从进入页面到首次有 DOM 内容绘制所用的时间, 内容必须是文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本。），通常与白屏问题相关。这是用户第一次开始看到页面内容，但仅仅有内容，并不意味着它是有用的内容（例如 Header、导航栏等）你的FCP分数是当前页面的FCP时间和真实网站的FCP时间的比较，基于HTTP Archive的数据。例如，执行99%的站点在大约1.2秒内渲染FCP。如果你的网站的FCP是1.2秒，你的FCP得分是99。 |
|---|---|
| #### Time to Interactive（TTI） | 表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务（Long Task）完成的时间, 并且在随后的 5 秒内网络和主线程是空闲的。TTI 指标 （秒）颜色编码0–3.8绿色（快速）3.9–7.3橙色（中等超过 7.3红色（慢）##### 速度指标![]( "产研中心 > 性能检测之Lighthouse > image2023-10-18_11-58-16.png") |
| #### LCP（largest contentful paint） | 最大内容绘制的时间，度量视口中最大的内容元素何时呈现到屏幕上。这近似于页面的主要内容对用户可见。在 LCP 之前，lighthouse 还使用过 FMP（First Meaningful Paint，首次有意义内容绘制）指标。FMP 是根据布局对象（layout objects）变化最大的时刻来决定的。但是这个指标计算比较复杂，通常和具体的页面以及浏览器的实现相关，这也会导致计算不够准确。比如，用户在某个时刻绘制#### Interactive了大量的小图标。 ![]( "产研中心 > 性能检测之Lighthouse > image2023-10-18_14-41-41.png") |
| #### Total Block Time（TBT） | 阻塞总时间，测量的是 FCP 与 TTI 之间的时间间隔。这个指标反映了用户的交互是否能及时响应。 如果主线程执行了长任务会导致用户的交互无法及时响应。当主线执行的任务所需的时长超过 50ms，我们就认为这是一个长任务（long task）。假设在主线程上执行了一系列的任务，每个长任务的阻塞时间等于执行时间减去 50 ms，最后可以统计得到一个总的阻塞时间。例如，如果Lighthouse检测到一个70毫秒长的任务，阻塞部分将是20毫秒。 ![]( "产研中心 > 性能检测之Lighthouse > image2023-10-18_12-5-36.png") |
| #### Cumulative Layout Shift（CLS） | 累计布局位移（页面抖动），这个指标是通过比较单个元素在帧与帧之间的位置偏移来计算，计算公式是cls = impact fraction * distance fraction 。在以下例子中，文本块在两帧之间的 impact fraction 是红色框部分，占视窗 75%；distance fraction 是蓝色箭头的距离，占视窗 25%；那么最终的分数是 0.75 * 0.25 = 0.1875 。 CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。为了提供良好的用户体验，站点应该努力使CLS分数达到0.1或更低。。![]( "产研中心 > 性能检测之Lighthouse > image2023-10-18_11-42-17.png")![]( "产研中心 > 性能检测之Lighthouse > image2023-10-18_12-14-3.png") |
| #### SI（speed index） | 速度指数，度量页面加载期间内容在视觉上显示的速度。Lighthouse首先捕捉页面在浏览器中加载的视频，并计算帧之间的视觉进展。然后使用Speedline Node.js模块生成速度索引得分；这个指标反映了网页内容填充的速度。页面解析渲染过程中，资源的加载和主线程执行的任务会影响到速度指数的结果。一个表示页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。 ![]( "产研中心 > 性能检测之Lighthouse > image2023-10-18_12-2-9.png") |
二、Lighthouse 使用过程
生成性能报告：
-
Device
- Mobile：设置为Mobile将更改用户代理字符串并模拟移动视口。
- Desktop：设置为桌面几乎就是禁用移动更改。
-
Categories
- Performance：性能
- Progressive Web App：渐进式web应用
- Best Practies：最佳实践
- Accessibility：无障碍
- SEO：Search Engine Optimization 的缩写，搜索引擎优化
什么是最大内容绘制 (LCP) 以及如何有效地优化 - 闪电博 (wbolt.com)
几个网站检测对比
LCP的优化：
1。 压缩和优化图片：使用适当的图像格式，并将其压缩到合适的大小。可以使用工具如ImageOptim或Kraken等。
2。 使用CDN（内容分发网络）：通过将网页内容分发到全球各地的服务器，可以减少用户与服务器之间的距离，提高页面加载速度。
3。 延迟加载图片和视频：只加载用户视口内的图片和视频，而不是全部加载。可以使用懒加载技术或Intersection Observer API实现。
4。 使用浏览器缓存：将静态资源（如CSS、JavaScript文件）设置为可缓存，这样在用户再次访问页面时可以直接从缓存中读取资源。
5。 延迟执行JavaScript：将关键的JavaScript代码移到页面底部，或使用异步加载脚本，以避免阻塞页面渲染。
6。 优化字体加载：避免使用过多的字体和字体图标，选择合适的字体，将字体文件压缩并使用字体预加载。
7。 删除不必要的插件和脚本：只使用必要的插件和脚本，并定期检查和删除不再使用的内容。
8。 减少重定向：减少页面重定向，以减少浏览器的额外请求次数。
9。 优化服务器响应时间：通过使用更快的服务器、压缩响应、使用缓存等方式，减少服务器响应时间。
10。 使用代码优化工具：使用工具如Webpack、Gulp或Grunt等可以优化和压缩代码，减小文件大小。
