Core Web Vitals（CWV）是Google推出的一组关键的用户体验指标，旨在帮助开发人员评估网站性能。它们主要包括Largest Contentful Paint（LCP），First Input Delay（FID）和Cumulative Layout Shift（CLS），分别评估页面加载速度，响应时间和可交互性。
在当今数字化时代，用户对网站的体验有着越来越高的期望。因此，确保网站具有良好的用户体验至关重要。CWV提供了一种可靠的方法来评估网站性能，以确保用户在访问网站时能够享受最佳体验。
本文将详细介绍CWV，包括每个指标的定义和评估方法，以及如何通过优化网站性能来提高CWV。我们还将深入探讨如何使用CWV来评估网站的用户体验，以及如何通过提高CWV值来提高网站的排名。
具体指标
首先介绍一下 CWV包含的具体指标:
Largest Contentful Paint (LCP)指的是页面中最大的可见内容加载完成的时间。如果LCP的值过高，用户可能会感到页面加载缓慢。
First Input Delay (FID)是指用户首次交互页面的时间。如果FID的值过高，用户可能会感到页面响应不及时。
Cumulative Layout Shift (CLS)指的是页面中内容的布局变化，这可能会导致用户误操作。
为了确保网站访问者的用户体验，开发人员应该努力使这三个指标的值尽可能低。在Google的PageSpeed Insights工具中，您可以评估您的网站的Core Web Vitals并获得有关如何改进性能的建议。
总的来说，Core Web Vitals是评估网站用户体验的重要工具，开发人员应该努力使其达到最佳水平。
Largest Contentful Paint（LCP）是Core Web Vitals中的一个关键指标，用于评估网站加载速度。LCP是指页面中最大的可见内容加载完成的时间，并且越快加载，LCP值就越低。
关于LCP
LCP对网站有着重要的影响，因为它直接影响用户对网站的感知。如果LCP的值过高，用户可能会感到页面加载缓慢，并且可能在网站加载完成之前离开页面。这不仅会导致高流失率，而且还可能影响用户对网站的整体印象。
因此，开发人员应该努力确保LCP值尽可能低。这可以通过优化图像大小和加载顺序，以及通过使用更快的主机和网络优化来实现。举个例子，假设您正在访问一个新闻网站，该网站的首页包含一个大图像，多个文本段和一个视频。 当您打开该页面时，网站将开始加载所有内容。当图像，文本和视频加载完成后，LCP就记录了最大的可见内容（例如图像）加载完成的时间。如果图像加载得很快，那么LCP的值将相对较低，表明网站加载速度较快。但是，如果图像加载得很慢，LCP的值将相对较高，表明网站加载速度较慢。通过监控LCP的值，开发人员可以评估网站的加载速度并采取相应的行动来提高性能。例如，如果LCP值过高，开发人员可以通过优化图像大小和加载顺序来提高加载速度。
关于LCP值多长时间算作很长，没有固定的数字标准。不过，Google建议LCP的值应该在2.5秒内完成。如果LCP的值超过了2.5秒，则可能会对用户体验产生负面影响。此外，LCP的值受到多种因素的影响，例如网络速度，内容复杂度，图像大小等。因此，实际的LCP值可能会有所不同。 因为前面提到过, 开发人员应该努力使LCP的值尽可能低，以提高用户体验(UX)。如果LCP的值超过了2.5秒，就需要针对图片进行调整.
再次重申: 开发人员需要通过优化图像大小和加载顺序，以及使用更快的主机和网络优化来提高性能。
关于FID
First Input Delay（FID）用于评估网站的响应时间。它表示用户第一次与网站互动（例如点击一个按钮）后到网站开始响应的时间。举个例子，假设您正在访问一个电商网站，想要添加一件商品到购物车。如果您点击添加到购物车按钮后，网站需要几秒钟才开始响应，那么这个网站的FID值就很高。相反，如果您点击按钮后，网站立即开始响应，那么FID值就很低。
简而言之，FID是衡量网站响应速度的重要指标，开发人员应该努力使FID值尽可能低，以提高用户体验。关于FID值多长时间算作很高，没有固定的数字标准。不过，Google建议FID的值应该在100毫秒内完成。如果FID的值超过了100毫秒，则可能会对用户体验产生负面影响。
具体可以考虑以下几个方案 来提高FID
- 优化脚本加载：将JavaScript脚本放在页面底部，可以减少页面加载时间，提高FID。例如，您可以将JavaScript脚本放在页面底部，以便页面先加载HTML内容，再加载脚本。
- 减少网络请求：减少网络请求数量可以加快页面加载速度，从而提高FID。例如，您可以合并多个CSS和JavaScript文件，以减少网络请求数量。
- 使用更快的主机：使用更快的主机可以加快网页加载速度，从而提高FID。例如，您可以使用更快的主机服务，例如CDN，以加快网页加载速度。
- 使用更快的网络：使用更快的网络可以加快网页加载速度，从而提高FID。例如，您可以使用更快的网络服务，例如LTE，以加快网页加载速度。
- 优化图像大小：优化图像大小可以加快页面加载速度，从而提高FID。例如，您可以使用图像压缩工具，例如TinyPNG
关于CLS
Cumulative Layout Shift（CLS）用于评估网页布局的稳定性。它表示在网页加载过程中，页面内容的位置发生的改变总量。当用户在网页上进行操作时，如果页面内容的位置发生了改变，则可能导致用户不能按预期的方式与页面进行互动。这种情况通常是由于页面上的元素（如广告）在页面加载过程中的延迟加载造成的。如果CLS值太高，则可能会对用户体验产生负面影响。
为了提高CLS值，开发人员可以采取以下措施：
- 使用预计算的高度(特定的大小占位符)：在页面加载前预计算元素的高度，可以有效防止布局改变。例如，您可以为页面上的图像设置预计高度，以防止它们在加载过程中导致布局改变。
- 使用async或defer：使用async或defer可以防止页面上的JavaScript脚本影响布局。例如，您可以使用async或defer标记，以便在页面加载完成后再加载JavaScript脚本。
- 延迟加载广告：延迟加载广告可以防止广告改变网页布局的尺寸.
- 避免动态插入广告：动态插入的广告可能导致页面内容发生移动，从而导致CLS值升高。因此，开发人员应该避免使用动态插入的广告，或者在插入广告之前对页面进行适当的调整，以避免内容移动。
- 使用固定大小的图像：这也属于(特定的大小占位符). 使用固定大小的图像可以避免页面内容的移动，从而降低CLS值。因此，开发人员应该使用固定大小的图像，而不是使用未知大小的图像。
这里具体说明下Cumulative Layout Shift的重要性
- 购物网站：在购物网站上，用户可能会试图点击某个产品的图片，以查看详细信息。如果页面内容不断移动，则用户可能会误点到其他产品的图片，而不是所需的产品。这可能会导致用户的不满意，并影响他们的购物体验。
- 银行网站：在银行网站上，用户可能会试图访问自己的账户信息，以查看余额和交易记录。如果页面内容不断移动，则用户可能会误点到其他账户信息，而不是所需的账户信息。这可能会导致用户的不满意，并影响他们的银行体验。
- 新闻网站：在新闻网站上，用户可能会试图阅读某个新闻故事。如果页面内容不断移动，则用户可能会错误地点到其他新闻故事，而不是所需的新闻故事。这可能会导致用户的困惑，并影响他们对网站的信任。
最后关于网站优化
Google不断地评估和更新用户体验指标，并在必要时增加新指标。因此，如果Google在未来推出了新的用户体验指标，CWV的范围将可能会扩大。
总的来说，LCP，FID和CLS是目前CWV的三个关键指标，开发人员应该努力使这三个指标达到最佳水平，以提高用户体验。如果Google推出了新的指标，开发人员也应该相应地采取行动来提高性能。