Web Vitals：提升用户体验的关键指标

Web Vitals 是 Google 提出的一套核心网页性能指标，旨在帮助开发者理解和优化网站的用户体验。这些指标分为核心 Web Vitals 和附加 Web Vitals，涵盖了加载性能、交互性和视觉稳定性三个方面。以下是详细的介绍和如何使用 Web Vitals 来优化你的网站。

核心 Web Vitals

• 核心 Web Vitals 包括三个关键指标：最大内容绘制（Largest Contentful Paint，简称 LCP）、首次输入延迟（First Input Delay，简称 FID）和累积布局偏移（Cumulative Layout Shift，简称 CLS）。

• LCP（最大内容绘制）：衡量页面主要内容元素渲染完成的时间。目标值应小于 2.5 秒。

• FID（首次输入延迟）：衡量用户第一次与页面交互（例如点击按钮）到浏览器开始处理该交互的时间。目标值应小于 100 毫秒。

• CLS（累积布局偏移）：衡量页面在加载过程中意外布局变化的程度。目标值应小于 0.1。

附加 Web Vitals

除了核心 Web Vitals，还有几个附加指标，包括首次内容绘制（First Contentful Paint，简称 FCP）和时间至首字节（Time to First Byte，简称 TTFB）。

• FCP（首次内容绘制）：衡量页面上的第一个文本或图像内容渲染完成的时间。目标值应小于 1.8 秒。

• TTFB（时间至首字节）：衡量从请求开始到接收到第一个字节的响应时间。目标值应小于 100 毫秒。

如何测量 Web Vitals

Web Vitals 可以通过实验室数据（Lab Data）和现场数据（Field Data）两种方式进行测量。

• 实验室数据：使用 Chrome DevTools 或 Lighthouse 等工具在受控环境中模拟真实用户的行为。

• 现场数据：通过实际用户在真实世界中的使用情况收集数据，通常需要在网站上实施 Web Vitals API。

如何优化 Web Vitals

下面是一些优化 Web Vitals 的通用策略：

优化 LCP：

• 压缩和优化关键资源，如图片和字体。
• 使用懒加载（Lazy Loading）技术，仅在需要时加载非关键资源。
• 避免在关键路径上使用大型 CSS 和 JavaScript 文件。

优化 FID：

• 减少主线程工作，避免长时间的 JavaScript 执行。
• 使用预加载（Preloading）和预取（Prefetching）技术。
• 使用服务工作者（Service Worker）缓存静态资源。

优化 CLS：

• 确保所有元素都有固定的尺寸，避免动态调整大小。
• 使用尺寸属性（如 width 和 height）来预留空间给图片和广告。
• 避免在页面加载过程中插入新的元素。

实施 Web Vitals

为了在你的网站上实施 Web Vitals 测量，你可以使用 Web Vitals 库。

// index.js
import { reportWebVitals } from 'web-vitals';

reportWebVitals(console.log);

你也可以将数据上报到服务器或使用 Google Analytics 等工具进行分析。

使用 Lighthouse

Lighthouse 是一个开源的自动化工具，用于改进 Web 页面的质量。它可以生成一份报告，其中包含 Web Vitals 的分数以及优化建议。

// 安装 Lighthouse CLI
npm install -g lighthouse

// 运行 Lighthouse
lighthouse https://example.com --chrome-flags="--headless"

进阶优化技巧

优化 LCP

使用预加载（Preloading）：对于关键资源，如主样式表和关键 JavaScript 文件，使用 <link rel="preload"> 标签进行预加载，确保它们在页面加载初期就能被浏览器获取。

<link rel="preload" href="/styles.css" as="style">
<link rel="preload" href="/main.js" as="script">

优化图片和媒体：压缩图片文件，使用现代图片格式（如 WebP），并为不同设备和网络条件提供多种分辨率的图片。

优化 FID

减少 JavaScript 执行时间：避免在关键路径上执行大型 JavaScript 文件，可以将它们放在文档末尾加载，或者使用异步加载方式。

<script src="/non-critical.js" defer></script>

使用 Web Workers：将一些复杂的计算任务放到 Web Workers 中执行，避免阻塞主线程。

优化 CLS

固定尺寸的媒体元素：确保所有的图片、视频和其他媒体元素都有明确的宽度和高度属性，避免在加载过程中引起布局重排。

<img src="/image.jpg" alt="An image" width="600" height="400">

使用 Resize Observer：动态调整元素大小时，使用 Resize Observer API 来代替定时器或 resize 事件，减少不必要的布局重排。

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 更新元素样式
  });
});
observer.observe(document.querySelector('#dynamic-element'));

监控和持续优化

实施 Web Vitals API：在你的网站上实施 Web Vitals API，收集真实用户的性能数据，以便持续监控和优化。

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

onLCP((lcp) => {
  // 发送 LCP 数据到服务器
});
onFID((fid) => {
  // 发送 FID 数据到服务器
});
onCLS((cls) => {
  // 发送 CLS 数据到服务器
});

使用 Google Search Console：Google Search Console 提供了 Core Web Vitals 报告，帮助你了解网站的性能表现，并提供具体的改进建议。

定期进行 Lighthouse 审计：将 Lighthouse 审计纳入你的开发流程，定期检查和优化 Web Vitals。

结合 SEO 和 UX

优化 Web Vitals 不仅可以提升用户体验，还能提高搜索引擎排名。Google 已经宣布，Web Vitals 成为了其排名算法的一部分，这意味着页面性能直接影响到网站的可见度和流量。因此，优化 Web Vitals 不仅是一项技术挑战，也是提升网站整体价值的战略决策。

结论

Web Vitals 提供了一套全面的性能指标，帮助开发者和网站所有者理解并优化用户体验。通过关注 LCP、FID 和 CLS 等关键指标，结合预加载、图片优化、Web Workers 和布局稳定性等技术手段，你可以显著提升网站的加载速度、交互性和稳定性。实施 Web Vitals API 和使用工具如 Lighthouse 和 Google Search Console 进行持续监控，将确保你的网站始终保持最佳状态，为用户提供卓越的体验。