Core Web Vitals

介绍

Core Web Vitals 是由 Google 提出的网页性能指标，旨在衡量网站性能和用户体验，特别是加载和交互方面。帮助我们了解网站是否能够提供良好的用户体验，可以提高 SEO（搜索引擎优化）排名。

Core Web Vitals主要包含三部分（ LCP（Largest Contentful Paint，最大内容绘制），FID（First Input Delay，首次输入延迟），CLS（Cumulative Layout Shift，累计布局偏移））部分

Core Web Vitals内容

包含以下内容：

1. Largest Contentful Paint (LCP) - 最大内容绘制时间

• 定义：LCP 衡量的是页面中最大可视内容元素（通常是图片、视频、或块级文本等）从开始加载到完全显示的时间。
• 理想值：LCP 应该在 2.5 秒以内。如果 LCP 超过了 2.5 秒，意味着页面加载体验可能对用户产生负面影响。
• 如何改善：优化服务器响应时间，使用适当的图像格式和尺寸，减少不必要的资源加载等

2. First Input Delay (FID) - 首次输入延迟

• 定义：FID 衡量的是用户与页面首次交互（比如点击按钮或链接）到浏览器响应这一交互的时间延迟。
• 理想值：FID 应该小于 100 毫秒（0.1s）。如果 FID 时间过长，意味着页面的交互体验不够流畅。
• 如何改善：减少主线程的负载，优化 JavaScript 执行，延迟非关键的资源加载等

3. Cumulative Layout Shift (CLS) - 累积布局偏移

• 定义：CLS 衡量的是页面内容在加载过程中发生的意外布局变化的频率和程度。一个页面的内容如果在加载过程中不断移动，可能会导致用户点击错误的地方。
• 理想值：CLS 值应该小于 0.1。如果该值较高，说明页面的布局不稳定，用户体验较差。
• 如何改善：确保为图片、广告等动态内容指定合适的大小，避免使用不稳定的布局

重要性

• 用户体验：这三个指标直接关系到用户与网站互动的流畅度和稳定性。如果这些指标表现差，用户可能会感到网站加载慢、响应不及时，导致流失。
• SEO 排名：从 2021 年开始，Google 将 Core Web Vitals 作为衡量网站是否值得排名的因素之一。优化这些指标可以帮助提高网站的搜索引擎排名。
• 站点优化：分析 Core Web Vitals可以帮助我们发现网站的性能瓶颈并优化其加载和交互性能，提升用户体验。

测量

测量和优化过程之中可以使用Google提供给我们的一些工具

Lighthouse工具（Google 提供）

Lighthouse是一个开源工具，可以通过 Chrome 开发者工具或独立的命令行工具来分析网页的性能

Mobile 模式指的是模拟移动设备的性能和体验。它会模拟智能手机、平板等移动设备的浏览器环境

Desktop 模式指的是模拟桌面设备（如 PC、Mac 等）的性能和体验

下面就是正常我们浏览器Lighthouse的地方，选择好了以后点击右边的分析按钮即可

其他测量工具

- **Google PageSpeed Insights**：提供网页的性能报告，并帮助分析 LCP、FID 和 CLS 的得分。
- **Web Vitals Chrome 扩展**：帮助开发者在浏览器中实时跟踪 Core Web Vitals 的表现。

优化

👉优化我们也是从下面的几个对应的部分进行优化

- **LCP**：优化服务器响应时间，使用高效的图像格式，使用懒加载等方式来减少首次加载时间。
- **FID**：减少 JavaScript 的执行时间，使用 Web Worker 分担主线程的负担，优化页面的交互逻辑。
- **CLS**：为动态内容设置固定的大小，避免页面加载时出现布局抖动，特别是图像、广告和字体的加载