我们之前已经讨论过这个页面体验更新，但在这篇文章中，我们想再看看这些核心的Web要素。一般来说，网站速度指标往往很难理解和混淆。此外，它们在每次测试站点时都会有所变化。你并不总是得到相同的分数。所以，很容易说，你只需要看看一些指标，希望它们变绿。
在所有可能的衡量标准中，谷歌现在确定了三个所谓的核心网络要素。这些都是明年谷歌的焦点。每年，谷歌可能会添加或更改这些指标，因为他们会在较长一段时间内评估这些指标。
核心Web生命值是Web生命值的子集，适用于所有Web页面，应该由所有站点所有者测量，并将在所有谷歌工具中浮出。每一个核心Web要素代表了用户体验的一个不同方面，是可测量的领域，并反映了一个关键的以用户为中心的结果的真实世界的体验。
web.dev /重要器官
页面体验的三大支柱
目前，页面体验的三大支柱是:
加载性能(内容显示在屏幕上有多快?)
响应性(页面对用户输入的响应速度有多快?)
视觉稳定性(加载时东西会在屏幕上移动吗?)
为了衡量用户体验的这些基本方面，谷歌选择了三个相应的指标——即核心网络生命值:
最大内容绘制:这个度量的是最大内容出现在屏幕上所需的时间。这可以是一幅图像或一段文本。一个好的评分会给用户一种网站加载速度快的感觉。速度慢的网站会让人沮丧。
FIS或第一次输入延迟:这度量站点对用户的第一次交互做出反应所花费的时间。例如，这可以是点击按钮。一个好的评分会给用户一种站点对输入做出快速反应的感觉，因此也就是响应性。再一次，缓慢会导致挫折。
累积布局移位:这可以衡量站点的视觉稳定性。换句话说，加载的时候东西会在屏幕上移动吗?这种情况发生的频率是多少?当一个缓慢加载的广告出现在某个位置时，没有什么比点击按钮更令人沮丧的了。
不同的工具使用不同的度量
每个页面体验工具都使用从各种来源收集来的大量Web关键信息。由于每个工具都有不同的目的，因此使用的度量标准也不同。不过，谷歌在它拥有的每个页面体验工具中都使用了核心Web要素。
但所有这些数字意味着什么呢?你必须在你的网站上寻找什么?你的网站什么时候足够快?我什么时候有一个好成绩?关于这个度量标准，您可以问成百上千万个问题。虽然谷歌试图缩小理解和提高之间的差距，但这仍然是一个复杂的话题。衡量网站速度和用户体验是困难的——有太多的因素需要考虑。
什么是核心的网络生命?
核心的Web关键指标并不是孤立工作的，因为还有很多其他指标。一些是基于受控的实验室测试，而另一些是仅对现场数据有效的度量。在做了大量的研究之后，谷歌确定了一个叫做Web Vitals的新集合。这些是我们已经知道的指标的组合，加上一组新的指标。这三个核心是最重要的，谷歌特别要求网站所有者关注这些分数，并在你可以改善他们。
最大内容的油漆
最大内容绘制测量最大内容元素出现在屏幕上的位置。请记住，它并不度量页面完全加载所花费的时间，而只是查看最重要的部分何时加载。
如果您有一个简单的web页面，其中只有一段文本和一个大图像，那么这个大图像将被认为是LCP。由于这是要在浏览器中加载的最大内容，它注定会给人留下深刻印象。通过更快的加载速度，你的站点会显示得更快。所以，有时候，它可能只是简单的优化图像本身。
在过去，有像“第一个有意义的内容”这样的度量，用来度量第一个对用户有意义的内容出现在屏幕上的时间。但是，不像它的名字所暗示的那样，FMC度量通常无法计算出出现在屏幕上的最有意义的东西是什么。复杂的度量导致无用的数据。
最大内容的绘制很容易理解:它只是最大元素出现在屏幕上所需要的时间。这些元素可能包括图像、视频或其他类型的内容。
你需要知道的
现在您知道了LCP是什么，可以开始优化它了。根据谷歌，LCP应该在页面加载的前2.5秒内发生。在4秒内的一切都需要改进，你可以考虑所有的事情
LCP评分的概述
LCP也是动态的，因为首先加载的可能不是那个大映像。当LCP出现在屏幕上时，它会转换为那个大图像。
下面是一幅来自谷歌的图片，它解释了如何工作:
这幅来自谷歌的图像让您很好地了解了如何测量LCP
在左边，你首先看到的标志和“视觉故事”线出现。在第二个屏幕中，大标题作为LCP的候选者出现。但是，在最后一个屏幕中，您可以看到大图像超过了标题，成为LCP。如果你只有一大块内容，那可能是整个LCP。
如果您查看图像中的加载过程，就会很容易明白为什么这是一个如此方便的度量标准。您可以很容易地找到LCP并优化该元素的加载。
谷歌提供了几个工具来帮助您找到所有这些元素。例如，PageSpeed Insights提供了大量关于Web关键信息的数据，以及大量改进页面的建议。如果我们在PageSpeed Insights上运行yoast.com，我们会得到一些分数，低于这个分数的是advice。在我们的例子中，LCP是平均的，这是因为它是一个大图像。在下面的屏幕截图中，您可以看到PageSpeed Insights正确地识别了该元素。现在你现在有什么需要改进的!
PageSpeed Insights将大标题图像识别为我们站点上的LCP
根据谷歌，LCP受到以下几个因素的影响:
缓慢的服务器响应时间:所以优化你的服务器，使用CDN，缓存资产，等等。
因此缩小你的CSS，推迟非关键CSS和内联关键CSS。
慢速加载的资源:所以优化你的图像，预加载资源，压缩文本文件，等等。
客户端渲染问题:最小化关键JavaScript，使用服务器端渲染和预渲染。
谷歌有更多关于LCP的背景知识以及如何对其进行优化的文档。
FID:第一次输入延迟
第一个输入延迟度量浏览器对用户的第一次交互作出响应所花费的时间。浏览器反应越快，页面显示的响应就越快。如果你想给你的用户提供一个积极的体验，谁不是呢?-，然后你应该工作在你的页面的响应性。
当浏览器仍在后台执行其他工作时，就会发生延迟。所以，它已经加载了页面，一切看起来都很好。但是当你点击那个按钮时，什么也没有发生!这是一个糟糕的经历，会导致沮丧。即使只是一个小的延迟，它可能会使您的网站感到缓慢和无响应。
浏览器需要做很多工作，有时它需要停车特定的请求，只是为了稍后返回它们。它不能同时做所有的事情。当我们构建越来越复杂的网站时——通常是JavaScript驱动的——我们对浏览器要求很多。为了加快在屏幕上显示内容和使其具有交互性之间的过程，我们需要关注FID。
FID测量在加载页面期间发生的所有交互。这些是输入操作，如点击、点击和按键，但不是互动，如缩放和滚动。谷歌的新指标要求FID小于100ms才能显示响应性。在100ms到300ms之间的任何东西都需要改进，你可以把高于此的任何东西看作性能很差。
在测试完FID之后，你会得到一个分数，然后你就可以开始工作了
你需要知道的
您需要记住的一件事是，如果没有用户交互，您就无法测量FID。这意味着谷歌不能简单地根据他们从实验室获得的数据来预测FID——他们需要来自真实用户的数据，或者所谓的现场数据。这也意味着这些数据不像实验室数据那样可控，因为它收集了用户在各种设备上的数据，以及用户在不同的方式和环境中使用的数据。这就是为什么有时会看到数据发生变化的原因之一。
如果你想提高你的分数，你会经常发现JavaScript是导致糟糕成绩的罪魁祸首。JavaScript帮助我们建立很棒的交互，但它也可能导致缓慢的网站与复杂的代码。通常，浏览器在执行JavaScript时无法响应输入。如果您致力于改进JavaScript代码及其处理，您就自动致力于提高您的页面体验分数。
这是最难的部分。通过减少执行JavaScript、分解复杂任务或删除未使用的JavaScript所需的时间，大多数站点都能获益良多。
例如，yoast.com有一个很好的分数，但它不是完美的。仍然有一些程序阻止我们得到完美的分数。有些问题很难解决，或者我们只是需要这些代码来让我们的站点正常运行。你应该看看你的分数，然后决定你能做什么。尝试找出最容易执行的改进，或者导致最大性能跳跃的改进。