0Pricing
Angular Academy · 课时

测量核心 Web 指标

跟踪并改善性能指标

测量核心 Web 指标 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

为什么重要网页指标很重要

Core Web Vitals 是 Google 以用户为中心的性能指标。它们量化了加载、交互能力和视觉稳定性，并会影响用户体验和搜索排名。

三个指标

这三个指标分别是 LCP（最大内容绘制）、CLS（累计布局偏移）和 INP（Interaction to Next Paint）。每个指标关注用户感知性能的不同方面。

LCP

LCP 衡量最大可见元素（主图、标题）完成渲染的时间。低于 2.5 秒属于良好。SSR 可以通过在初始 HTML 中交付这些内容来提供帮助。

CLS

CLS 衡量页面加载过程中意外发生的布局偏移。低于 0.1 属于良好。请为图片和广告预留空间，并避免在已有内容上方插入内容。

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

INP 衡量页面整个生命周期内对用户交互的响应能力，用来取代较早的 FID。低于 200 毫秒属于良好。主线程上的繁重 JS 会损害 INP。

SSR 如何改善重要网页指标

SSR 可以更早绘制内容，从而改善 LCP；通过尽早交付稳定的布局，也可以减少 CLS。增量水合通过减少初始交付的 JavaScript 来改善 INP。

实验室数据与真实用户数据

实验室数据来自受控环境中的 Lighthouse 等模拟工具。真实用户数据（CrUX、RUM）来自真实用户。请结合两者进行优化；搜索排名使用的是真实用户数据。

使用 Lighthouse 进行测量

在 Chrome DevTools 或持续集成环境中运行 Lighthouse，以获取实验室环境下的 LCP、CLS，以及可用于近似评估 INP 的总阻塞时间代理指标和可执行的诊断信息。

// npx lighthouse https://example.com --view

web-vitals 库

使用 web-vitals 库在浏览器中收集真实用户的重要网页指标，并将其发送到您的分析端点。

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

减少 JavaScript

更小的代码包可以改善 INP 和交互就绪时间。请使用路由级延迟加载、@defer、增量水合和摇树优化，减少交付的 JS。

迭代并验证

性能优化的过程是测量、修改、再次测量。启用 SSR、水合或 defer 后，请重新运行 Lighthouse，并持续数周观察真实用户数据的趋势，以确认确实取得了改善。

快速检查

检查您对 Core Web Vitals 的理解。

回顾

您学习了 Core Web Vitals（LCP、CLS、INP）、SSR 和增量水合如何改善这些指标、实验室数据与真实用户数据的区别，以及如何使用 Lighthouse 和 web-vitals 库进行测量，然后通过再次测量持续迭代。

常见问题解答

「测量核心 Web 指标」课时是免费的吗？

是的 — 「测量核心 Web 指标」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「测量核心 Web 指标」这节课中我会学到什么？

跟踪并改善性能指标 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「测量核心 Web 指标」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 什么是水合
  2. 启用完整水合
  3. 使用 @defer 进行增量水合
  4. 测量核心 Web 指标
← 返回 Angular Academy