使用 Google AMP 让您的 WordPress 网站的移动页面加载更快

为什么页面速度很重要

如果像我们数十亿人一样，您最近在移动设备上消费过 Web 内容，您会注意到体验可以得到改善。 阅读新闻文章通常非常缓慢，页面需要很长时间才能加载。 即使在页面上加载文本后，页面仍会在几秒钟内继续加载，因为广告、跟踪 javascript 和图像被下载。
移动应用程序让我们习惯了快速加载内容、离线查看和快速界面。 但从字面上看，移动网站往往落后。 对于新闻和博客网站尤其如此，它们使用许多小部件进行广告、分析、共享和评论。 您可以通过在 iOS 设备上安装内容拦截器并注意到速度提高来轻松测试这一点。
当然，您可以使用响应式主题来缓解一些问题，但响应式设计不处理页面加载性能。 大多数时候，响应式是问题的根源：我们设计的网站能够适应多种不同分辨率的显示器，但我们未能为最小的显示器、较低的 CPU 性能和最慢的连接创建优化的体验。 使用响应式设计，当页面在移动设备上呈现时，所有桌面资产和功能仍会加载，通常会导致性能不佳。 据 Facebook 称，移动设备上一篇新闻文章的平均加载时间为 8 秒。
虽然我们中的一些人很幸运能够在我们的智能手机上拥有 3G 或 4G 网络连接，但您只需要离开城市中心，网络速度就会急剧下降。 当然，还有来自发展中国家的“下一个十亿”人和设备进行连接，这些国家还没有快速网络连接。
幸运的是，事情正朝着正确的方向发展，所有大公司都在努力加快移动设备上的内容加载速度。 Facebook 推出了 Instant Articles，这是一种快速加载网络内容的解决方案，但仅限于他们的围墙花园。 苹果推出了自己的新闻应用程序。 Google 推出了 AMP（Accelerated Mobile Pages），这是一项与 Facebook 目的相似但采用开放标准方法的举措。
WordPress 最近宣布，他们以免费插件的形式在 WordPress.com 和 WordPress.org 网站上增加了对 Google Accelerated Mobile Pages (AMP) 的支持。
因此，让我们看看如何将 AMP 添加到您的 WordPress.org 博客或新闻网站，并从最新技术中受益，从而加快您在移动设备上的网站速度。

什么是谷歌 AMP？

Google 的 AMP 承诺是让您的网页在移动设备上立即加载。 它解决了移动互联网最后剩下的问题之一。 尽管每个人都在使用它，但移动互联网的速度却出奇的慢。 AMP 通过限制页面上的数字功能、剥离设计功能以提高速度来解决此问题。 谷歌声称 AMP 的加载速度比普通网页快 85%。
AMP 为您的网站创建一个特殊的移动视图。 这个新的移动网站为受支持的客户端（例如 Google 移动搜索和 Chrome）增强了您的内容。 这个新视图是对您已有的常规和移动网站的补充。 在此视图下，您的页面看起来像普通网页，但除了内容之外的所有内容都被删除了。 因此，您需要确保您的 WordPress 网站已准备好

AMP 如何工作？

AMP HTML 本质上是 HTML 的子集，只允许使用特定的 JavaScript 元素。 重点是加快内容繁重的网站（例如新闻网站和博客）的加载速度。 虽然它严重限制了 Javascript，但它确实允许在您的页面上使用特定的分析和广告元素，使其成为新闻出版商的一个不错的选择。
为了创建新的移动视图，AMP 使用了三个主要元素：

• AMP HTML – HTML 的这个子集添加了一些自定义标签和属性，具有许多限制，允许 AMP 客户端以您想要的方式呈现您的内容，而无需担心性能。 该插件会自动将这些新标签添加到您的页面，但如果需要，您可以在自己的 AMP 特定模板中使用它们。
• AMP JS – 这个 JavaScript 框架是为管理资源处理和异步加载的移动页面而设计的，这些资源处理和异步加载使 AMP 进程正常工作。 请注意，您不能在 AMP 网页上使用任何第三方 JavaScript。
• AMP CDN – AMP 提供了一个可选的内容交付网络，可以进一步缓存和优化您的 AMP 页面。

安装 AMP

您需要先安装插件，然后才能在 WordPress 网站上使用 AMP。 如果您使用的是 WordPress.com，那么您已经可以使用它。

官方插件

虽然您可以在 WordPress 插件商店中找到官方 AMP 插件，但您只能在项目的Github 站点上找到最新版本。 因此，您可以做出选择。
通过 WordPress 安装插件是最快的。 您只需在插件 WordPress 管理面板的“添加新”部分中搜索 amp-wp。 然后，您只需单击安装，然后激活即可开始在您的网站上使用 AMP。
如果出于任何原因需要最新版本，则必须手动安装插件。 下载 Github 包后，您只需在“添加新”插件面板中单击“上传插件”。 只需找到包含该包的 zip 文件，然后让 WordPress 从那里获取内容。 上传完成后，您只需激活插件即可开始使用它。

PageFrog 和其他 AMP 插件

官方插件直接来自 Google 的 AMP 项目团队，使其成为最新版本的 AMP。 它会为每个页面创建一个 /amp/ 版本并发布您拥有的内容。 您只需将 /amp/ 添加到 URls 的末尾即可自己查看它们。
但是，您无法编辑这些 AMP 页面。 如果您需要的不仅仅是基本插件为您提供的东西，您将需要其他 AMP 插件之一，例如 PageFrog。
PageFrog 建立在核心 AMP 插件之上，允许您编辑它所做的一些更改。 它甚至可以让您添加一些样式和主题功能，以及其他协议，例如 Facebook 的 Instant Articles。 您可以在 WordPress 插件商店中找到 PageFrog 和其他一些 AMP 插件。

为 AMP 配置 WordPress 网站

激活插件后，您就完成了。 对于大多数安装，您只需要像往常一样创建内容，插件会处理其余的事情。 但请注意，您的 Google Analytics（分析）代码等内容不会在您的 AMP 页面上开箱即用。 通读以了解如何将分析和 SEO 功能添加到新的 AMP 页面。 .

将 Google Analytics 添加到您的 AMP 页面

如果您的移动页面也需要这些功能，则必须手动将它们添加到插件的 single.php 页面模板中。
为此，您必须单击插件列表中 AMP 插件名称旁边的编辑选项。 从那里，您只需单击 single.php 链接即可开始编辑它。 请注意，您可能必须在每次更新插件时重做此操作。

SEO 插件和 AMP

由于您的 AMP 页面不包含任何 SEO 功能，因此您将需要一个新的兼容 AMP 的 SEO 插件。
幸运的是，大多数 SEO 插件开发人员都拥有或将拥有您可以使用的 AMP 扩展。 您必须单独安装它们，但您需要它们来确保您的所有页面都有助于改善您网站的 SEO。
截至本文为止，只有三个 SEO WordPress 插件发布了 AMP 扩展或更新。

• Glue for Yoast SEO – 为 Yoast SEO WordPress 插件添加 AMP 支持
• Schema App Structured Data – 带有来自 schema.org 的 AMP 的 SEO 模式插件
• WP SEO Structured Data Schema – 来自堪萨斯城 SEO 的带有 AMP 的 SEO 模式插件

修复任何错误

与添加到您网站的任何内容一样，您希望测试 AMP 页面是否存在错误和不一致，并进行更正。
AMP 仍在不断发展，许多功能可能仍然存在错误。 在公开 AMP 页面之前，您必须手动修复模板文件中的这些错误。 请记住，您可能必须在每次更新插件时重新进行编辑，以防发生任何变化。

在您的 AMP 网页上投放广告

AMP HTML 不允许使用 JavaScript，因此无法直接嵌入广告——相反，它们存在于沙盒 iframe 中，无法访问主要文章内容。
谷歌设计的 AMP 允许某些类型的广告通过。 您只需要与 AMP 兼容的广告插件版本。 您可以在AMP Github 页面上找到这些兼容插件的完整列表。
当前支持的广告提供商包括以下内容：

• A9
• 反应器
• AdSense
• 广告技术
• 双击

AMP 还是移动应用程序？

虽然 AMP 在某些情况下可以帮助加快您网站的文章页面的速度，但它并不适用于所有情况和所有设备。 不仅如此，它还对你可以在你的页面上运行什么样的分析（没有 js！）和广告有很大的限制。
AMP 可以成为来自搜索的流量的有效解决方案，但您最忠实的读者呢？
对于那些，我相信一个应用程序仍然很有意义，这取决于你的受众的类型和规模。 即使 AMP 或 Instant Articles 无法提供，应用程序仍然可以提供许多好处：内容交付和通过推送通知重新激活、内容缓存和离线使用、在应用程序商店中的存在，更重要的是，用户的主屏幕。
因此，如果您正在寻找一个平台，该平台将帮助您随着时间的推移推动增长，同时保留对内容的控制权以及用于广告和分析的移动特定选项，那么请考虑发布您自己的应用程序。 如果您在新闻或博客网站上使用 WordPress，那么我们可能会在MobiLoud为您提供合适的解决方案。