性能检测工具之LightHouse【前端性能优化】

前言

谷歌Lighthouse工具用于评估网页性能和用户体验的开源工具。它通过模拟真实用户的访问行为，对网页进行全面的性能分析和优化建议。Lighthouse工具可以帮助开发者了解网页的加载速度、可访问性、最佳实践等方面的情况，并提供详细的报告和建议，帮助开发者改进网页的性能和用户体验

Chrome开发者工具的LightHouse面板，可以对项目前端的一些性能进行检测评分，LightHouse也会给出一些优化建议，这样就可以不断对项目性能优化，提高用户体验

具体对5个方面的性能进行分析 Performance性能、 Accessibility可访问性、Best Practice最佳实践、SEO搜索引擎优化、Pregressive Web App渐进式应用

具体分析过程

点击开启分析网页加载情况后，等待LightHous加载网页，分析性能

Performance

指标得分和性能得分根据以下范围着色：

• 0 - 49（红色）：差
• 50 到 89（橙色）：需要改进
• 90 到 100（绿色）：良好

为了提供良好的用户体验，网站应努力获得较高的得分 (90-100)。100 分的“完美”分数很难实现，而且不符合预期。例如，假设一个分数为 99 到 100，所需的指标改进幅度与将 90 到 94 的分数差不多。

 Performance 性能有 FCP、LCP、TBT、CLS、Speed Index 5个性能指标，并相应的给出具体优化方案

各性能指标含义

FCP，首次有内容绘制。页面首次绘制出任何文本、图像或其他可视元素的时间点，用户可以看到页面有一些可见的内容，在 FCP 之前页面处于白屏，没有实际内容。“内容”是指文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。

LCP，页面中最大的可见内容元素，绘制完成并可见的时间点，通常是页面上最大的图像或文本块。

TBT，页面加载过程中，主线程被长时间任务(通常是 JavaScript执行)阻塞的总时间。

CLS，页面整个生命周期内发生的所有意外布局偏移的累计分数。（累计布局偏移分数 = 影响比例 * 距离比例），CLS 用于衡量在网页的整个生命周期内发生的每次意外布局偏移的最大突发布局偏移分数，每当可见元素的位置从一个渲染的帧更改为下一个渲染帧时，都会发生布局偏移。

Speed Index，速度指数用于衡量内容在网页加载期间的视觉显示速度。 Lighthouse 首先捕获在浏览器中加载网页的视频，并计算帧之间的视觉进度。

各性能指标得分

FCP得分是网页在真实网站的 FCP 时间与 FCP 时间之间的比较（根据 HTTP 归档中的数据得出）。例如，在第 99 百分位中执行的网站会在大约 1.2 秒内呈现 FCP。如果您网站的 FCP 为 1.2 秒，则 FCP 得分为 99。

TBT得分是网页的 TBT 时间和数百万个真实网站在在移动设备上加载时的比较结果。

LCP，Lighthouse 从 Chrome 的跟踪工具中提取 LCP 数据。

CLS：为了提供良好的用户体验，网站应努力使 CLS 得分不超过 0.1。为了确保您的大多数用户都能达到此目标，比较好的做法是网页加载的第 75 个百分位数（按移动设备和桌面设备细分）。

速度指数得分根据 HTTP Archive 中的数据将网页的速度索引与真实网站的速度指数进行了比较

显示与所选指标相关的评估结果和优化方案

比如这里我选了FCP，他会给你相应的优化方案，如图，启用文本压缩，压缩js等优化方式， 你也可以选择LCP，TBT，CLS，他都会分别给你提出一些优化方法的 

Accessibility可访问性，无障碍

Lighthouse 无障碍功能得分是所有无障碍功能审核的加权平均值。加权基于 Axe 用户影响评估。 

题外话：不知道为啥，重新开启lightHouse突然变成中文的了

Best Practice最佳实践

它会给你一些优化建议 

SEO搜索引擎优化

Pregressive Web App 渐进式Web应用

 参考 https://web.dev/articles/fcp?hl=zh-cn

总结

Chrome的LightHouse面板，可以对项目前端的一些性能进行检测评分，也会给出一些优化建议

具体对5个方面的性能进行分析，Performance性能、 Accessibility可访问性、Best Practice最佳实践、SEO搜索引擎优化、Pregressive Web App离线应用