看看Google的新页面体验信号-核心网络生命力，如何对其进行优化以及为什么它们为营销人员带来了令人兴奋的机会。
早在5月，Google宣布了一项新的排名信号，即“页面体验”，将于2021年某个时候推出。当时，Google表示新信号将更早推出，但由于企业正为应对冠状病毒爆发的高度而努力。
页面体验是现有排名信号和称为Core Web Vitals的一组新信号的结合，旨在奖励提供最佳用户体验的网站。
什么是页面体验信号？
正如我们在上一篇文章中所解释的那样，页面体验会将一系列与用户体验相关的信号合并为一个可衡量的信号，Google可以使用该信号来评估您网站的用户体验。
Google的此可视化效果向您展示了如何构成新信号：核心网络生命力是Google对页面体验的整体评估的一部分。
如您所见，“其他网络生命力”部分包含了许多与我们在一起已经有一段时间的排名信号：
- 适用于移动设备：奖励页面可在移动设备上带来积极的体验- 此处提供更多信息。
- 安全浏览：奖励网站免受安全问题，恶意软件，欺骗性页面，有害下载和其他安全问题的侵害- 在此处了解更多信息。
- HTTPS：奖励具有HTTPS安全加密的网站。
- 介入式非页内广告：对使用介入式非页内广告和弹出式窗口的网站进行处罚- 此处提供更多信息。
自从所谓的Mobilegeddon于2015年推出和2007年安全浏览以来，移动设备友好性一直是排名的重要因素。最近，Google敦促网站所有者使用安全加密并惩罚使用侵入性插页式广告和弹出式窗口的网站，尤其是在移动设备上。
所有这些信号现在都应该为您所熟悉，但是“核心网络活力”下列出的三个信号又如何呢？
什么是核心网络生命力？
Google提出的Core Web Vitals计划引入了三个新的排名信号，旨在改善高级网站的整体体验。除了信号本身以外，该计划还为开发人员提供了每种信号的指南以及测试和优化它们的工具。在此阶段，信号听起来可能不熟悉，但它们很容易理解。
- 加载：虽然Google正在通过一种称为“最大内容涂料（LCP）”的新标准来更改其测量方式，但它仅指加载时间。
- 交互性：使用新的称为“首次输入延迟（FID）”的标准，测量用户单击页面上的交互元素（链接，按钮等）的响应度。
- 视觉稳定性：使用称为累积布局移位（CLS）的新标准，检测元素在页面上加载后的移动以及由此引起的任何不稳定性。
基本上，Core Web Vitals希望看到快速加载的页面，对用户交互快速响应的交互式元素，以及停留在原处而不会在页面上跳转的元素。
从UX的角度来看，它确实是如此简单。Core Web Vitals的复杂性在于Google用于测量这些信号的新标准。
我们将在短期内更详细地介绍这些（以及如何针对每个信号进行优化），但是在此之前，让我们从排名的角度讨论这些新信号的重要性。
核心网络活力有多重要？
Google关于新页面体验信号（以及Core Web Vitals）的所有评论都表明，一旦全面推出，这将成为最大的排名因素之一。内容质量将仍然是最重要的页面上信号，页面外因素（例如入站链接的质量）也将同样重要。但是，页面体验（包括Core Web Vitals）将是一个主要信号，并且可能是两个页面之间传递相似质量的内容的决定因素：
虽然页面体验的所有组成部分都很重要，但即使页面体验的某些方面低于标准，我们也会优先考虑总体上具有最佳信息的页面。良好的页面体验不会取代拥有丰富而相关的内容。但是，在有多个页面具有相似内容的情况下，页面体验对于搜索中的可见性变得更加重要。
显然，这是网站所有者需要认真对待的事情，但无需担心页面体验或Core Web Vitals。与这种性质的所有算法更新一样，在推出之前会有很多耸人听闻的炒作，但对搜索排名的总体影响将是中等的。
让我们不要忘记在更新发布之前对“ Mobilegeddon”所做的灾难性预测，只是让人们怀疑是否有任何实际更改。
核心网络生命固然重要，但Google每次搜索都会查看数百个信号，这意味着有数百个胜负之处。更重要的是，这些新信号为品牌提供了新的机会，使其可以领先于优化缓慢的竞争对手，这值得我们兴奋。
如何针对核心网络生命进行优化
优化Core Web Vitals的关键是了解Google如何测量每个信号。因此，在本节中，我们将分解三个信号的技术细节，可用于优化它们的工具以及每个信号的一些关键提示。
加载：最大的内容涂料（LCP）
加载信号测量页面加载所需的时间（以秒为单位）。加载时间已经是Google算法中的排名因素，但Core Web Vitals更加重视所有设备上的页面速度。
最大的满意油漆评分支架
了解Core Web Vitals中的Loading信号的关键是Google正在转向衡量页面速度的新标准。这称为最大内容涂料（LCP），您可以在此处找到有关此标准的更多信息。
本质上，LCP衡量的是视口内（折叠上方）的最大图像或文本块完全呈现所花费的时间。这很有意义，因为从理论上讲，这些元素中的最大元素应花费最长的时间加载，而它们在主视口中的位置表明它们对用户很重要。
它取代了诸如First Contentful Paint（FCP）之类的较旧的度量标准，后者仅测量页面内容的任何部分完全呈现所花费的时间。
如何针对LCP优化
从上一幅图中可以看到，Google希望看到2.5秒或更短的LCP分数。如果页面视口中最大的元素花费的时间比在浏览器中呈现所需的时间更长，那么您可能会因核心Web Vitals和页面体验中的“加载”信号而受到惩罚。
最大的满意油漆评分支架
您可以使用Google提供的一系列免费工具来评估网页的LCP。首先，您可以使用以下“字段”工具测量实时页面的加载时间：
- Chrome用户体验报告
- PageSpeed见解
- Search Console（核心网络生命力报告）
您还可以使用以下“实验室”工具来评估开发中页面的LCP：
- Chrome DevTools
- 灯塔
- WebPageTest
如果您的LCP超过2.5秒，则需要优化性能不佳的页面。有四个主要因素会影响您的LCP得分，这些应该是您优化工作的重点：
- 服务器响应时间慢
- 渲染阻止的JavaScript和CSS
- 资源加载时间
- 客户端渲染
为了缩短服务器响应时间，您需要做的第一件事就是确保您的托管服务足够好。请密切注意计划中使用的硬件，并检查是否有足够的内存和CPU可以满足您的需求。
JavaScript和CSS都是渲染阻止资源，它们会延迟LCP，并且您希望通过优化代码和文件来最大程度地减少负面影响。
您可以通过以下步骤减少CSS引起的延迟：
- 缩小CSS文件以减小其大小
- 推迟非关键CSS，以便在呈现HTML内容后加载
- 在HTML文件中内嵌关键CSS，以删除其他服务器请求
为了减少由JavaScript代码引起的延迟，您可以采取以下步骤：
- 缩小并压缩JavaScript文件以减小其大小
- 延迟未使用的JavaScript，以免减慢HTML渲染速度
- 尽量减少未使用的polyfill（如果您使用某些浏览器不支持的API，则可以使用它们）
- 减少JavaScript的整体使用
- 确保您的JavaScript代码干净高效
- 使用未知的第三方开发人员创建的JavaScript代码减少对JS插件，主题和其他资源的依赖
- 投资一个好的开发人员来创建和优化您的JavaScript代码
JavaScript是加载速度慢的最常见原因之一，它不需要花费很多时间就能阻塞Web浏览器的有限资源。因此，值得确保您的JS文件和代码不会妨碍LCP。
其他两个主要的速度杀手是服务器请求的总数以及正在下载的文件/资源的大小。为了缓解这些问题，您应该为创建的每个页面遵循基本的速度优化最佳实践：
- 减少服务器请求的数量（图像，文件，云，数据提交，API请求等）
- 优化和压缩图像
- 预载重要资源
- 压缩文字档
- 使用自适应服务根据用户的连接速度交付不同的资产
- 缓存资产以减少回访者的加载时间
在优化页面速度方面，真正的少就是更多，这意味着使用更少的图像，更少的JavaScript代码，在插件上变得容易并充分利用资源高效的代码（即HTML和CSS）。
交互性：第一个输入延迟（FID）
加载时间只是网站用户关注的速度的一方面。Core Web Vitals中的“交互性”信号使Google能够通过分析用户单击后触发交互性元素花费的时间来衡量页面呈现后网站的速度性能。
这适用于所有内容，包括链接，按钮，UI元素，触发的动画以及用户通过单击或单击触摸屏进行交互的页面上的任何其他元素。
第一个输入延迟评分支架
Google使用称为“ 第一输入延迟”（FID）的标准对此进行测量，该标准可测量用户单击与事件处理之间的延迟，即：浏览器何时开始响应用户的输入。
因此，Google此处不是在衡量实际事件的处理时间，它只是在衡量用户点击到浏览器开始处理事件所花费的时间之间的延迟。例如，当用户填写您的表单之一并关闭“提交”按钮时，FID会通过启动提交过程来测量该单击与浏览器响应该单击之间的延迟。
它无法衡量提交过程本身需要多长时间。
了解这一点很重要，因为这是您需要优化以确保您的FID分数达到标准的延迟。
Google为什么以这种方式衡量互动性？
Google 解释了为什么只测量事件流程的延迟，而不是这些事件完成或浏览器在运行事件处理程序后更新UI元素所花费的时间。
尽管这段时间对用户很重要，并且确实会影响体验，但它并未包含在此指标中，因为这样做可能会激励开发人员添加实际上会使体验更糟的变通方法-也就是说，他们可以将事件处理程序逻辑包装在异步回调，以便将其与与事件关联的任务分开。结果将是指标得分有所提高，但用户感觉到的响应速度较慢。
尽管事件处理时间和UI更新对用户都很重要（并且您应该对其进行优化），但这些度量值会使开发人员过于容易地通过切换到异步事件响应来使用Google的算法，这会改善指标，但会损害用户体验进一步。
这就解释了为什么FID无法衡量事件处理时间。现在，它测量延迟的原因是，交互响应缓慢的最常见原因是浏览器被其他任务占用，例如处理服务器对CSS和JavaScript文件的请求。
基本上，浏览器在完成其他任务之前无法开始处理事件触发器。这也有助于解释为什么Google只在页面加载后才测量第一个输入。大多数交互问题是在浏览器忙于服务器请求和呈现内容时发生的，这意味着第一次输入通常遭受的损失最大。
Google引用的另一个原因是，第一次输入延迟对用户对您的网站的第一印象以及交互元素的感知响应性影响最大。
如何针对FID优化
与Core Web Vitals中的“加载”信号（LCP）不同，您只能在现场（即在实时页面上）测量FID。这仅仅是因为FID要求真实用户与您的页面进行交互。这意味着您可以使用一些较小的工具来测量页面的FID：
- Chrome用户体验报告
- PageSpeed见解
- Search Console（核心网络生命力报告）
- Firebase性能监控（测试版）
要提高FID分数的第一件事是减少页面加载时的服务器请求数量，最小化CSS和JavaScript文件并优化资源（例如，图像）以减小文件大小。
通过最大程度地减少用户浏览器花费在执行服务器请求和下载文件上的时间，您可以做两件事：
- 降低了浏览器仍在忙于渲染页面时用户单击交互式元素的风险
- 如果他们在浏览器忙时单击交互式元素，则可以减少总体延迟
第一个输入延迟的示例，显示浏览器的位置
在上图中，金线表示浏览器主线程被占用的时间。在此，FID的长度为几秒钟，因为当主线程最忙时用户碰巧单击了一个交互式元素，并且浏览器在主线程完成其当前任务之前无法响应用户输入。
如果用户在主线程空闲时单击了此元素，则FID会短得多。同样，如果浏览器花费较少的时间来应用样式和JS代码，则空闲时间窗口将更大，并且任何潜在的延迟也将变得更小。
因此，最大程度地减少主线程工作是当务之急，您可以在Lighthouse中进行性能审计以获取指导。
最小化主线程工作类别
您还可以在此处找到有关减少主线程工作的常规准则和最佳实践。
服务器请求，文件大小和主线程都进行了优化，现在该重新看一下JavaScript代码了。浏览器需要时间来处理和执行JavaScript代码，这花费的时间越长，主线程所花费的时间就越多。
当JavaScript执行时间超过2秒时，Lighthouse也显示警告，如果执行时间超过3.5秒，则审核失败。
您可以减少javascript执行时间的区域
如果您的JavaScript响应时间有问题，可以采取以下步骤来加快处理速度：
- 优化/减少JavaScript代码量
- 仅通过实施代码拆分来发送用户所需的代码
- 减少对第三方代码的依赖
- 缩小并压缩您的代码
- 删除未使用的代码
- 通过使用PRPL模式缓存代码来减少网络旅行
虽然您只能在现场测量FID，但是Lighthouse是一个“实验室”工具，这意味着您可以在开发过程中运行这些报告，以使页面在上线之前处于良好的位置。
视觉稳定性：累积版式移位（CLS）
“核心网络生命”中的“视觉稳定度”信号可测量页面元素完全呈现后发生移动位置的情况。在野外，这导致元素在其他元素加载时在页面上跳动，从而导致布局不稳定和大量UX问题。
在极端情况下，这些可能是关键问题。
意外移动通常是某些元素在其他元素之后加载或呈现后调整大小的结果。这可能是由于异步或动态加载，无法定义媒体文件的尺寸，使用第三方窗口小部件或一系列不良编码做法引起的。
Google使用称为累积布局偏移（CLS）的标准来衡量视觉稳定性的发生，该标准可以检测元素在浏览器中呈现后的移动。
累积版式移位分数
您的CLS分数是根据视口中移动的元素影响了多少（影响分数）和这些元素移动的距离（距离分数）来计算的。然后，Google使用以下公式来计算您的版式转换得分：
布局偏移分数=冲击分数x距离分数
您可以在此处找到此计算的更详细的细分。
如何为CLS优化
您可以使用以下工具在现场和实验室中测量页面的CLS：
现场工具：
- Chrome用户体验报告
- PageSpeed见解
- Search Console（核心网络生命力报告）
实验工具：
- Chrome DevTools
- 灯塔
- WebPageTest
Google希望CLS分数达到0.1或更低，您可以通过遵循一些基本编码原则来提高分数：
累积版式移位分数
- 请务必在图片和视频元素上包含size属性，否则请使用CSS长宽比框之类的东西保留所需的空间。这种方法可确保在加载图像时浏览器可以在文档中分配正确的空间量。请注意，您还可以使用unsize-media功能部件策略在支持功能部件策略的浏览器中强制执行此行为。
- 除非响应用户交互，否则切勿在现有内容上方插入内容。这样可以确保可以预期发生任何版式移位。
- 与将动画触发布局更改的属性动画相比，更喜欢使用转换动画。对过渡进行动画处理，以提供状态与状态之间的上下文和连续性。
您可以在此文档页面上从Google找到更多有关优化CLS分数的信息。
充分利用核心网络生命
谷歌表示，页面体验信号（包括Core Web Vitals）可能是提供相似内容质量的页面之间的决定性因素。随着SERP的竞争一直在增加，内容质量也在不断提高，仅凭内容质量打败竞争对手就变得越来越困难。
Core Web Vitals为品牌在SERP中竞争提供了新的空间，应将其视为在有机搜索中提高竞争力的机会。
Google用来衡量页面体验的新标准虽然有些技术性，但对其进行优化涉及您应该已经遵循的所有最佳实践。关键区别在于，提供出色体验的奖励将增加，并且通过对网站代码进行一些调整，更高的搜索排名应该在相距不远的范围内。