Lighthouse 简介
正如我们在前一节所见，核心网页指标 (Core Web Vitals) 通过加载性能 (Largest Contentful Paint)、交互性 (First Input Delay) 和视觉稳定性 (Cumulative Layout Shift) 来关注用户体验的各个方面。
本课程将重点介绍如何通过名为 Lighthouse 的模拟环境来测量核心网页指标。
注意：本课程我们将使用 Chrome 开发者工具，但运行 Lighthouse 还有多种方式。
Lighthouse 的工作原理是对提供的 URL 运行一系列审核，基于这些审核生成页面性能报告。如果存在需要改进的领域，报告会提供优化建议。
让我们通过两个 Lighthouse 报告示例，观察核心网页指标健康与不健康网站的区别。
优化示例
要了解 Lighthouse 的工作方式，我们将以 Next.js 官网 为例：
- 打开 Chrome 浏览器
- 在无痕窗口中访问
https://nextjs.org - 打开开发者工具，点击 Lighthouse 标签页
- 点击 生成报告
报告生成过程通常不超过 60 秒。
重要提示：务必在无痕窗口中运行报告，因为第三方插件会影响结果。此外，广告拦截器可能阻止脚本加载，导致审核不完整。建议设置干净的 用户角色 来测量性能。
示例报告如下：
未优化示例
本教程中，我们创建了一个未做任何优化的应用作为对照案例。
项目设置
这是一个基础未优化的应用，允许访客：1) 搜索国家获取人口数据；2) 点击按钮阅读弹窗内容。该应用模拟了实际开发中无法避免使用第三方库的大型应用场景。
下载初始代码
运行生产构建
为获取准确的 Lighthouse 报告，应始终测试生产环境构建。进入项目目录运行生产构建：
执行 next build 构建应用，并通过 next start 以生产模式启动服务器：
现在使用 Chrome 开发者工具运行 Lighthouse 报告。生成报告后，我们就可以开始优化网站并改进核心指标了。
扩展阅读
- Google Chrome: Lighthouse 评分计算器