Frontend Academy · 课时

核心 Web 指标：LCP、FID、CLS

了解 Largest Contentful Paint、First Input Delay 和 Cumulative Layout Shift 的衡量内容，以及 Google 将它们用作排名信号的原因。

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

为什么性能很重要

加载缓慢的页面会失去用户。Google 已将性能作为排名信号：核心网页指标得分较差的网站在搜索结果中的排名会更低。除了 SEO 之外，每延迟 100 毫秒，转化率和参与度都会出现可测量的下降。

三项核心网页指标

Google 会衡量三项用户体验指标：LCP（加载速度）、FID（交互性）和 CLS（视觉稳定性）。每项指标都有“良好”“需要改进”和“较差”三个阈值。

最大内容绘制（LCP）

LCP 衡量最大的可见内容元素（图片、视频封面或文本块）完成渲染的时间。良好：低于 2.5 秒。较差：超过 4 秒。您可以通过预加载主视觉图片、减少阻塞渲染的资源，以及使用快速 CDN 来优化它。

首次输入延迟（FID）与 INP

FID 衡量用户首次交互（点击或轻触）与浏览器作出响应之间的延迟。良好：低于 100 毫秒。2024 年，FID 被 Interaction to Next Paint (INP) 取代；INP 衡量所有交互，而不只是第一次交互。

累积布局偏移 (CLS)

CLS 用于衡量页面加载期间意外发生的布局偏移。良好：低于 0.1。较差：高于 0.25。其原因包括未设置尺寸的图片、延迟加载的字体，以及首次绘制后注入的广告。

在浏览器中测量 CWV

使用 web-vitals 软件包捕获真实用户指标，并将其发送到您的分析接口。

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

onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));

function sendToAnalytics({ name, value, id }) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ name, value, id }),
    keepalive: true
  });
}

修复 LCP：预加载首屏主图

告知浏览器尽早下载首屏主图，在解析其余 HTML 之前完成。

<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

修复 CLS：预留空间

始终为图片和嵌入内容设置 width 和 height，这样浏览器就能在资源到达前预留空间。使用 aspect-ratio CSS 为响应式容器设置宽高比。

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">

修复 INP：拆分长任务

较长的 JavaScript 任务会阻塞主线程，延迟对点击的响应。使用 scheduler.yield() 或 setTimeout 将工作拆分为多个小块，这样浏览器就能绘制页面并响应输入。

async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
  }
}

实验室数据与现场数据

实验室数据（Lighthouse）是在受控环境中进行的模拟测试。现场数据（CrUX、RUM）收集自真实用户使用的真实设备。对于搜索引擎优化排名，现场数据才是事实依据。

性能预算

设置明确的限制，例如：LCP 低于 2 秒，JavaScript 代码包低于 200KB。在持续集成中使用 Lighthouse CI 或 @bundle-analyzer 强制执行这些限制，让性能退化的构建失败。

快速检查

哪个核心网页指标用于衡量页面加载期间意外发生的视觉跳动？

回顾：核心网页指标

LCP：最大元素的加载速度，目标低于 2.5 秒。INP（以前称为 FID）：响应速度，目标低于 200 毫秒。CLS：视觉稳定性，目标低于 0.1。在生产环境中使用 web-vitals 软件包进行测量；在持续集成中使用 Lighthouse。搜索引擎优化由现场数据驱动，而不是实验室数据。

常见问题解答

「核心 Web 指标：LCP、FID、CLS」课时是免费的吗？

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

「核心 Web 指标：LCP、FID、CLS」这节课中我会学到什么？

了解 Largest Contentful Paint、First Input Delay 和 Cumulative Layout Shift 的衡量内容，以及 Google 将它们用作排名信号的原因。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「核心 Web 指标：LCP、FID、CLS」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy