章节23

Lighthouse 介绍

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

在本课程中，我们将重点介绍如何通过使用名为 Lighthouse 的模拟环境来衡量核心网页指标。

注意：本课程我们将使用 Chrome Dev Tools。但是，有许多方法可以运行 Lighthouse。

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

让我们看两个 Lighthouse 报告的例子，看看一个具有健康核心网页指标的网站和一个没有的网站之间的区别。

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

这将运行一份报告，耗时应少于 60 秒。

注意：在无痕窗口中运行报告很重要，因为第三方插件会影响您的报告。

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

以下是一份示例报告

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

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

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 DevTools 运行一份 Lighthouse 报告。报告完成后，我们将开始优化网站并改善核心指标。

您已完成本章23