AMP

为核心网页指标优化您的 AMP 页面体验

网站

核心网页指标 是帮助网站所有者了解在何处以及如何改进网站用户体验的重要一步,而 Google 的 页面体验信号 将激励人们关注这些客观指标。它们不仅将帮助开发人员在今天改进和维护良好的用户体验,而且还将使开发人员了解未来更新的网页最新性能预期。 

来自世界各地的 AMP 项目贡献者致力于确保网站所有者在创建 AMP 页面时能够轻松获得出色的性能体验。但是,与许多其他框架一样,AMP 无法实现所有 Web 开发最佳实践。在这篇博文中,我们将分享开发人员应该做些什么来确保从发布者网站或通过 AMP 缓存提供的 AMP 页面得到优化。

进一步推动您的 AMP 页面以满足核心网页指标

AMP 旨在使创建出色的用户体验变得容易。但是,我们的团队认为,有一些开发实践对于获得出色的用户体验至关重要,这些实践可能需要额外的步骤。

了解 AMP 流量

页面的核心网页指标是通过 观察用户与网页的真实互动 来确定的。对于 AMP 而言,这意味着页面可以从发布者的域或通过 AMP 缓存提供,具体取决于用户如何遇到内容。许多网站发现,其 AMP 访问量中很大一部分(超过一半或更多)发生在其自己的域上。 AMP 开发人员可以 衡量 AMP 缓存内外 的核心网页指标,方法是遵循此 指南

实施 Web 开发最佳实践

在我们的研究中,我们发现开发人员还有提升空间,可以进一步优化他们提供 AMP 页面的方式。最常见的机会包括

  • 解决缓慢的服务器响应时间:如果您的服务器速度很慢或距离最终用户很远,那么几乎所有内容都会很慢。AMP 缓存有助于优化交付,就像 CDN 一样,但几乎所有 AMP 网站都有一些流量来自 AMP 缓存之外。这意味着确保您的服务器速度快且响应迅速对于获得出色的用户体验至关重要。
  • 避免使用过大的图像:为了使您的网站达到用户期望的速度,您应该避免使用比用户使用的设备显示屏更大的图像。 
  • 避免由字体引起的布局偏移:布局偏移是指网页上的一个或多个元素动态变化,导致内容“偏移”。获取和渲染网页字体可能会直接导致布局偏移。 我们目前的建议是 将字体预加载与 font-display: optional 结合使用,用于第一个视窗中使用的所有关键字体。我们正在与标准委员会合作制定更多指南,因为这种布局偏移是所有网页通用的。
  • 使用 data-hero 标记英雄图像。英雄图像是在许多网页中不可或缺的一部分,应该尽快加载,以满足用户的期望。使用 data-hero 属性标记英雄图像可以帮助 AMP 缓存和优化器识别和优化英雄图像,从而使图像渲染时间最多缩短 50%:<amp-img data-hero src="…">

使 AMP 变得更好的工具

为了在您的 AMP 页面上获得最强大的用户体验,我们强烈建议所有网站所有者实施一些额外的优化,您可以自己执行这些优化。使用最新的 AMP 优化器 是自动从 AMP 的任何新的服务器端优化中获益的最简单方法。我们还在去年推出了 AMP 页面体验指南(如下所示)。自推出以来,我们已经为 AMP 页面体验指南添加了更多可操作的反馈,使其更加有用。这是由使用该工具测试其 AMP 页面的网站推动的。例如,它现在将为您提供自定义字体加载建议,以帮助您优化 LCP 和 CLS。

AMP 页面体验指南结果的屏幕截图

如果无法通过可操作的路径使 AMP 页面通过这些标准,我们希望收到您的反馈并直接为您提供支持。您可以从 AMP 页面体验指南中提交请求,如下所示,或直接与我们联系 GitHub

直接从 AMP 页面体验指南中提交 AMP 问题

结论

AMP 项目专注于我们的愿景,即创建一个强大、以用户为中心的开放式网络。您可以使用 AMP 页面体验指南 查看您的 AMP 页面在核心网页指标上的表现,我们鼓励您对发布者域和 AMP 缓存上推荐的优化采取行动。

感谢您,AMP 开发社区,感谢您的反馈。与往常一样,如果您有任何 问题或功能请求,请告诉我们。

作者:Naina Raisinghani,AMP 项目产品经理