Core Web Vitals：页面速度优化指南

什么是核心网页指标？

Google 关注的是真实的体验指标，比方说：页面加载速度有多快？它的交互速度有多快？它有多稳定？当访问者在移动设备或桌面设备上访问网页时，在速度方面的体验是怎样的，他们与它交互的速度有多快，诸如此类。

现在它加入了一组被 Google 称为页面体验信号的指标。它不是全然独立的。它与页面体验指标组合在一起衡量网页排名。这些指标诸如：移动友好性，HTTPS，插页广告、弹出式广告等等。

与其说是传统排名信号的页面文本，不如说是关于用户体验和感觉，他们使用页面的愉悦程度，以及它本身的实用性。当移动设备速度不那么快时，这些在移动设备上显得尤其重要。这就是谷歌在衡量的东西。 用户体验的核心网页指标如下： 

• 最大内容绘制（LCP）：该指标衡量网页上的主要内容向用户显示所需的时间。Google 建议 LCP 小于 2.5 秒。 
• 首次输入延迟（FID)：当用户第一次与页面交互时，您的网页的响应时间。这包括链接点击、按钮点击和自定义 JavaScript 操作。Google 建议 FID 小于 100 毫秒。 
• 累计布局偏移（CLS）：这衡量意外移动网页主要内容的布局偏移数量。这些变化会影响用户正确阅读内容和与页面交互的能力。Google 建议 CLS 分数为 0.1 或更低。 

改善体验

想象一下，你正走在一个陌生的城市街道去参加一个重要的约会。你在路上穿过各种街道和地标。但到处都有松动的铺路石会让你绊倒，还有自动门需要你等着它缓慢打开再供你穿行，意外的施工弯路会让你误入歧途。所有这些事情都会打断你的进程，增加你的压力，让你无法到达目的地。 使用网络的人也在类似这样的路程中，他们的行动是连续的步骤。就像在现实世界中一样，他们可能会被延迟打断，从他们的任务中分心，并导致犯错。这些事件会导致体验的满意度降低，并迫使用户放弃去一个地点或整个体验过程。 在这两种情况下，消除干扰和障碍是确保体验顺利进行和用户满意的关键。 那么，是什么让用户的上网体验中断呢？

因等待而中断（LCP）

最大内容绘制（Largest Contentful Paint，简称 LCP）衡量网页的加载速度和性能。用外行的话来说是页面加载速度有多快吗？其实是非常简单的概念。就是电脑屏幕窗口中最大的图像、视频和文本很大程度上受渲染时间的影响。

这就是谷歌正在关注的。电脑屏幕窗口中最大的东西，无论是桌面设备页面还是移动设备页面，最大的图像、视频还是文本等内容，加载速度有多快？这个问题的答案很简单，就是会受到服务器时间、CSS、JavaScript、客户端渲染的影响。 网络用户最常见的中断类型是等待页面加载。对于开发人员来说，页面加载是一个离散事件，一些延迟可能是不可避免的。然而，页面加载通常发生在用户的体验中，因为他们在新闻中了解最近的事件，研究新产品或添加商品到购物车中购买。所以从用户的角度来看，等待加载特定的页面而中断并不代表自然的中断:用户还没有达到他们的目标，这可能使他们更不能容忍延迟，这意味着页面需要快速加载，这样用户的体验过程才能顺利进行。 多快才算真的快？这是一个没意义的问题，因为没有唯一的答案，有三个主要原因。 首先，答案取决于您考虑的结果，例如放弃、用户满意度或任务性能。不同的研究侧重不同的角度，并产生不同的结果。 其次，如果您绘制有多少用户停留在一个网站上，作为他们经历的延迟次数的函数，您将看不到X秒后从100%到0%的清晰步骤。相反，您会看到如下所示的平滑分布： 因此，我们必须问：我们的目标是这条曲线上的哪一点？换句话说，我们一方面在速度上投资了多少钱，另一方面我们会失去多少用户？ 最后，延迟的影响因背景和情况而异。新闻网站、购物网站和旅游网站通常是不同类型的用户体验过程的一部分，上面的整个曲线可能对每一个人来说都是不同的。即使在特定的环境中，网站设计和用户行为也会随着时间的推移而改变。 尽管这比我们所希望的更困难，但在不同绩效水平上分配结果仍然包含有用的提示。特别是，这个分布揭示了在给定的性能水平上我们可能会失去(或正在失去)多少用户。此外，曲线在不同点上的陡度可以告诉你，通过特定数量的优化速度，你将获得多少回报。这些都是你做出权衡决定的重要因素，因为你作为设计师或工程师的时间也很宝贵。 因此，我们的目标不是寻找一个单一的神奇数字，而是在研究中找到有用的价值范围和合理的指导方针。例如：

• 一项研究发现，延迟降低了满意度和返回意向。在不熟悉的网站上，2秒的延迟足以导致大部分下降——熟悉的网站在更长的延迟后跌至最低点。在不熟悉的网站上，表现也会受到影响，大多数情况下会延迟4秒。
• 另一项研究涉及在网页上浏览嵌套菜单。在加载每个面板时，测试了间隔3秒的一系列延迟。当延迟从0秒增加到3秒，或者从9秒增加到12秒时，满意度会下降。返回的意愿也随着12秒的延迟而下降。6秒的延迟足以让一些参与者在网站上说它很慢。
• 一项研究发现，移动网络用户在屏幕上的注意力不会超过4-8秒。这意味着，如果他们在您的页面加载好之前转移注意力，他们转移注意力的时间会进一步延迟他们最终看到页面的时间。所以5秒的加载时间可能会变成10秒的有效延迟。
• 有人认为，系统的反应速度应该与人类互动时经历的延迟相当。这导致了回复大约需要1-4秒的指导。

实证研究来自高可变性和逐渐下降的数据，而不是硬性阈值，其他研究基于理论预测。但总的来说，他们认为将加载时间控制在几秒钟内是值得的。 The Largest Contentful Paint（LCP）度量页面到页面的导航对用户已完成。我们建议网站将LCP控制在2.5秒以下，以满足75%的页面加载。这项建议进一步参考了当今对网络的Chrome分析，旨在使足够多的网站在实践中实现的可行性。有关该分析的更多详细信息，请参阅定义Core Web Vital度量阈值。

不稳定造成的中断和错误（CLS）

累积布局偏移或 CLS 测量视觉稳定性。Google 声明对象和元素不应在页面上移动，因为它正在为用户呈现/加载。基本上，CLS是指在网页的生命周期内发生的任何预期的布局变化。我们肯定都经历过在手机上加载页面的体验，想去按一个按钮可最后一秒按钮的位置却移动了，结果我们点到了其他东西，页面发生了意想不到的布局变化。 大多数网页需要加载几个元素，这些元素通常会逐步加载。这实际上可能是件好事：如果一些内容早点出现，用户就可以开始朝着目标前进，而无需等待所有内容加载。 然而，如果已经可见元素的位置随着其他元素的加载而移动，这可能会以两种方式对用户的体验产生负面影响。 一个是，如果他们正在看的元素突然移动，他们的眼睛至少需要几百毫秒才能找到它的新位置。如果它滚动到视野之外，需要更长的时间。这种类型的干扰会影响用户的体验，并让人非常沮丧。 更严重的后果是，意想不到的布局转移可能会导致错误。如果用户试图轻点一个元素，然后跳转，他们可能最终会点击其他移动到原来位置的元素。这是因为用户感受到跳转带来的延迟，决定放弃行动，最后这样做，人们难以做出适当的反应。也许是无意中点击链接、广告或“立即购买”按钮，严重扰乱了用户的预期体验。 累积布局移位（CLS）衡量页面上意外布局移位的频率和严重程度。更少的位移意味着中断和错误的机会更少。我们建议网站将CLS设定在0.1以下，以保证75%的页面负载。

低响应导致分心和错误（FID）

首次输入延迟或 FID衡量交互性。FID测量用户第一次与网页元素交互（点击链接、点击对象等）到该特定元素开始处理以响应用户操作所需的时间。这个问题基本上是问页面的互动速度有多快？换句话说，当用户单击某物、按钮或JavaScript事件时，浏览器可以多快开始处理并产生结果？

当你点击某物而什么都没发生或非常缓慢才发生时，这便不是一次好的体验。 同样，您不希望用户体验在与您的网站的瞬间互动中受到影响。以下是一些与实现这一目标相关的研究见解：

• 一项研究发现，当触屏按钮的视觉反馈延迟从70毫秒增加到100毫秒时，就可以被人感知到。当时间从100毫秒进一步增加到150毫秒时，人们对按键质量的评价也明显降低。
• 一项实验表明，在动画中，一个事件导致另一个事件的错觉在延迟约100毫秒时开始中断。有人建议，用户界面中直接操作的错觉将随着这部分延迟而中断。（这个实验显然还参考了早些时候的建议，即动作应在100-200毫秒内产生可见效果。）

与LCP一样，没有“具体参考的数字”，只有代表分布的标记。有些人比其他人敏感得多，当涉及触觉或听觉反馈时，可能会注意到更短的延迟。 除了改变用户界面的感觉外，延迟某些用户期望的内容也会导致他们犯错。他们可能会重复一个动作，因为他们认为它不起作用，但第二个动作可能会产生不好的效果。例如，他们可能会两次单击“添加到购物车”按钮，但没有意识到他们现在正在购买两件商品。 与这些体验相关的响应能力由首次输入延迟（FID）来衡量，我们建议网站将75%的页面负载的FID保持在100毫秒以下。

影响

我们分析了数百万页渲染，以了解这些指标和阈值如何影响用户。我们发现，当网站达到上述阈值时，用户放弃页面加载的可能性要低24%（在任何内容渲染完之前离开页面）。 我们还专门研究了新闻和购物网站，这些网站的业务依赖于流量和任务完成量，并得出了类似的数字：新闻网站放弃量减少了22%，购物网站的放弃量减少了24%。很少有干预措施能显示在线业务的这种程度的改善，像这样的结果是我们和生态系统合作伙伴优先考虑Web Vitals指标的部分原因。 为用户提供平稳的体验是增加在线流量和基于网络的业务的最有效方式之一。我们希望Web Vitals指标和阈值将为出版商、开发人员和业务所有者提供清晰可行的方法，使其网站成为更多用户快速、流畅体验的一部分。

衡量核心网络指标的工具

从Chrome 用户体验报告开始，Google 已将 Core Web Vitals 纳入其面向开发人员和网站管理员的多个顶级工具中。  该报告从用户浏览网页时收集真实数据，然后通过 PageSpeed Insights 和 Google Search Console 等工具与开发人员共享。  PageSpeed Insights 会分析您网页的性能并就如何提高其速度提出建议。它审查了移动和桌面浏览器上的所有三个 Core Web Vitals。 在 Google Search Console 中，您会找到网页的 Core Web Vitals。Google Search Console 利用 Chrome 用户体验报告中的数据向您显示整个网站的问题。 在Chrome网页核心指标的浏览器插件可以在你浏览网页或您更改了自己的网页时看到核心指标。 该扩展程序还可以查看竞争对手的当前分数。 这些工具中的每一个都允许您查看您网站的 LCP、FID 和 CLS。流量过少的网站在 Google Search Console 中可能会缺少一些指标。 

为什么Core Web Vitals 很重要

核心网页指标很重要，这可能会影响很多排名结果。  Google 已正式将 Core Web Vitals 添加到其搜索算法中。页面体验更新的全面推出应在2021 年 8 月之前完成。  此前 AMP 是出现在这些头条新闻中的必要条件。AMP的作用正在减弱。因此，您仍然必须满足常规 Google 新闻提出的要求，但 AMP 不再是出现在 Top Stories 中的必要条件。但现在必须达到 Core Web Vitals 的最低门槛。 改进您的 LCP、FID 和 CLS 可以对您的用户和您在移动搜索结果页面上的排名产生积极影响。即使在搜索结果的第一页上增加一个位置，也会导致流量大幅增加。  用户体验也是如此。如果您可以改善用户体验，则可以通过积极的口碑推荐、评论来大幅增加流量。  以缓慢加载网站的形式提供糟糕的用户体验可能会导致跳出率的不利增加。较高的跳出率可能意味着人们离开您的网站时没有滚动、点击或更重要的是没有转换。  谷歌发现，加载需要 1 到 5 秒的网页的跳出率增加了 90%。

如何提高核心指标

既然您知道什么是 Core Web Vitals 以及如何在您的网站上衡量它们，让我们看看一些关于改进它们和您的用户体验的建议。  您对网站和服务器的控制级别取决于您用于网站的平台（WordPress、Shopify 等）和您的网络托管公司。 

如何改进 LCP

Google提供了一些优化网站和改进网页的最大内容绘制指标的技巧。从您的 Web 服务器开始。如果您遇到严重的延迟，可能是时候将您的虚拟主机从共享服务器升级到专用服务器了。  考虑可能在您的网站上运行的任何可以关闭或更好地优化性能的进程。例如，在 WordPress 网站上，您可以通过删除过时或未使用的插件来减少数据库处理的进程数量。  Google 提供的第二个技巧是使用内容分发网络 (CDN)。CDN 服务有时包含在企业级托管计划中。 CDN 服务可确保您的网站快速加载，无论您的 Web 服务器用户位于多远。  接下来，缓存您的内容，以便首先缓存 HTML 页面。当您的静态 HTML 内容被缓存时，不必在用户每次访问您的网页时加载它。  WordPress 网站所有者可以使用W3 Total Cache或WP Fastest Cache等缓存插件自动缓存您的内容以加快加载速度。  如果您使用其他服务，它可能具有缓存设置，您可以对其进行配置以缓存您的内容。请注意，缓存服务无法处理来自第三方服务（如 Facebook）的服务器请求。  预连接还可以提高加载速度。当您加载来自非您的域的内容时，这些是必要的。不要在整个页面中从其他域加载新项目，而是在网页 HTML 的 HEAD 部分按如下方式使用预连接：

通过提前建立这些连接，您的页面将不必停留在部分加载的主要内容上，以向网站访问者提供图像或其他资源。  您还可以使用以下代码预加载 CSS 和 JavaScript 等外部资源：

这将确保它们在开始时加载并避免阻止内容完全加载。 优化 CSS 和 JavaScript 的其他方法包括从样式表和脚本中“缩小”（删除不必要的字符）、删除未使用的代码以及将初始网页加载不需要的代码移动到预加载的资源。对于最关键的代码，请考虑在线添加。 Google推荐使用 CSSnano和CSSo来缩小 CSS，以及UglifyJS来缩小 JavaScript。您还可以使用HTML Minifier来缩小 HTML 。  Google Chrome DevTools有一个 Coverage 功能，可以分析页面上 CSS 和 JavaScript 的使用情况。它可以识别可以卸载到预加载资源的代码，假设它没有被您的技术堆栈中的某些东西使用。  签名交换 (SXG)允许网站对通过第三方从其域中交付的内容进行认证。Google 与 Cloudflare 合作创建了 AMP Real URL，允许发布商在基于 Google 搜索的结果的 AMP 内容上显示其内容的原始 URL。在实施 SXG 后，从搜索接收流量的网站将看到 LCP 的提升。  改进 LCP 的其他方法是优化和压缩网页上使用的任何文本文件、图像、视频和块元素。考虑插入到页面 HTML 中的图像以及在 CSS 或主题文件的背景或设计元素中使用的图像。

如何改善FID 

改善您网站的首次输入延迟时间取决于优化您的 JavaScript 和第三方脚本的使用。后者通常引用网站分析工具和任何从另一个网站调用脚本的代码。  如前所述，您可以通过从脚本中缩小（删除不必要的字符）、删除未使用的代码以及将初始网页加载不需要的代码移动到预加载资源来优化 JavaScript 的使用。 使用 Google Chrome DevTools 的 Coverage 功能来识别可以卸载到预加载资源的代码。  Google 推荐UglifyJS来缩小 JavaScript。您还可以使用HTML Minifier和 CSS 使用CSSnano和CSSo来缩小 HTML 。  您可以在 W3C 社区组的报告中了解有关分析用户交互延迟的事件计时 API背后的技术细节的更多信息。

如何改进CLS

为了提高网页的 CLS 分数，您需要告诉浏览器在加载元素时为其分配多少空间。您可以通过向图像和视频添加特定大小属性来实现此目的。  或者，您可以在 CSS 中使用纵横友好的比例框。两者都将实现防止页面加载时内容意外移动的预期目标。  对于在用户与页面交互后加载时会移动的元素，也建议使用页面内指示器。让用户知道元素正在页面上加载可能会阻止他们点击移动元素。 

指标和工具

页面体验和搜索

头条新闻

AMP