Web Vitals：提升网页性能的关键指标

目录#

Web Vitals 概述
核心 Web Vitals 指标
- 最大内容绘制（Largest Contentful Paint, LCP）
- 首次输入延迟（First Input Delay, FID）
- 累积布局偏移（Cumulative Layout Shift, CLS）
其他 Web Vitals 指标
- 首次内容绘制（First Contentful Paint, FCP）
- 交互时间（Time to Interactive, TTI）
- 总阻塞时间（Total Blocking Time, TBT）
测量 Web Vitals
- 使用浏览器开发者工具
- 使用第三方监测工具
- 代码中测量
优化 Web Vitals 的常见实践
- 优化 LCP
- 优化 FID
- 优化 CLS
最佳实践
- 响应式设计
- 图片优化
- 代码压缩和分割
- CDN 使用
示例用法
- 使用 JavaScript 测量 Web Vitals
- 使用 Google Analytics 跟踪 Web Vitals
总结
参考资料

1. Web Vitals 概述#

Web Vitals 是一组旨在提供统一的、以用户为中心的性能指标，帮助开发者和网站所有者衡量网页的用户体验质量。这些指标涵盖了网页加载速度、交互性和视觉稳定性等多个方面，是网页性能优化的重要依据。Web Vitals 分为核心 Web Vitals 和其他 Web Vitals 两部分，核心 Web Vitals 是最重要的指标，直接影响用户体验，而其他 Web Vitals 则提供了更多的性能细节。

2. 核心 Web Vitals 指标#

2.1 最大内容绘制（Largest Contentful Paint, LCP）#

定义：LCP 测量的是从页面开始加载到最大内容元素（如图片、视频、文本块等）在视口中完全可见的时间。最大内容元素通常是页面上占据空间最大的元素。
重要性：LCP 反映了页面的主要内容何时变得可见，是衡量页面加载速度的重要指标。一个快速的 LCP 可以让用户更快地看到页面的核心内容，提高用户体验。
良好指标范围：根据 Google 的建议，LCP 在 2.5 秒以内被认为是良好的。

2.2 首次输入延迟（First Input Delay, FID）#

定义：FID 测量的是从用户首次与页面进行交互（如点击按钮、输入文本等）到浏览器实际能够开始处理该交互的时间延迟。
重要性：FID 反映了页面的交互性，一个低的 FID 意味着页面能够快速响应用户的操作，提高用户的操作体验。
良好指标范围：FID 在 100 毫秒以内被认为是良好的。

2.3 累积布局偏移（Cumulative Layout Shift, CLS）#

定义：CLS 测量的是页面在加载过程中发生的意外布局偏移的累积分数。布局偏移是指页面上的元素在没有用户交互的情况下突然改变位置。
重要性：CLS 反映了页面的视觉稳定性，一个低的 CLS 意味着页面在加载过程中不会出现意外的元素移动，避免用户误操作，提高用户体验。
良好指标范围：CLS 在 0.1 以内被认为是良好的。

3. 其他 Web Vitals 指标#

3.1 首次内容绘制（First Contentful Paint, FCP）#

定义：FCP 测量的是从页面开始加载到页面上的任何内容（如文本、图片等）在视口中首次可见的时间。
重要性：FCP 反映了页面开始显示内容的速度，是衡量页面加载速度的早期指标。
良好指标范围：FCP 在 1.8 秒以内被认为是良好的。

3.2 交互时间（Time to Interactive, TTI）#

定义：TTI 测量的是从页面开始加载到页面完全可交互的时间，即页面上的所有元素都可以正常响应用户的操作。
重要性：TTI 反映了页面的可用性，一个快速的 TTI 意味着用户可以更快地开始与页面进行交互。
良好指标范围：TTI 在 3.8 秒以内被认为是良好的。

3.3 总阻塞时间（Total Blocking Time, TBT）#

定义：TBT 测量的是从 FCP 到 TTI 之间，主线程被阻塞的总时间。主线程阻塞会导致页面无法响应用户的操作。
重要性：TBT 反映了页面的响应能力，一个低的 TBT 意味着页面在加载过程中能够更快地响应用户的操作。
良好指标范围：TBT 在 300 毫秒以内被认为是良好的。

4. 测量 Web Vitals#

4.1 使用浏览器开发者工具#

现代浏览器（如 Chrome、Firefox 等）都提供了开发者工具，可以方便地测量 Web Vitals 指标。在 Chrome 浏览器中，可以通过以下步骤测量 Web Vitals：

打开开发者工具（可以通过右键菜单选择“检查”或使用快捷键 Ctrl + Shift + I 打开）。
切换到“性能”面板。
点击“重新加载”按钮，开始记录页面的性能数据。
页面加载完成后，在“指标”部分可以看到 Web Vitals 指标的详细数据。

4.2 使用第三方监测工具#

除了浏览器开发者工具，还可以使用第三方监测工具（如 Google PageSpeed Insights、GTmetrix 等）来测量 Web Vitals 指标。这些工具可以提供更详细的性能分析报告，帮助开发者更好地了解页面的性能问题。

4.3 代码中测量#

可以使用 JavaScript 代码在页面中测量 Web Vitals 指标。以下是一个使用 web-vitals 库测量 LCP 的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Web Vitals 测量示例</title>
    <script type="module">
        import { getLCP } from 'https://unpkg.com/web-vitals?module';
 
        getLCP(({ name, value }) => {
            console.log(`${name}: ${value}ms`);
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

5. 优化 Web Vitals 的常见实践#

5.1 优化 LCP#

压缩和优化图片：使用图片压缩工具（如 TinyPNG）压缩图片大小，同时根据不同的设备和屏幕分辨率提供适当尺寸的图片。
优先加载关键资源：将关键的 CSS 和 JavaScript 文件放在 <head> 标签中，确保它们能够优先加载。
使用懒加载：对于非关键的图片和脚本，使用懒加载技术，在用户滚动到这些元素时再进行加载。

5.2 优化 FID#

减少主线程阻塞：避免在主线程中执行耗时的任务，如复杂的计算、大数据处理等。可以使用 Web Workers 来执行这些任务。
优化 JavaScript 代码：减少 JavaScript 代码的体积，避免使用阻塞主线程的代码。
避免长时间的渲染阻塞：确保页面的渲染过程不会被长时间阻塞，及时响应用户的操作。

5.3 优化 CLS#

为图片和视频设置宽高属性：在 HTML 中为图片和视频元素设置 width 和 height 属性，确保它们在加载过程中不会改变大小。
避免动态插入元素：尽量避免在页面加载过程中动态插入元素，以免导致布局偏移。
使用 CSS 占位符：在元素加载之前，使用 CSS 占位符来占据空间，避免元素加载后出现布局偏移。

6. 最佳实践#

6.1 响应式设计#

使用响应式设计可以确保页面在不同的设备和屏幕尺寸上都能提供良好的用户体验。通过使用媒体查询和弹性布局，可以使页面在各种设备上自适应显示，提高页面的可用性和性能。

6.2 图片优化#

除了压缩和优化图片大小，还可以使用 WebP 格式的图片。WebP 是一种现代的图片格式，具有更高的压缩率和更好的质量，可以显著减少图片的加载时间。

6.3 代码压缩和分割#

使用工具（如 UglifyJS、Terser 等）对 JavaScript 和 CSS 代码进行压缩，减少代码的体积。同时，使用代码分割技术将代码拆分成多个小块，按需加载，提高页面的加载速度。

6.4 CDN 使用#

使用内容分发网络（CDN）可以将页面的静态资源（如图片、脚本、样式表等）分发到离用户最近的服务器上，减少资源的加载时间。常见的 CDN 提供商有 Cloudflare、Akamai 等。

7. 示例用法#

7.1 使用 JavaScript 测量 Web Vitals#

以下是一个使用 web-vitals 库测量所有核心 Web Vitals 指标的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Web Vitals 测量示例</title>
    <script type="module">
        import { getCLS, getFID, getLCP } from 'https://unpkg.com/web-vitals?module';
 
        getCLS(({ name, value }) => {
            console.log(`${name}: ${value}`);
        });
 
        getFID(({ name, value }) => {
            console.log(`${name}: ${value}ms`);
        });
 
        getLCP(({ name, value }) => {
            console.log(`${name}: ${value}ms`);
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

7.2 使用 Google Analytics 跟踪 Web Vitals#

可以将 Web Vitals 指标发送到 Google Analytics 进行跟踪和分析。以下是一个示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Web Vitals 跟踪示例</title>
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
 
        gtag('config', 'GA_MEASUREMENT_ID');
 
        import { getCLS, getFID, getLCP } from 'https://unpkg.com/web-vitals?module';
 
        function sendToGoogleAnalytics({ name, value, id }) {
            gtag('event', name, {
                event_category: 'Web Vitals',
                value: Math.round(name === 'CLS' ? value * 1000 : value),
                event_label: id,
            });
        }
 
        getCLS(sendToGoogleAnalytics);
        getFID(sendToGoogleAnalytics);
        getLCP(sendToGoogleAnalytics);
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

8. 总结#

Web Vitals 是一组重要的网页性能指标，涵盖了页面加载速度、交互性和视觉稳定性等多个方面。通过测量和优化 Web Vitals 指标，可以显著提高网页的用户体验，增加用户留存率和转化率。开发者可以使用浏览器开发者工具、第三方监测工具和 JavaScript 代码来测量 Web Vitals 指标，并通过优化图片、代码、布局等方式来提高这些指标的性能。同时，遵循最佳实践可以进一步提升网页的性能和用户体验。

目录#