AMP

推出适用于 WordPress 的官方 AMP 插件 v2.0

WordPress

TL;DR

大约三年前,我们着手解决在 WordPress 中启用完全 AMP 内容发布的难题,目标是让 WordPress 网站所有者轻松地在 WordPress 平台上顺利地发布内容。时间快进到今天,我们非常高兴地宣布适用于 WordPress 的官方 AMP 插件的 v2.0 版本发布!在本文中,我们将概述适用于 WordPress 的 AMP 插件,并深入探讨此主要版本的一些亮点。继续阅读以了解更多信息!

AMP 和核心网络指标

Google 最近发起了一项名为 网络指标 的倡议,目标是提供统一的质量信号指南,这些信号对于在网络上提供出色的用户体验至关重要。 

简而言之,如果我们确保我们提供给用户的页面满足这些指标的某些阈值,那么作为内容创作者,我们就有很大的成功机会。 

从一开始,AMP 就一直遵循一个简单的公理:关注用户体验,其他一切都会随之而来。这意味着 AMP 的设想、设计和实施明确是为了让构建以用户为中心的网站变得更容易;这些网站快速、美观、引人入胜、安全且易于访问。因此,优化网络指标与 AMP 的愿景和设计原则非常一致。 

简而言之,AMP 是一款功能强大且经济实惠的工具,可以更轻松地构建高性能网站,从而降低技术专业知识水平以及实现该目标所需的时间和资源。

成功,由 AMP 驱动

WordPressAMP 开源项目的使命非常一致。AMP 项目旨在普及性能和构建出色的页面体验,这是 WordPress 民主化网络发布使命的核心。 

在 WordPress 等生态系统中,AMP 带来了“按服务提供性能”的概念,通过开箱即用提供广泛的编码和性能最佳实践;在充分利用功能强大的网络所提供的内容方面始终保持最新状态;并实施有效的控制机制(例如防护栏),从而实现始终如一的良好性能。AMP 帮助 WordPress 创建者利用 WordPress 的开放性和灵活性,同时最大程度地减少为开发和维护性能始终良好的网站而需要投入的资源量。 

WordPress 的官方 AMP 插件 是核心技术,它简化了在 WordPress 中发布 AMP 驱动的内容;它通过以下方式实现此目的

  1. 尽可能地自动化生成 AMP 有效标记的过程,让用户遵循尽可能接近他们习惯的 WordPress 上的标准工作流。
  2. 提供有效的验证工具,以帮助在出现 AMP 不兼容时进行处理,包括识别错误对其进行语境化准确地报告错误
  3. 提供对 AMP 开发的支持,以便 WordPress 开发人员更轻松地构建 AMP 兼容的生态系统组件,以及构建内置 AMP 兼容性的网站和解决方案。
  4. 支持在源服务器上提供 AMP 页面,使网站所有者更轻松地利用移动重定向、AMP 到 AMP 链接、最大程度地减少在 Search Console 中出现的 AMP 验证问题以及默认生成经过优化的 AMP 页面。
  5. 为 WordPress 创建者和发布者的细分市场提供一站式解决方案,无论技术专长或资源可用性如何,都能在短时间内从零开始生成 AMP 内容。 

AMP 插件的 2.0 版本代表了 WordPress 中 AMP 内容生成的一个拐点。继续阅读以了解谁可以从 AMP 插件中受益,并概览最新版本中可用的功能。

官方 AMP WordPress 插件适用于谁?

无论技术专长如何,AMP 插件都可以对任何人有益。对于开发人员来说,该插件带来了强大而有效的开发人员工具,这些工具有助于构建 AMP 兼容的生态系统组件(例如插件、主题)以及完整的网站和生态系统解决方案。对于非开发人员或技术不太精通的用户,或者那些只是不想处理验证问题和解决开发任务的用户,AMP 插件允许组装可以发布 AMP 内容的网站,提供 AMP 兼容生态系统组件的自动化和集成,并最大程度地降低流程的复杂性。

AMP 插件概述

在本节中,我们概述了 WordPress 的 AMP 插件,重点介绍了最新版本 2.0 的主要功能领域和功能。

模板模式

AMP 插件提供了三种不同的选项,让你可以将 AMP 的强大功能带到你的 WordPress 网站。这些选项称为模板模式。继续阅读以了解哪种模式适合你

模式角色
标准适用于网站中使用的所有组件(主题和插件)完全兼容 AMP 的网站,或者你有资源进行自定义 AMP 开发和/或修复验证问题。
过渡如果网站使用的主题与 AMP 不完全兼容,但 AMP 和非 AMP 之间的功能差异可以接受,则这是一个不错的选择。
阅读器如果你的网站使用高度不兼容 AMP 的主题,则可以选择此选项。如果你不懂技术,或者只是不想处理不兼容问题,并且更喜欢简化的工作流程,以便为用户提供 AMP 体验,这也是一个不错的选择。

在 v2.0 中,阅读器模式的功能得到了极大扩展,为用户提供了更大的灵活性,并减少了功能限制

阅读器模式的 AMP 优先主题

任何 AMP 兼容主题都可用于提供 AMP 页面,并且所有模板模式和内容类型都可以作为 AMP 提供。开箱即用地支持所有基本功能,包括导航菜单、徽标、评论和模板设计变体。旧的阅读器模式的范围和 AMP 文章模板(即旧版主题)仍可用于向后兼容。

阅读器模式的 AMP 自定义器

选择阅读器模式时,将使用两个主题,因此将有两个版本的自定义器可用:活动主题的默认自定义器和 AMP 阅读器主题的 AMP 自定义器。

品牌亲和力

AMP 插件提供了同步常规网站设置的功能,这些设置可以在主活动主题和选定的阅读器主题(例如徽标、背景颜色、页眉等)之间共享。这使用户更容易在 AMP 和非 AMP 网站之间获得更好的品牌亲和力。

工具

AMP 插件的许多功能涉及为网站所有者和开发人员提供工具,以帮助他们的网站取得成功。这些工具旨在尽可能地自动化 AMP 内容发布流程,并让 WordPress 开发人员更容易构建兼容 AMP 的主题、插件和生态系统解决方案。

选择性 AMP 启用/禁用

AMP 插件允许你逐步将 AMP 纳入你的内容策略。它为你提供了灵活性,可以选择网站的哪些部分应作为 AMP 提供,哪些部分不应提供。此功能将文章类型与模板类型分离,从而可以将所有模板都设置为 AMP,但可以将特定文章类型排除在 AMP 之外。

CSS 树摇晃

页面加载大量 CSS 的情况很常见,其中大部分可能根本没用,这会影响用户感知的页面体验。为了防止这种情况,AMP 限制了 CSS 的使用,每个页面最多只能使用 75 KB 的 CSS。

将 CSS 保持在这些限制范围内有时可能具有挑战性。AMP 插件提供支持,可以更轻松地将页面上的 CSS 总量保持在 75KB 限制以内。这是通过“摇动页面 CSS 树”来完成的,尽可能多地删除未使用的 CSS。此外,当树形摇动后剩余的总 CSS 仍然过多时,该插件会优先考虑 CSS 样式,以便保留最重要的主题样式表,并排除不太重要的样式(例如打印样式)。

嵌入式验证工具

AMP 的主要优势之一不仅在于它可以更轻松地构建以用户为中心的网站,还在于它可以以可验证的方式进行构建。AMP 提供了一个验证器规范,可以通过不同的方式实现。AMP 页面可以通过这样的验证器来确定它们是否是有效的 AMP 页面。当确定一个页面完全兼容 AMP 时,我们可以确信 AMP 的设计原则将在该页面的交付中得到体现。

AMP 插件完全集成了 AMP 验证器规范。它将其用作其功能的核心,用于识别验证问题。此外,AMP 插件问题置于上下文中,准确地指出了导致违规标记出现的网站组件。它以不同的方式公开验证信息,以便用户(包括开发人员和非开发人员)拥有了解浮出水面的问题并处理这些问题的机制。

编辑器

在 Gutenberg 编辑器中编辑 AMP 页面时,如果添加了一个包含无效 AMP 元素的块,插件会检测到它并向用户报告上下文信息。

已验证的 URL

已验证的 URL 屏幕显示了已通过验证过程的所有 URL 的列表,以及每个 URL 的详细验证状态摘要,包括总体状态、发现的错误数量和类型以及其他关键验证数据。已验证的 URL 屏幕显示单个 URL 的详细验证信息。

错误索引

错误索引屏幕显示了在网站中发现的所有验证问题,以及每个问题的摘要信息。单击特定问题将显示有关该问题的详细信息,包括受其影响的 URL 列表。

管理栏

AMP 插件直接从管理栏提供有关验证状态和已用 CSS 预算百分比的信息,以及上述验证屏幕的入口点。用户可以一目了然地了解正在编辑的给定内容的验证状态,以及有关 CSS 预算使用情况、问题数量、指向页面的非 AMP 版本的链接以及指向设置屏幕的摘要信息。

已审阅,已移除标记未审阅,已移除标记已保留无效标记

隐藏开发工具

在 v2.0 之前,AMP 插件的开发工具对所有具有编辑帖子权限的用户启用。此类用户会在编辑器中看到验证问题,并且验证信息会显示在管理栏中。以这种方式显示验证状态和错误对于想要了解并可以对所显示信息采取措施的技术娴熟的用户来说非常棒。但是,对于无法对问题采取任何措施甚至无法理解其含义的用户来说,这些信息可能会令人不安(且烦人)。

现在可以为不想(或无法)处理任何验证问题的用户关闭开发工具,但对于确实需要处理的用户,验证工作流程得到了改进。只有管理员才能访问开发工具,并且他们可以选择随时将其打开或关闭。此外,随着用户遵循入门流程,如果他们声明自己不是技术人员,则插件会将开发工具配置为默认禁用。

插件抑制

AMP 插件允许用户安装尚未与 AMP 兼容的插件,并仅允许它们在网站的非 AMP(桌面)版本上运行。管理员用户在呈现 AMP 页面时可以灵活地禁止执行特定插件。这对于避免由非 AMP 兼容插件引入的验证问题特别有用,同时仍可在非 AMP 页面上保留相应的功能。

插件抑制表指示了插件何时被抑制、谁执行了抑制,以及自抑制以来插件是否已更新。 

移动重定向

AMP 是一个完全响应式的 Web 框架,因此,AMP 驱动的网站可以为桌面和移动设备上的用户带来以用户为先的体验。通过在标准模式下配置 AMP 插件可以实现这种理想的情况,并且它对应于理想的情况。 

然而,随着 WordPress 生态系统朝着普遍的 AMP 兼容性发展,用户仍然经常需要并选择使用过渡模式或阅读器模式配置插件的场景。并且由于在移动设备上AMP 支持的页面体验最为重要,因此网站所有者希望将移动访问者引导至其网站的 AMP 版本,因为他们正在逐步走向完全 AMP 兼容并将其网站全部变为 AMP。AMP 插件提供了将移动访问者自动重定向到网站上 AMP 版本的功能。 

AMP 到 AMP 链接

设置移动重定向时,插件会自动启用 AMP 到 AMP (A2A) 链接。通过 A2A,访问者登陆 AMP 页面后能够继续在 AMP 体验中停留,并继续浏览我们的网站。通过 A2A 链接,任何站内导航都会将用户带到页面的 AMP 版本(如果可用)。为了补充此功能,AMP 插件在 AMP 页面的页脚中添加了一个链接,以便在需要/希望时转到非 AMP 版本,还在非 AMP 页面的页脚中添加了一个链接,以便在希望时返回到 AMP 版本。 

AMP 优化器

AMP 插件提供了 PHP 端口,作为提供 AMP 优化器 的库,该库提供 AMP 页面的自动化 服务器端优化,包括各种 AMP 的性能最佳实践。这些优化改进了关键性能指标,例如从源头提供 AMP 页面时非常重要的 最后的内容绘制 (LCP) 性能指标。目前,优化器库是 AMP 插件的一部分,但它将作为独立库提供给其他 CMS 和基于 PHP 的解决方案,以便利用它。 

从本质上讲,AMP 优化器实现对应于转换引擎 (TE),该引擎接收常规(即未优化)AMP 页面,并应用转换器(即优化)的串行管道。然后,TE 输出一个经过优化的 AMP 页面,该页面已准备好提供给用户并满足所需的 CWV 阈值。

工作流

AMP 插件在前面部分中描述的所有功能共同作用,以启用各种工作流,这些工作流对于不同的目的和不同情况很有用且适用。 

插件配置

加入

AMP 插件的 v2.0 版本提供了一个加入向导,该向导使插件的配置更加清晰和直观,指示三种模板模式(标准、过渡、阅读器)中的哪一种最适合您的网站和技术能力。首次安装并激活插件时,您可以从插件屏幕上的激活通知中访问加入向导。之后,您可以随时通过 AMP 设置屏幕上的链接访问它。

设置屏幕

设置屏幕已在 v2.0 中进行了彻底重新设计,并提供了大大改进的设置演示,以便在进行配置更改时获得更好的用户体验。 

为了灵活地访问插件的配置设置,还可以随时从设置屏幕重新打开配置向导,并且现在随时可以在 AMP 管理栏组件上找到指向设置屏幕的链接。 

AMP 开发

AMP 插件利用其验证功能,以便在 WordPress 中更轻松地进行 AMP 开发。除了识别和关联网站上的验证问题外,该插件还通过自动删除违规标记来帮助保持网站与 AMP 的兼容性。由于删除无效标记可能会对网站的功能或外观产生不利影响,因此用户可以还原自动删除并指示插件保留违规标记。

保留任何无效标记时,相应页面将成为无效 AMP,插件将自动重定向到页面的非 AMP 版本(在过渡和阅读器模式下),或从 `html` 标签中移除 `amp` 属性,以便不会向用户或搜索爬虫(例如 Google 机器人)提供无效 AMP。

使用“移除”(无效标记)和“保留”(无效标记)操作,您可以控制网站的状态,并在有能力和/或资源的情况下安全地修复验证错误。如果您没有能力或意愿进行 AMP 开发,您可以让插件移除无效标记,并使用插件抑制来阻止违规插件在 AMP 页面上运行。 

AMP 维护

AMP 插件的主要作用之一是成为 WordPress 网站 AMP 兼容性的“监视器”。插件的验证工具提供了功能,以帮助网站所有者维护其网站的 AMP 兼容性。该插件会持续检查随着网站发展可能引入的验证问题,网站所有者/管理员可以依靠该插件自动生成 AMP 标记(如果可能)、移除无效标记(经其批准)或应用插件抑制功能来防止插件破坏网站的 AMP 兼容性。 

交钥匙 AMP 支持的网站 

AMP 插件可以组装完全由 AMP 支持的 WordPress 网站,而无需编写任何代码。该插件编排了 AMP 兼容组件的捆绑,这些组件共同构成了一个网站。该插件充当启用器,通过自动化 AMP 内容生成的大部分内容,并充当执行者,确保随着网站的发展不会引入任何 AMP 不兼容性。 

下一步

AMP 插件支持在 WordPress 中发布完整的 AMP 内容,适用于不同的场景,从有效的 AMP 开发到完整的交钥匙 AMP 解决方案。我们对 v2.0 版本感到非常兴奋!此版本投入了大量工作,并在可用性、性能和灵活性方面加载了许多改进和新功能。 

要详细了解 WordPress 中的 AMP,请访问 AMP 插件网站,如果您尚未执行此操作,请 下载插件,并开始为您的 WordPress 网站提供始终如一的出色页面体验!如果您有兴趣成为构建 AMP 插件的 AMP 项目贡献者,您可以在 AMP 插件 github 存储库 中与我们互动。 

由 Google 的 AMP 开发者关系部门的 Alberto Medina 和 Weston Ruter 发布