本周，谷歌宣布Web Vitals 计划，这是一系列指南，重点介绍谷歌认为对网络上的良好用户体验至关重要的内容。由于 AMP 项目的目标始终是确保“网络在任何地方都能为每个人提供更出色、更快速的体验”，因此我们希望分享 AMP 如何帮助网站所有者达到 Web Vitals 概述的建议性能目标。我们将深入探讨让网络感觉即时的相关工作，并分享您应该采取哪些措施来让网络变得更好。
什么是核心Web Vitals？
Web Vitals 包含大量内容！我们将在本文中介绍核心Web Vitals；您可以在web.dev 上了解差异。以下是该网站上最相关的信息
核心 Web Vitals 是适用于所有网页的 Web Vitals 子集，所有网站所有者都应衡量这些子集，并且将在所有 Google 工具中展示这些子集。每个核心 Web Vitals 都代表用户体验的一个不同方面，可以在现场进行衡量，并反映了关键以用户为中心结果的实际体验。
构成核心 Web Vitals 的指标会随着时间的推移而演变。2020 年的当前指标集重点关注用户体验的三个方面——加载、交互性和视觉稳定性——包括以下指标（及其各自的阈值）
最大内容绘制 (LCP)：衡量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后 2.5 秒内发生。
首次输入延迟 (FID)：衡量交互性。为了提供良好的用户体验，页面的 FID 应小于 100 毫秒。
累积布局偏移 (CLS)：衡量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1 以下。
不要迷失在术语中，关键点在于这些指标可帮助您确保网站满足关键的用户体验期望，并且可以通过新的跨浏览器 API 在现场进行衡量。
所有这些指标都可以（也应该）在现场进行衡量，这样您就可以跟踪用户实际体验的内容，而不仅仅是实验室中的结果。现在我们了解了这些新准则的组成，让我们看看 AMP 如何满足这些准则。
首次输入延迟
FID 得分较低意味着当用户点击按钮或点按输入时，他们无需等待，并且网站几乎立即做出响应。根据 web.dev 上的文档，目标是在第 75 个百分位数时达到 100 毫秒。这意味着用户首次与输入进行交互时，在该页面被查看时，至少有 75% 的时间反应时间少于 100 毫秒。与所有核心网络生命周期指标一样，此信息需要从您的用户那里收集。如果您尚未查看，您应该查看真实用户数据报告（提示：PageSpeed Insights 是一个很好的起点），以查看您是否满足这些阈值，而不仅仅是测量您开发机器上的内容。
事实上，FID 无法 在开发中进行衡量 - 获得有意义数据的唯一方法是查看真实用户在您的网站上进行交互所花费的时间。在开发过程中，总阻塞时间 是一个很好的类比。它们衡量的内容不同，但如果您减少 TBT，您可能会减少 FID！如果您看到很多高 FID 值，通常意味着浏览器的主要线程正忙于执行其他操作，例如解析代码、加载第三方资源等。您可以在 web.dev 上了解有关如何提高 FID 得分的更多信息
AMP 通过多种方式来保持较低的 FID 得分
AMP 的代码不会阻塞您的用户
AMP 仅允许异步 JavaScript。我们确保它不会意外执行可能阻止用户实际使用您网站的缓慢或计算密集型操作。
延迟布局
AMP 会延迟渲染在加载过程中不太可能立即看到的元素，以保持网站的即时感。这意味着 AMP 不会阻止用户点击和轻触，因为它在网站加载时处理网站底部的 JavaScript 驱动的视频播放器。
分块进程
AMP 实施进程分块，以确保长期运行的任务被拆分，并且不会锁定您的页面。通过将大型任务拆分成小块版本，AMP 可以让您的网站对每次交互都保持响应。
其他所有内容的沙盒
如果需要来自 AMP 之外的代码，它必须在其自己的 iframe 中运行。通过在其自己的容器中运行该代码，它无法阻止用户与您的页面进行交互。这意味着缓慢的广告或代码繁重的视频播放器不会阻止用户实际使用您的网站。
累积布局偏移
您可能在 AMP 博客上看到过我们 最近对 CLS 的深入研究。由于加载内容缓慢或图像和视频过大，导致网页四处跳动，这在当今世界中会给用户带来各种各样的挫败感。这就是为什么良好的 CLS 得分是构建良好网站的关键部分。Google 建议您的 CLS 保持在 0.1 以下。这比其他核心网络指标的测量要复杂一些，因此我建议您阅读 web.dev 文档 以获得更好的理解。要理解的关键是，较低的 CLS 意味着用户看到的是稳定且可预测的，而不是到处跳动。
CLS 是 AMP 真正出色的另一个领域。它从头开始构建，以避免在 CLS 上得分较低的网站最常见的缺陷。它制定了许多规则来帮助您保持此数字较低，包括：
静态大小布局系统
AMP 的布局系统建立在能够在下载资源之前推断其大小的目标之上。例如，AMP 要求任何图像、视频、iframe（除文本之外的任何内容）通过内置组件加载，这要求开发人员告诉浏览器这些资源的高度和宽度。
<amp-img height="200" width="400" src=...Code language: HTML, XML (xml)通过确保在下载内容之前包含这些属性，AMP 可以确保浏览器能够在图像加载后以其将显示的方式布局页面。如果没有这些属性，浏览器不可避免地需要在下载并确定每个元素所需的页面空间时改变布局。
动态内容所需的交互
可能导致重新布局的页面上的所有更新都需要由用户交互触发。你不能在用户点击某个内容之前弹出一个窗口小部件。通过限制更新在交互响应中发生，你的用户不太可能遇到不愉快的意外情况。
高效的字体加载
许多网站使用外部字体来设置其页面的样式。必须下载外部 CSS 文件、查找引用并下载字体很容易导致页面加载不稳定、跳动，并可能给用户带来困惑的体验。AMP 通过要求所有 CSS 都内联在网站源代码的顶部来缓解此问题。任何字体都可以快速发现和下载。此外，我们在 FID 探索中提到的 JavaScript 的异步加载意味着正在下载的 JavaScript 也不会阻止浏览器处理自定义字体。
最大内容绘制
当用户加载你的页面时，他们看不到网络回调或其他性能指标。他们只能看到视觉输出，或者看不到。LCP 测量最大元素呈现的时间。测量 LCP 发生的时间将让你深入了解你的页面对用户来说实际感觉有多快。这就是 LCP 是如此重要的指标的原因。web.dev 的建议是 LCP 在第 75 个百分位数内发生在 2500 毫秒内。
AMP 已经进行了一些优化，以使你的最大内容绘制尽可能快地发生，包括
智能资源加载
AMP 的目标始终是给人以即时感。它为实现此目标所做的众多事情之一就是确保仅在图像和广告位于折叠上方或用户可能快速滚动到它们时才最初下载它们。通过限制在加载页面时获取的资源数量，AMP 可以确保优先考虑用户实际查看的内容。结果是用户感觉网站速度更快。
预加载和预渲染
当 AMP 页面托管在 AMP 缓存中时，会向页面添加一些优化，以确保其尽可能快，例如预加载内容。因此，当用户通常点击预渲染的 AMP 页面时，浏览器已经下载并渲染了整个页面 - 感觉只是瞬间。
进一步提升您的 AMP 页面
到目前为止，我们只是了解了 AMP 开箱即用的功能。然而，我们的团队认为，有几个开发实践对于出色的用户体验至关重要，而这些实践无法在运行时实现。虽然我们非常努力地让 AMP 的性能远远超出核心网络指标设定的预期，但仍然有可能达不到要求。为了进一步提升 AMP，您可以执行许多其他优化。在我们的研究中，我们发现开发者还有进一步优化其 AMP 页面提供方式的空间。最常见的优化机会包括
解决服务器响应时间慢的问题
如果您的服务器速度慢，那么几乎所有事情都会变慢。AMP 缓存有助于优化交付，就像 CDN 一样，但几乎所有 AMP 网站在 AMP 缓存之外都有一些流量。这意味着确保您的服务器快速且响应对于核心网络指标的成功至关重要。
避免使用超大图像
为了让你的网站尽可能快，你应该避免使用比网站上显示的更大的图片。加载未经优化的图片的网站通常会增加数百千字节的下载大小，这会直接损害其核心网络指标中的 LCP 结果。确保通过优化 AMP 原点上的图片来尊重用户的宝贵时间和带宽。
AMP 缓存会优化你的代码以避免此类问题，但请记住，优化仅在缓存中执行。任何直接访问你的网站的人，无论是通过社交媒体上共享的链接还是直接导航到你的网站，都无法获得相同的体验。为了确保你为所有用户获得出色的核心网络指标得分，在原点优化你的网站非常重要！
让 AMP 变得更好的工具
AMP 团队提供了许多开源工具来优化你的网站。
AMP 优化器
AMP 优化器是提高 AMP 渲染性能的绝佳选择。AMP 优化器具有服务器端渲染和代码缩小等功能，是确保你的网站快速加载的绝佳第一步。
适用于 WordPress 插件的 AMP
如果你使用 WordPress 并且对 AMP 感兴趣，你应该查看官方 AMP 插件。它由 AMP 团队开发和维护，将 AMP 内容生成引入 WordPress，采用 WordPress 方式，并为你提供了一个无需深入了解性能优化技术专业知识即可发布快速 AMP 页面的交钥匙选项！官方 AMP 插件还为开发人员提供了高级工具，以帮助他们在 WordPress 中进行 AMP 开发。
Next.js
Next，你只需添加一行代码即可将任何 React 网站变成 AMP 网站！这样做会自动为你提供丰富的性能优化，例如服务器端渲染（用于更快的 LCP）、AMP 优化器集成等。快来了解一下！
你越早添加性能优化，越好。通过使用上面提到的工具，你可以确保每个用户都能获得快速流畅的体验，而不仅仅是通过缓存页面访问的用户。
结论
Web Vitals 和 Core Web Vitals 是帮助网站所有者了解在何处以及如何改善网络用户体验的重要一步。它们不仅将帮助开发者改善和维护当今出色的用户体验，而且还将让开发者了解未来更新后网络上的最新性能预期。
世界各地的 AMP 项目贡献者致力于确保网站所有者在创建 AMP 页面时获得最强大的性能保证。AMP 团队会持续监控 AMP 页面在网络上的执行情况，并定期使用性能增强功能更新 AMP 库。由于 AMP 是一个始终处于最新状态的“常青”库，这意味着您和您的用户将始终受益于最新的 AMP 改进，而无需您付出任何额外努力。
如果您有任何问题，请 告知我们，否则请关注我们 Twitter 或 注册我们的时事通讯，确保您了解即将推出的任何其他激动人心的 AMP 变更。
作者：Patrick Kettner，开发者助威者，Google AMP 项目