核心网页指标：测量和提升网页性能

你已经构建了一个快速的网站，但用户仍然抱怨加载缓慢或交互卡顿。由于核心网页指标不佳，搜索引擎也可能降低你的排名。这些指标——最大内容绘制（LCP）、首次输入延迟（FID）和累积布局偏移（CLS）——直接影响用户体验和SEO。在本指南中，我们将通过实际步骤向你展示如何测量和改进它们。

什么是核心网页指标？

核心网页指标是Google定义的一组指标，用于量化用户体验的关键方面：加载、交互性和视觉稳定性。它们是：

• 最大内容绘制（LCP）： 衡量加载性能。应在页面开始加载后的2.5秒内发生。
• 首次输入延迟（FID）： 衡量交互性。应小于100毫秒。
• 累积布局偏移（CLS）： 衡量视觉稳定性。应小于0.1。

这些指标是Google页面体验信号的一部分，可能影响你的搜索排名。

如何测量核心网页指标

你可以在实验室（合成测试）或现场（真实用户监控）中测量核心网页指标。两者各有其用。

实验室工具

• Lighthouse： 内置于Chrome DevTools中，可审计性能并提供LCP、CLS和总阻塞时间（TBT，FID的代理指标）的得分。
• PageSpeed Insights： 结合了实验室数据和来自Chrome用户体验报告（CrUX）的现场数据。
• WebPageTest： 提供自定义位置和设备的高级测试。

现场工具

• Chrome用户体验报告（CrUX）： 提供数百万网站的真实用户聚合数据。
• web-vitals库： 一个JavaScript库，用于从真实用户捕获指标并发送到你的分析工具。
• Search Console： 根据CrUX数据显示你网站的核心网页指标状态。

从实验室工具开始进行调试，然后用现场数据验证，以确保真实世界的性能。

改善最大内容绘制（LCP）

LCP衡量最大的内容元素（通常是主图或标题）何时变为可见。要改善LCP：

1. 优化图片： 压缩图片，使用WebP或AVIF等现代格式，并通过srcset提供响应式图片。
2. 预加载关键资源： 对关键图片、字体和样式表使用<link rel="preload">。
3. 减少服务器响应时间： 使用CDN，启用缓存，并优化后端性能。
4. 消除阻塞渲染的资源： 内联关键CSS，延迟非关键JavaScript，避免大型CSS文件。
5. 使用内容分发网络（CDN）： 从更靠近用户的位置提供资源。

对于图片优化，试试我们的图片压缩器，在不损失质量的情况下减小文件大小。

改善首次输入延迟（FID）

FID衡量从用户首次与页面交互到浏览器能够响应的时间。要改善FID：

1. 最小化JavaScript执行： 分解长任务，使用代码分割，并延迟非关键脚本。
2. 优化第三方脚本： 异步加载它们，或延迟到关键内容之后。
3. 使用Web Worker： 将繁重计算转移到工作线程。
4. 减少主线程工作： 避免大型同步脚本和过大的DOM。

Lighthouse的TBT指标等工具可以帮助你识别长任务。

改善累积布局偏移（CLS）

CLS衡量页面加载期间意外的布局偏移。要改善CLS：

1. 始终为图片和视频包含宽度和高度属性： 这可以预留空间并防止偏移。
2. 为广告和嵌入内容预留空间： 使用CSS aspect-ratio或固定尺寸。
3. 避免在现有内容上方插入内容： 除非是响应用户交互。
4. 使用CSS变换进行动画： 而不是触发布局的属性。
5. 预加载字体： 使用font-display: swap和预加载，避免不可见文本偏移。

核心网页指标阈值对比

实用优化工作流程

按照以下步骤改善核心网页指标：

1. 测量： 运行Lighthouse并在Search Console中检查现场数据。
2. 识别问题： 关注得分最差的指标。
3. 应用修复： 使用上述针对LCP、FID或CLS的技巧。
4. 再次测试： 重新运行审计以确认改进。
5. 监控： 使用web-vitals库随时间跟踪真实用户指标。

记住，性能优化是持续的过程。在添加功能时定期审计你的网站。

常见问题

什么是核心网页指标？

核心网页指标是三个指标——LCP、FID和CLS——分别衡量加载、交互性和视觉稳定性。Google将它们用作排名信号。

我应该多久检查一次核心网页指标？

在重大更改后检查，至少每月一次。使用实验室和现场数据来捕捉性能退化。

没有开发人员，我能改善核心网页指标吗？

一些修复，如图片压缩和向图片添加尺寸，可以由内容编辑完成。其他可能需要开发人员帮助。

准备好优化你的图片以获得更好的LCP了吗？试试我们免费的图片压缩器，减小文件大小并加速你的网站。