章节23

介绍 Lighthouse

正如我们在上一节中看到的，Core Web Vitals 侧重于用户体验的各个方面，包括加载性能（最大内容绘制）、交互性（首次输入延迟）和视觉稳定性（累积布局偏移）。

在本课程中，我们将重点介绍如何通过使用名为 Lighthouse 的模拟环境来衡量 Core Web Vitals。

注意：在本课程中，我们将使用 Chrome 开发者工具。但是，有很多方法可以运行 Lighthouse。

Lighthouse 的工作原理是对提供的 URL 运行一系列审核。根据这些审核，它会生成一份关于页面性能的报告。如果存在需要改进的方面，报告将提供关于如何改进的见解。

让我们看看 Lighthouse 报告的两个示例，以了解 Core Web Vitals 健康的网站和不健康的网站之间的区别。

为了了解 Lighthouse 如何工作，我们将使用我们的主页。

这将运行一个报告，该报告应在 60 秒内完成。

注意：在隐身窗口中运行报告非常重要，因为第三方插件会影响您的报告。

此外，广告拦截器可能会阻止脚本加载，这将导致审核不完整。考虑设置一个干净的 persona 来衡量性能。

这是一个示例报告

为了本教程的目的，我们创建了一个没有任何优化的应用程序。

这是一个基本的未优化应用程序，允许访问者做两件事：搜索一个国家以检索其人口，并单击一个按钮以阅读弹出式模态框。此应用程序旨在模仿在大型应用程序上工作的现实情况，在这些应用程序中，第三方库的使用是不可避免的。

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

为了从 Lighthouse 获得准确的报告，您的应用程序应始终使用生产版本进行测试。要运行生产版本，请切换到项目目录

cd nextjs-lighthouse

通过运行 next build 构建您的应用程序，并通过运行 next start 在生产模式下启动服务器。

npm run build && npm run start

让我们使用 Chrome 开发者工具运行 Lighthouse 报告。报告完成后，让我们开始优化网站并改进指标。

您已完成本章23