AMP

开发者如何创建内容创作者喜欢使用的 WordPress AMP 体验

WordPress

编辑注: 以下帖子由 WP Engine 的网络战略副总裁 David Vogelpohl 撰写。WP Engine 是 WordPress 的数字体验平台。

在网络开发领域,我们经常使用自动化工具,阅读有关项目效率的书籍,并部署大量技术以更快的速度提供创新。虽然我们经常问自己,“我们如何才能更好地钓鱼?”但我们中的许多人很少问自己“我们如何为营销人员和内容创作者提供他们自己钓鱼所需的工具?”。

本文讲述了 WP Engine 如何以及为何投资利用 AMP 来帮助开发者创建内容创作者喜欢使用的性能出色、设计精良且功能丰富的体验。

为什么 WP Engine 关心开发和设计效率?

2018 年年中,WP Engine 收购了 Genesis(WordPress 的主题框架)和 Atomic Blocks 插件,作为我们提供直观且强大的设计和开发解决方案的战略的一部分。Atomic Blocks 是一个 WordPress 插件,其中包含一个预先设计的可配置网站组件库(称为“块”)和称为“布局”的块排列,使网站创建者可以轻松设计和部署新体验。

Atomic Blocks 用户现在可以在创建 100% AMP 验证体验时利用组件化页面构建的强大功能。

这通常通过 Genesis 和 Atomic Blocks 利用 WordPress 中基于新块的编辑器来实现,该编辑器在 2018 年底发布到 WordPress #core 时代号为“Gutenberg”。

用户可以以任何方式设置 WordPress 块的样式(Genesis 有助于此);提供可配置的设计控件以适应品牌,使用内容预加载块,并将块与其他可扩展系统或软件集成。

以下是用 Atomic Blocks 使用块编辑器的示例。

以下是一个 示例,展示了 StudioPress 主题如何使用这种模块化块方法,由内容创建者高度配置,已更新为使用 AMP,并且在 Google 的 Page Speed Insights 中获得了令人难以置信的 95 分(高于 AMP 前的 54 分)。Genesis 用户还可以制作自己的自定义主题。以下是一个 示例,展示了使用自定义构建的 Genesis 主题的 AMP 网站。无论选择预先设计的主题还是自定义主题,由于 AMP,我们的客户可以比以往更快地构建令人难以置信的快速网站!

为什么 WP Engine 决定为 Genesis 和 Atomic Blocks 添加 AMP 支持?

考虑到某些品牌希望采用 AMP,以及我们的代理和开发人员客户认为他们没有得到我们或 WordPress 生态系统中其他产品的支持,我们认为在使用 AMP 构建时支持他们势在必行。

当然,我们的既定使命是为开发人员提供工具,让他们可以轻松创建内容创建者乐于使用的体验,我们必须以一种方式来实现这一目标,不仅让开发人员可以轻松创建这些体验,而且还要以一种方式让内容创建者在创建他们需要创建的登陆页面或网页时不必过多考虑 AMP 兼容性。

内容创建者必须喜欢为他们的品牌创建 AMP 兼容体验。

对于像 Genesis 或 Atomic Blocks 这样流行的设计和开发工具来说,添加新功能或支持某些标准(如 AMP)是一项艰巨的任务。需要考虑使用这些产品的 60 多万个网站,以及全球依赖这些产品作为其日常工作流程一部分的众多开发人员。

与你们中的许多人一样,每当考虑在我们的产品中添加新内容时,我们都会非常小心。在涉及 AMP 支持时,我们首先从客户那里了解他们使用 AMP 的频率、他们喜欢什么以及不喜欢什么。

我们收到的反馈在一定程度上符合您对广泛的网络开发人员对 AMP 的期望。大多数人实际上从未使用 AMP 构建过网站,并声称他们的下游客户很少要求 AMP 网站。话虽如此,许多人承认他们确实有一些关键客户(尤其是在出版领域),他们会要求 AMP 网站,并且这些要求通常源于对性能和在各种平台内提高搜索/社交可见性的渴望。

然后我们询问:“对于追求 AMP 策略的客户,您使用哪些工具或技术来满足这些需求?”答案有点令人震惊。绝大多数的回答是“我们没有任何工具或技术!”

我们如何处理 Genesis 和 Atomic Blocks 中的 AMP 支持

Google 和其他贡献者在 2019 年发布了适用于 WordPress 的 AMP 插件。此插件为 WordPress 站点启用了许多 AMP 的关键功能,并且针对 WordPress 核心主题进行了优化。核心主题是 WordPress 本身附带的主题;但是,大多数 WordPress 站点由开发人员创建的自定义主题或由 WP Engine 等公司创建的高级主题提供支持。

自定义主题和高级主题(使用 Genesis 或其他方式创建)要求这些主题的开发人员优化其代码,以帮助确保 AMP 兼容性,即使在使用适用于 WordPress 的 AMP 插件时也是如此。例如,WP Engine 的一些高级主题包含与 AMP 不兼容的元素,因此这些主题的任何用户都会遇到 AMP 验证失败。

此外,为前端体验提供支持的插件(例如我们的 Atomic Blocks 插件)还必须确保对其代码进行优化,以确保 100% 的 AMP 验证。

适用于 WordPress 的 AMP 插件确实处理了大量使 WordPress 站点支持 AMP 的工作;但是,如上所述,您站点的某些方面可能需要额外的工作。

由于这些要求,我们开始执行一项任务,即向 Genesis 添加功能,以便开发人员创建具有 100% AMP 验证的自定义主题、更新 AMP 兼容性的主要高级主题以及替换 Atomic Blocks 中未通过 AMP 验证的元素。

使用 Genesis 构建自定义 AMP 主题

在我们的 Genesis 3.0 版本 中,我们添加了允许开发人员更轻松地创建 100% AMP 验证的自定义主题的功能。

使用 Genesis 创建 100% AMP 验证的主题首先从安装适用于 WordPress 的 AMP 插件开始。AMP 插件的贡献者团队做得非常出色,因此 Genesis 主题开发人员只需运行此插件即可获得很多免费的胜利。

以下是 WordPress 用户在使用 AMP 插件时看到的屏幕截图。

与 AMP 插件相关的 Genesis 世界中的两个主要好处是它会自动将标记转换为 AMP HTML 并处理 CSS 树抖动,以帮助主题开发人员保持在 50KB CSS 限制内。

话虽如此,Genesis 本身以及肯定有许多使用 Genesis 制作的主题具有或曾经具有 Javascript 依赖项,这当然会导致网站或某些页面验证失败。关于 Genesis 本身(相对于使用 Genesis 构建的“子主题”),Javascript 依赖关系的一些关键领域是 Genesis 菜单样式系统(特别是“Superfish”)、与线程评论相关的 Javascript 以及与跳过链接相关的脚本。

在 Genesis 3.0 中,我们用 AMP 运行时替换了这些依赖项或使其变为可选/禁用。

Genesis 开发人员获得的一些好处是,子主题不再需要包含自己的 responsive-menus.js 脚本或执行任何排队工作。如果您利用新的响应式菜单 API,Genesis 现在包含此脚本并处理所有排队工作。

最终结果是,使用 Genesis 框架构建 100% AMP 验证的主题比以往任何时候都更容易。利用这些功能,我们已经能够轻松更新我们两个高级子主题以使其与 AMP 兼容,并且 Genesis 生态系统中的无数其他自定义子主题也已更新或创建,以实现 AMP 兼容性。

自 Genesis 3.0 发布以来,社区反应总体上是积极的,有许多开发人员不仅将 AMP 作为他们构建网站的一部分,还与他人分享他们的知识和经验,如这篇题为“构建原生 AMP WordPress 网站”的优秀文章中所见。

使用 Atomic Blocks 增强 WordPress 块编辑器

正如自定义主题要求开发人员为 AMP 优化其代码一样,控制前端体验的插件也必须这样做。在我们的案例中,Atomic Blocks 插件为网站创建者提供了一种丰富的体验,他们可以使用称为“块”的网站组件来创建新体验,而不管他们使用什么主题。

使 Atomic Blocks 与 AMP 兼容实际上是一项相当容易的工作,因为这些块中只有少数元素未能通过 AMP 验证。对我来说,这是一个很好的例子,说明有多少设计和开发工具在很大程度上与 AMP 兼容,而无需进行彻底的重构。

在 Atomic Blocks 的情况下,我们能够重构插件启用块和布局的部分以使其与 AMP 兼容。这项工作非常轻松,我们能够在一次冲刺中完成!

在下面的示例中,您可以看到内容创建者如何轻松创建美观、高性能且实用的 AMP 体验,甚至没有意识到这些体验是 100% AMP 验证的。

这些类型的无摩擦体验为营销团队提供了极大的价值,并有助于将破坏路线图、令人沮丧的登录页面工单排除在开发团队的工作积压之外。通过这种方式,品牌可以在数小时(而不是数天或数周)内创建新体验,同时利用 AMP 的强大功能。

AMP 的未来适用于 WP Engine 的设计和开发产品

对于 Genesis 主题框架,我们的工程团队正在紧跟 AMP 的演进,以确保我们的客户在使用 Genesis 构建的主题中配备最新的功能。我们还在考虑扩展我们高级 Genesis 主题库存中的 AMP 支持,以便客户在利用高级主题和 AMP 时拥有更多选择。

对于 Atomic Blocks 插件(它也在我们的高级 AMP 主题中使用),我们正在继续采用 100% AMP 验证方法,以便 Atomic Blocks 的用户可以在 AMP 上下文中享受 Atomic Blocks 的全套功能。

虽然我们意识到一些客户或他们服务的下游品牌可能不会选择部署以 AMP 为重点的策略,但对我们而言,当他们这样做时,我们为他们提供工具,让开发团队能够创建内容创作者喜欢使用的漂亮、高性能且功能齐全的体验,这一点很重要。

作者:WP Engine 网络战略副总裁 David Vogelpohl