Core Web Vitals：测量并提升Web性能

你已经构建了一个快速的网站，但用户仍然抱怨速度慢。或者你的SEO排名在谷歌更新后下降了。罪魁祸首可能是Core Web Vitals——谷歌衡量用户体验的指标。在本指南中，你将了解它们是什么、如何准确测量它们，以及改善每一项的实用步骤。

什么是Core Web Vitals？

Core Web Vitals是三个特定的指标，量化了用户体验的关键方面：

• 最大内容绘制（LCP）：衡量加载性能。它标记了最大内容元素（图像、视频或文本块）变为可见的时间。目标是将LCP控制在2.5秒以内。
• 首次输入延迟（FID）：衡量交互性。它记录了从用户首次交互（例如点击链接）到浏览器响应的时间。目标是将FID控制在100毫秒以内。
• 累积布局偏移（CLS）：衡量视觉稳定性。它量化了加载过程中意外的布局偏移。目标是将CLS控制在0.1以内。

这些指标是谷歌页面体验信号的一部分，直接影响SEO。但更重要的是，它们反映了真实用户的挫败感——缓慢的加载、无响应的点击和跳动的内​​容。

如何测量Core Web Vitals

你无法改善你不测量的东西。有两种主要方法：实验室数据（合成测试）和现场数据（真实用户监控）。两者结合使用以获得完整的画面。

实验室工具

• Lighthouse：内置于Chrome DevTools中（F12 → Lighthouse标签）。它审计性能并提供LCP、FID（作为TBT）和CLS的分数。在隐身模式下运行以避免扩展影响结果。
• WebPageTest：高级工具，用于详细的瀑布分析和从多个位置进行测试。
• PageSpeed Insights：结合实验室和现场数据。如果可用，它会显示真实世界的CrUX数据。

现场工具

• Chrome用户体验报告（CrUX）：数百万网站的真实用户指标公开数据集。可通过PageSpeed Insights或BigQuery访问。
• Google Search Console：Core Web Vitals报告显示基于现场数据需要关注的URL组。
• web-vitals JavaScript库：添加到你的网站以收集自己的现场数据并发送到分析平台。

// 示例：使用web-vitals库
import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  // 替换为你的分析端点
  console.log(metric.name, metric.value);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

改善最大内容绘制（LCP）

LCP通常是最具挑战性的指标。它受服务器响应时间、资源加载和客户端渲染的影响。请遵循以下步骤：

1. 优化服务器响应：使用缓存（CDN、服务器端缓存），升级托管服务，并减少后端处理时间。
2. 优先加载关键资源：预加载LCP图像或字体。对关键资源使用<link rel="preload">。
3. 压缩图像：提供现代格式（WebP、AVIF）并在不损失质量的情况下压缩图像。像Image Compressor这样的工具可以帮助。
4. 消除阻塞渲染的资源：延迟非关键的CSS和JavaScript。内联关键CSS。
5. 使用CDN：在全球范围内分发内容以减少延迟。

改善首次输入延迟（FID）

FID衡量响应性。高FID意味着当用户尝试交互时主线程繁忙。要改善：

• 分解长任务：使用setTimeout或requestIdleCallback将JavaScript分成更小的块。
• 最小化主线程工作：移除未使用的JavaScript，延迟非关键脚本，并使用代码分割。
• 优化事件处理程序：避免在事件监听器中执行繁重的同步工作。
• 使用Web Worker：将昂贵的计算卸载到工作线程。

注意：FID将在2024年3月被Interaction to Next Paint（INP）取代。原则仍然相似——保持主线程空闲。

改善累积布局偏移（CLS）

CLS衡量意外的布局偏移。常见原因包括没有尺寸的图像、广告、嵌入内容和网络字体。通过以下方式修复它们：

• 始终为图像和视频设置宽度和高度属性：这可以预留空间并防止偏移。
• 为广告和嵌入内容预留空间：使用CSS aspect-ratio或固定大小的容器。
• 避免在现有内容上方插入内容：除非是响应用户交互。
• 使用font-display: swap并预加载字体：最小化字体交换偏移。

持续监控的工具和工作流程

性能不是一次性修复。设置监控以捕捉回归：

• 添加web-vitals库以将指标发送到你的分析平台。
• 在管道中使用Lighthouse CI，如果分数低于阈值则使构建失败。
• 定期检查Search Console的Core Web Vitals报告。

在开发过程中进行快速检查，请使用Chrome DevTools中的Lighthouse标签。如需更深入的分析，请尝试WebPageTest。

常见问题

什么是良好的LCP分数？

良好的LCP是2.5秒或更短。2.5到4秒之间的分数需要改进，超过4秒则较差。

我应该多久测量一次Core Web Vitals？

在重大更改后测量，并通过现场数据持续测量。实验室测试非常适合调试；现场数据反映真实用户体验。

改善Core Web Vitals真的会影响SEO吗？

是的，谷歌将页面体验作为排名信号，但内容相关性仍然是首要的。良好的Core Web Vitals也会提高用户参与度和转化率。

准备好优化你的图像以获得更好的LCP了吗？尝试我们的免费Image Compressor，在不牺牲质量的情况下减小文件大小。