Core Web Vitals：测量与优化以提升网页性能

为什么 Core Web Vitals 很重要

你精心打造了一个漂亮的网站，但用户却因为感觉太慢而纷纷离开。Core Web Vitals 是 Google 用来衡量真实用户体验的指标：最大内容绘制 (LCP)、首次输入延迟 (FID) 和 累积布局偏移 (CLS)。它们会影响搜索排名，更重要的是，它们决定了访客是否愿意停留。本指南将教你如何测量和优化这些指标。

理解三大指标

每个指标分别反映了加载、交互性和视觉稳定性的不同方面。

注意：FID 将在 2024 年被 Interaction to Next Paint (INP) 取代，但优化原则仍然相似。

如何测量 Core Web Vitals

你需要实验室数据和现场数据。实验室工具模拟条件；现场数据反映真实用户。

1. Chrome DevTools Lighthouse：在 Lighthouse 标签页中运行审核。它提供实验室分数和优化机会。
2. PageSpeed Insights：输入你的 URL 以查看来自 Chrome 用户体验报告 (CrUX) 的现场数据和实验室建议。
3. Search Console：检查 Core Web Vitals 报告以获取分组级别的现场数据。
4. Web Vitals JavaScript 库：将 web-vitals 添加到你的网站以收集真实用户指标。

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

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

利用这些数据来识别模式并确定修复优先级。

优化最大内容绘制 (LCP)

LCP 通常是最具影响力的指标。优化以下方面：

• 优化图片：压缩图片，使用 WebP 或 AVIF，并提供响应式尺寸。像 Image Compressor 这样的工具可以帮助减小文件大小而不造成明显的质量损失。
• 预加载关键资源：对主图和字体使用 <link rel="preload">。
• 消除阻塞渲染的资源：内联关键 CSS，延迟加载非关键 JavaScript。
• 使用 CDN：从更接近用户的位置提供资源。
• 缓存资源：为静态文件设置较长的缓存时间。

示例：预加载你的 LCP 图片：

<link rel="preload" as="image" href="#">

优化首次输入延迟 (FID)

FID 衡量响应性。长时间的 JavaScript 任务会阻塞主线程。

• 拆分长任务：使用 setTimeout 或 requestIdleCallback 让出主线程。
• 最小化主线程工作：移除未使用的 JavaScript，进行代码分割，延迟加载非关键脚本。
• 使用 Web Workers 处理繁重计算。
• 避免大型同步脚本：异步加载第三方脚本。

使用 Lighthouse 的“最小化主线程工作”和“减少 JavaScript 执行时间”机会进行审核。

优化累积布局偏移 (CLS)

CLS 发生在元素意外移动时。常见原因及修复方法：

• 没有尺寸的图片：始终设置 width 和 height 属性，或使用 CSS aspect-ratio。
• 广告、嵌入内容、iframe：使用占位符或固定尺寸容器预留空间。
• 动态内容注入：避免在现有内容上方插入内容，除非由用户交互触发。
• 网络字体：使用 font-display: swap 并预加载字体，以避免不可见文本或布局偏移。

示例：为图片预留空间：

<img src="#" width="800" height="600" alt="...">

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

性能不是一次性修复。将监控集成到你的开发过程中：

• Lighthouse CI：在每个拉取请求上运行审核以捕获回归。
• 真实用户监控 (RUM)：使用 web-vitals 库并将数据发送到你的分析平台。
• 性能预算：为指标设置阈值，并在超出时使构建失败。

定期检查 PageSpeed Insights 和 Search Console 以跟踪进展。

常见问题

什么是 Core Web Vitals？

Core Web Vitals 是 Google 定义的一组指标，用于衡量真实用户体验：最大内容绘制（加载）、首次输入延迟（交互性）和累积布局偏移（视觉稳定性）。

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

使用 RUM 持续监控，并在每次重大代码更改时运行实验室审核。每月通过 Search Console 或 PageSpeed Insights 检查现场数据。

没有开发人员可以优化 Core Web Vitals 吗？

一些修复如图片压缩和使用 CDN 可以通过插件或工具完成，但更深入的优化通常需要代码更改。从图片和缓存开始。

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