大家好，关于网站优化必备：CoreWebVitals三项指标考核全解析很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于网站应通过Core Web Vitals三项指标考核的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

随着互联网的快速发展，网站已经成为企业展示形象、拓展业务的重要平台。许多网站在优化过程中往往忽略了用户体验这一关键因素。为了提升网站的用户体验，谷歌提出了Core Web Vitals三项指标，本文将为大家详细解析这三项指标，帮助您优化网站，提升用户满意度。

一、什么是Core Web Vitals？

Core Web Vitals是谷歌提出的一套网站性能评估标准，包括三个关键指标： Largest Contentful Paint (LCP)、First Input Delay (FID)和Cumulative Layout Shift (CLS)。这三个指标分别从加载速度、交互速度和视觉稳定性三个方面评估网站性能。

二、Core Web Vitals三项指标详解

1. Largest Contentful Paint (LCP)

LCP指的是页面中主要内容元素（如图片、视频等）的加载时间。理想情况下，LCP应在页面加载完成后2.5秒内完成。

2. First Input Delay (FID)

FID指的是用户进行第一次交互（如点击、滑动等）时，页面响应所需的时间。理想情况下，FID应小于100毫秒。

3. Cumulative Layout Shift (CLS)

CLS指的是页面布局在加载过程中发生变化的程度。理想情况下，CLS应小于0.1。

三、Core Web Vitals评估方法

谷歌提供了在线工具Lighthouse，可以帮助您评估网站的Core Web Vitals指标。以下是使用Lighthouse评估Core Web Vitals的步骤：

1. 打开Lighthouse，输入要评估的网址。

2. 选择“Performance”选项。

3. 点击“Generate report”按钮，等待评估完成。

4. 查看Core Web Vitals评分，根据评分结果进行优化。

四、Core Web Vitals优化建议

为了提升网站的Core Web Vitals指标，以下是一些建议：

1. 优化图片和视频：使用合适的图片格式，如WebP，减小图片和视频大小，使用懒加载技术。

2. 优化代码：压缩代码，移除无用的库和框架，优化CSS和JavaScript。

3. 提高服务器性能：使用CDN加速，优化数据库查询，提高服务器响应速度。

4. 优化页面布局：使用CSS Flexbox或Grid布局，避免使用动态内容。

5. 测试和监控：定期使用Lighthouse评估网站性能，关注Core Web Vitals指标的变化。

五、总结

Core Web Vitals是衡量网站性能的重要指标，通过优化这三项指标，可以提升用户体验，提高网站转化率。希望本文能帮助您了解Core Web Vitals，为您的网站优化提供参考。

Core Web Vitals101

近几年来，好的用户体验已经是衡量一个网站是否是一个好网站的重要指标，优化用户体验的质量是任何网站长期成功的关键。无论您是Boss、BA，PO还是DEV，Web vital都可以帮助您量化站点的体验，并确定改进的机会。

Web vitals是一个由谷歌发起的，为网站的质量提供统一的指导(guideline)，这对于在Web上提供良好的用户体验至关重要。

Google提供了一系列的metrics来measure一个网站的性能，例如FCP， TTFP，TTI等等，同时也提供了一系列的工具来获取这些metrics的report。

Web vital倡议旨在简化景观，并帮助网站关注最重要的指标，即 Core Web vital。

Core web vital是web vital的子集，适用于所有的网页，应该由所有的网站所有者衡量，并将出现在所有的谷歌工具。每一个Core web vital都代表了用户体验的不同方面，在领域中是可测量的，并反映了以用户为中心的关键结果的真实体验。

组成Core web vitals的metrics是会随着时间的改变而改变的。但在2020年主要focus在用户体验的下面三个方面， loading, interactivity, and visual stability，他们分别用下面三个metric来度量

最大内容绘制(LCP)指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

LCP之前的相关属性：诸如 load（加载）或 DOMContentLoaded（DOM内容加载完毕）这样的旧有指标并不是很好，因为这些指标不一定与用户在屏幕上看到的内容相对应。而像 First Contentful Paint首次内容绘制(FCP)这类以用户为中心的较新性能指标只会捕获加载体验最开始的部分。如果某个页面显示的是一段启动画面或加载指示，那么这些时刻与用户的关联性并不大。

我们以往推荐过一些性能指标，例如 First Meaningful Paint首次有效绘制(FMP)和 Speed Index速度指数(SI)（两个指标都包含在灯塔工具中），这些指标有助于捕获到更多初始绘制后的加载体验，但这些指标十分复杂、难以解释，而且常常出错，也就意味着这些指标仍然无法识别出页面主要内容加载完毕的时间点。

例子：

FID测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间

一般来说，发生输入延迟（又称输入延时）是因为浏览器的主线程正忙着执行其他工作，所以还不能响应用户。可能导致这种情况发生的一种常见原因是浏览器正忙于解析和执行由您的应用程序加载的大型 JavaScript文件。在此过程中，浏览器不能运行任何事件侦听器，因为正在加载的 JavaScript可能会让浏览器去执行其他工作。

CLS测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数

每当一个可见元素的位置从一个已渲染帧变更到下一个已渲染帧时，就发生了布局偏移

一连串的布局偏移，也叫会话窗口是指一个或多个快速连续发生的单次布局偏移，每次偏移相隔的时间少于 1秒，且整个窗口的最大持续时长为 5秒（ ）

最大的一连串是指窗口内所有布局偏移累计分数最大的会话窗口

页面内容的意外移动通常是由于异步加载资源，或者动态添加 DOM元素到页面现有内容的上方。罪魁祸首可能是未知尺寸的图像或视频、实际渲染后比后备字体更大或更小的字体，或者是动态调整自身大小的第三方广告或小组件。

浏览器在计算布局偏移分数时，会查看可视区域大小和两个已渲染帧之间的可视区域中不稳定元素的位移。布局偏移分数是该位移的两个度量的乘积：影响分数和距离分数（两者定义如下）。

布局偏移分数=影响分数*距离分数

影响分数测量不稳定元素对两帧之间的可视区域产生的影响，前一帧和当前帧的所有不稳定元素的可见区域集合（占总可视区域的部分）就是当前帧的影响分数

布局偏移分数计算公式的另一部分测量不稳定元素相对于可视区域位移的距离。距离分数指的是任何不稳定元素在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）。

在上方的示例中，最大的可视区域尺寸维度是高度，不稳定元素的位移距离为可视区域高度的 25%，因此距离分数为 0.25。

所以，在这个示例中，影响分数是0.75，距离分数是0.25，所以布局偏移分数是0.75* 0.25= 0.1875。

Core Web Vitals是一组度量Web上真实用户体验的重要方面的字段指标。它包括三个指标，以及每个指标的目标阈值，这有助于开发人员定性地了解他们的站点体验是“好”、“需要改进”还是“差”。

此外，为了对页面或站点的总体性能进行分类，我们使用该页面或站点的所有页面浏览量的第75百分位数值。换句话说，如果一个网站至少有75%的页面浏览量达到了“好”的阈值，那么这个网站就被归类为具有“好”性能的网站。相反，如果至少有25%的页面浏览量达到“差”的阈值，该网站就被归类为“差”的表现。例如，一个2秒的75百分位LCP被归类为“好”，而一个5秒的75百分位LCP被归类为“差”。

For the detail of how to define the target of thresholds, pls have a look at:

Google believe Core Web vital是对每一个网站都特别特别的重要，所以Google把Core web vital metrics集成到了很多的流行的自己的工具上

Pagespeed insights：

Lighthouse

Chrome UX report：

Google Devtools

Web vital Extension

Javascript API， 官方提供了很多的API可以获取Core web vitals不同指标的值

OK，本文到此结束，希望对大家有所帮助。