介绍 Lighthouse

正如我们在上一节中看到的，核心 Web 指标通过加载性能（最大内容绘制）、交互性（首次输入延迟）和视觉稳定性（累积布局偏移）关注用户体验的各个方面。

在本课中，我们将重点介绍如何通过使用名为 Lighthouse

Chrome 开发者工具。但是，有很多方法可以运行 Lighthouse。

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

让我们看看两个 Lighthouse 报告示例，以了解具有良好核心 Web 指标的网站和不具有良好核心 Web 指标的网站之间的区别。

优化示例 要查看 Lighthouse 的工作示例，我们将使用我们的主页.

1. https://nextjs.net.cn
2. 打开Chrome。
3. 在隐身窗口中，导航到 https://nextjs.net.cn。
4. 打开 DevTools 并点击 **Lighthouse** 选项卡。

点击 **生成报告**。

**注意**：在隐身窗口中运行报告非常重要，因为第三方插件会影响您的报告。 此外，广告拦截器可能会阻止脚本加载，这将导致审核不完整。考虑设置一个干净的 角色

来衡量性能。

这是一个示例报告

未优化示例

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

项目设置

这是一个基本的未优化应用程序，允许访问者执行两件事：搜索国家以检索其人口，以及点击按钮以阅读弹出模态窗口。此应用程序旨在模拟在大型应用程序上工作时的现实情况，在大型应用程序中，无法避免使用第三方库。

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

下载入门代码

运行生产构建

cd nextjs-lighthouse

要从 Lighthouse 获取准确的报告，您的应用程序应始终使用生产构建进行测试。要运行生产构建，请切换到项目目录 通过运行 `next build` 构建您的应用程序，并在 生产模式

npm run build && npm run start

下启动服务器，通过运行 `next start`。