Lighthouse 是什么

Lighthouse 是一种开源的自动化工具，用于提高网页质量。你可以在任何网页上运行它。它能够针对性能、可访问性、渐进式 Web 应用等进行审核。
你可以在 Chrome DevTools 中从命令行运行 Lighthouse，也可以作为 Node.js 模块运行。当你向 Lighthouse 提供了一个 URL 来进行审核时，它会针对该页面运行一系列审核，然后生成一个关于该页面执行情况的报告。这份报告可以作为如何改进页面的指标。每次审核都会产生一份参考文档，解释了这些审核为什么重要，以及如何解决等内容。

如何使用：

1.google 浏览器直接运行

2. 通过node 安装运行

npm install -g lighthouse

lighthouse <url>

例如

lighthouse http://localhost:4200/travel/landing

Lighthouse 默认生成 HTML 格式的报告文件。你可以通过添加控制选项来控制输出的格式。

报告能够以 HTML 或 JSON 格式显示。

Lighthouse 报告和优化流程

Lighthouse生成的是一个报告，会给你的页面跑出一个分数来。分别是页面性能（performance）、Progressive（渐进式 Web 应用）、Accessibility（可访问性）、Best Practices（最佳实践）、SEO 五项指标的跑分

Overview

Performance(页面性能)

Metrics

Name	Desc
1. First Contentful Paint (FCP):	FCP 测量在用户导航到你的页面后浏览器呈现第一段 DOM 内容所需的时间，也就是页面第一个内容出现的时间。该指标权重为 10%
2.Time to Interactive (TTI)	TTI 衡量一个页面需要多长时间才能完全交互。主要影响因素就是页面渲染速度和 JS 阻塞时间。该指标权重为 10%
3.Speed Index (SI)	速度指数衡量页面加载期间内容的视觉显示速度。它要求的是页面的渲染过程应该是渐进的，内容一点点出现，而不是开始一段时间一直是空白，然后全部内容一下出现。这个指标跟页面渲染时间和渲染方式有关，如果页面渲染时间很短，页面一下就出来了，那它的得分也会很高。该指标权重为 10%
4.Total Blocking Time (TBT)	可以理解为 JS 的阻塞时间，该指标的计算规则就是 LCP 到 TTI(可交互时间) 之间，所有执行耗时大于 50ms 的 Task(宏任务)，大于 50ms 那部分时间的总和。比如下图中的 Task 耗时 95.52ms，那这个 Task 就贡献了 45.52ms 的 TBT。该指标要求我们所有的 JS 任务(宏任务，一般是函数)执行时间不要大于 50 ms。该指标权重为 30%
5.Largest Contentful Paint (LCP)	LCP 测量视口中最大的内容元素何时呈现到屏幕上(通过录制页面 Performance 可以看到最大的内容元素是什么)。这大约是页面的主要内容对用户可见的时间。该指标权重为 25%
6.Cumulative Layout Shift (CLS)	指网页布局在加载期间的偏移量，普遍用于测量视觉稳定性。得分范围是0－1，其中0表示没有偏移，1表示最大偏移。要求我们在渲染页面过程中，不要频繁发生内容块的偏移。该指标权重为 15%

Opportunities

Desc	Refer	Resolve detail
1.Remove unused JavaScript	web.dev/unused-java…	Code Splitting <>brUnused Code Elimination: Terser and Closure Compiler Unused Imported Code 引入webpack，进行代码分割
2. Use HTTP/2
3.Eliminate render-blocking resources	web.dev/render-bloc…
4.Preconnect to required origins	[web.dev/uses-rel-pr…]	Lighthouse 报告的“机会”部分列出了所有尚未使用 `<link rel=preconnect>` 对获取请求进行优先级排序的关键请求：

5.Serve images in next-gen formats	[web.dev/uses-webp-i…]	WebP 格式的图片www.gaitubao.com/jpg-gif-png…

Diagnostics

Desc	Refer	Resolve detail
1. Serve static assets with an efficient cache policy	web.dev/uses-long-c…	CDN, Nginx
2. Ensure text remains visible during webfont load	[web.dev/font-displa…]

3. Image elements do not have explicit width and height	web.dev/optimize-cl…

4. Registers an unload listener	web.dev/bfcache/?ut…
Avoid enormous network payloads	web.dev/total-byte-…｜
｜Minimize main-thread work	https://web.dev/total-byte-weight/
Reduce JavaScript execution time	https://web.dev/bootup-time
Reduce the impact of third-party code	web.dev/third-party…
Keep request counts low and transfer sizes small	web.dev/resource-su…

Accessibility (可访问性)

Desc	Refer	Resolve detail
1.Image elements do not have `[alt]` attributes	web.dev/image-alt/?…
2.Form elements do not have associated labels	web.dev/label/?utm_…

3.	web.dev/meta-viewpo…

4.	web.dev/html-lang-v…

Best Practices（最佳实践）

Desc	Refer
1.Does not use HTTPS 1 insecure request found	web.dev/is-on-https…
2.Includes front-end JavaScript libraries with known security vulnerabilities 1 vulnerability detected	web.dev/no-vulnerab…
3.Browser errors were logged to the console	web.dev/errors-in-c…
4.Missing source maps for large first-party JavaScript	developers.google.com/web/tools/c…