什么是 AMP？ 加速移动页面的完整指南

第 1 节：什么是加速移动页面？

移动优先的心态将继续存在——这一说法在企业和消费者方面都适用。

说用户在购买之前先咨询他们的手机是一种严重的轻描淡写。 在全球范围内，移动互联网的使用量已经超过了桌面移动设备的使用量。 即使是印度、墨西哥和印度尼西亚等国家/地区，智能手机的使用率也是台式机使用率的 4 倍以上：

仅在美国，每天就有 300 亿次移动时刻（客户查询他们的电话并期望立即得到答复的时刻）。 这意味着您的品牌每天都有 300 亿次移动机会来向用户提供他们想要的东西。

移动广告支出仍然落后于移动媒体消费：

用户花更多时间在移动设备上浏览而不是购买是有原因的——用户在使用移动设备时更渴望即时满足。

回答这个问题——您等待移动网页加载多长时间？

根据 Google 和 SOASTA 收集的数据，40% 的消费者离开的页面加载时间超过三秒。

三秒钟。

这就是您必须一直吸引喜欢您的广告并点击它的用户的注意力的时间。 如果您的网页未能在上述时间内加载，那么您创建的广告，无论它多么引人注目，都是徒劳的。 坏消息是，根据数据，大多数零售移动网站的加载时间约为 6.9 秒，这是 40% 的用户在放弃页面之前等待的时间的两倍多。

网页速度如何影响跳出率

在衡量移动网页的跳出率时，速度是一个重要因素。 在我们进一步深入研究之前，重要的是要解释速度主要在移动网站跳出率的两个方面考虑，即 DOM 就绪时间和整页加载时间：

1. DOM 就绪时间： DOM 就绪时间是浏览器接收和解析页面的 HTML 代码所花费的时间——它是跳出率的最大预测指标。 即使用户可能不知道何时接收和解析 HTML 代码，代码也必须在加载任何页面元素（例如图像）之前加载。 如果 HTML 代码花费的时间太长，网站加载时间就会变慢。 要加快移动网页的 DOM 就绪时间，最好避免使用会阻止浏览器解析 HTML 代码的 JavaScript。 使用 JavaScript 的页面元素包括第三方广告和社交小部件，它们必须在加载页面之前从外部服务器获取。

2. 整页加载时间：整页加载时间包括图像、字体、CSS 代码等在网页上加载的时间。 更快的整页加载会导致更低的跳出率：

为确保您的网页具有更快的整页加载时间，您应该优化图像、字体并避免可能会减慢加载时间的第三方文件。

页面加载时间是页面跳出的最主要原因之一，更糟糕的是，用户不仅会放弃该页面，而且研究表明，一旦网页体验缓慢，79% 的用户就不会回来。

考虑一下这些关于页面加载速度的惊人发现：

• 通过 3G 连接加载移动网站的平均时间为 19 秒，而 77% 的移动网站加载时间超过 10 秒。
• 谷歌发现，网页加载时间每增加一秒，转化率就会降低 20%。 相比之下，加载时间为 5 秒的网站的移动广告收入是加载时间为 19 秒的网站的 2 倍。
• 61% 的用户不太可能返回他们访问时遇到问题的移动网站。

这是什么意思？

如果移动页面加载不是即时的，对用户来说不够快，他们就会跳出，并且可能不会回来。
为确保您的移动网页不会发生这种情况，请务必放大您的移动网站和登录页面。

什么是 AMP？

Google 推出了 Accelerated Mobile Pages 开源项目，以确保移动网页以最佳速度运行。

AMP 项目旨在通过允许您创建跨设备和分发平台始终快速、美观和高性能的网页和广告来“共同构建未来的网络”。

AMP 是与数以千计的开发商、出版商、网站、分销公司和科技公司合作构建的。 迄今为止，已经创建了超过 15 亿个 AMP 页面，超过 100 家领先的分析、广告技术和 CMS 提供商支持 AMP 格式。

当您以 AMP 格式创建移动页面时，您将获得：

1. 更高的性能和参与度：在 AMP 开源项目中创建的页面几乎可以立即加载，为用户在移动设备和桌面设备上提供流畅、更具吸引力的体验。

2. 灵活性和结果：企业有机会决定如何展示他们的内容以及使用哪些技术供应商，同时保持和改进 KPI。

您之前可能点击过 AMP 页面，只是您没有意识到而已。 您可能唯一注意到的是点击后页面的显示速度。 AMP 构建的网页在搜索结果中有一个闪电指示符。

您可以通过以下方式在搜索结果中识别 AMP：

与普通网页相比，AMP 网页看起来是这样的：

AMP 页面之所以会立即加载，是因为 AMP 限制了 HTML/CSS 和 JavaScript，从而可以更快地呈现移动网页。 与常规移动页面不同，AMP 页面由 Google AMP 缓存自动缓存，以加快 Google 搜索的加载速度。

用户在使用移动设备时有一定的期望，他们希望获得有意义、相关且更快的体验 - 以确保满足目标受众的期望 AMP 是您的最佳选择。

本指南将向您介绍您需要了解的有关 AMP 开源项目的所有信息。 我们将详细介绍 AMP 的工作原理，以及页面加载速度如此之快的原因。

该指南还将以案例研究为特色，介绍使用 AMP 如何帮助不同行业的企业提高转化率，以及您在 AMPlify 页面时将获得的好处。 最后一部分将讨论什么是 Accelerated Mobile 着陆页，以及为什么您应该创建这些页面来为访问者提供更快、更相关的着陆页。

第 2 部分：AMP 是如何工作的？

谷歌于 2016 年 2 月推出了 Accelerated Mobile Pages (AMP) 开源框架。构建该框架是因为需要创建优化的、紧密集成的用户体验，而不是用户每天处理的笨重和缓慢的移动体验基础。

Google 启动 AMP 项目是为了创建一个框架，该框架将提供创建优化的移动网页体验的确切路径。 AMP 开源项目有据可查、易于部署、可验证，并且坚持将用户放在第一位的网页设计。

自近两年前推出以来，已有 2500 万个域发布了超过 40 亿个 AMP 页面：

自推出以来，不仅 AMP 页面的数量增加了，而且它们的速度也增加了，从 Google 搜索加载 AMP 页面所需的平均时间现在不到半秒。

AMP 导致网站流量增加 10%，页面停留时间增加 2 倍。 与非 AMP 页面相比，使用 AMP 的电子商务网站的销售额和转化率提高了 20%：

AMP 帮助企业创建精简、干净且相关的网页版本，为用户提供更快的移动网络体验。

Chartbeat 分析了 2016 年 6 月至 2017 年 5 月期间使用 AMP 的 360 网站的数据，发现使用 AMP 页面的典型发布商在其 AMP 内容上看到了所有移动流量的 16%。

AMP 页面的加载速度大约是标准网页的四倍，而且使用 AMP 页面的用户比使用标准移动网页的用户多 35%：

现在我们知道您应该使用 AMP 页面的原因，让我们看看 AMP 的工作原理，它与响应式网页设计、Facebook 的 Instant Articles 和 Progressive Web Apps 的比较。

AMP的3个核心组件

AMP 页面由以下三个核心组件构建：

AMP HTML

AMP HTML 本质上是 HTML，只是对可靠性能有一些限制。 最简单的 AMP HTML 文件如下所示：

AMP HTML 中的大多数标签都是常规 HTML 标签，但是，某些 HTML 标签已替换为 AMP 特定标签。 这些自定义标签称为 AMP HTML 组件，它们使常见的标签模式易于以高效的方式实施。 AMP 页面由搜索引擎和其他平台通过 HTML 标记发现。

您可以选择使用非 AMP 版本和 AMP 版本的网页，或仅使用 AMP 版本。

AMP JavaScript (JS)

AMP JS 库确保 AMP HTML 页面的快速呈现。 JS 库实现了所有 AMP 的最佳性能实践，例如内联 CSS 和字体触发，它管理资源加载并为您提供自定义 HTML 标签以确保快速呈现页面。

AMP JS 使来自外部资源的所有内容都是异步的，因此页面上的任何内容都不会阻止任何内容呈现。 JS 还使用其他性能技术，例如所有 iframe 的沙盒化、在加载资源之前预先计算每个页面元素的布局以及禁用慢速 CSS 选择器。

AMP缓存

Google AMP 缓存用于提供缓存的 AMP HTML 页面。 AMP 缓存是基于代理的内容分发网络，用于分发所有有效的 AMP 文档。 Cache 获取 AMP HTML 页面，缓存它们，并自动提高页面性能。

为了保持最高效率，AMP 缓存从使用 HTTP 2.0 的同一来源加载文档、JS 文件和所有图像。

AMP 缓存带有一个内置的验证系统，可以确认页面一定可以正常工作，并且它不依赖于可能会减慢页面速度的外力。 验证系统对一系列断言进行操作，确认页面的标记符合 AMP HTML 规范。

每个 AMP 页面旁边都有一个附加版本的验证系统。 此版本能够在呈现页面时将验证错误直接记录到浏览器的控制台中，使您能够看到代码中可能对性能和用户体验产生影响的复杂更改。

AMP 的三个核心组件协同工作，使页面快速加载成为可能。 下一节将重点介绍七种优化技术，这些技术结合在一起可以使 AMP 页面如此之快。

所有 AMP JavaScript 都是异步执行的

JavaScript 可以修改页面的各个方面，它有能力阻止 DOM 构建和延迟页面渲染——这两个因素都会导致页面加载缓慢。 为确保 JavaScript 不会延迟页面呈现，AMP 仅允许异步 JavaScript。

AMP 页面不包含任何作者编写的 JavaScript，所有交互式页面功能都由自定义 AMP 元素处理。 这些自定义 AMP 元素可能包含 JavaScript，但它们经过精心设计以确保它们不会引发任何性能下降。

AMP 在 iframe 中执行第三方 JavaScript，但它不能阻止页面呈现。

所有资源的大小都是静态的

图片、iframe 和广告等所有外部资源都必须声明其 HTML 大小，以便 AMP 可以在下载页面资源之前确定每个元素的大小和位置。 AMP 无需等待任何资源下载即可加载页面布局。

AMP 具有将文档布局与大小布局分开的能力，只需一个 HTTP 请求即可对整个文档进行布局。 因为，AMP 经过优化，可以避免在浏览器中进行任何昂贵的样式布局和重新计算，因此在加载页面资源时不会进行任何重新布局。

扩展机制不会阻止渲染

AMP 不允许扩展机制阻止页面呈现，它支持灯箱和社交媒体嵌入等元素的扩展，虽然这些确实需要额外的 HTTP 请求，但它们不会阻止页面布局和呈现。

如果页面使用自定义脚本，它必须告诉 AMP 系统它最终会有一个自定义标签，然后 AMP 会创建所需的标签，这样页面就不会变慢。 例如，如果 amp-iframe 标记告诉 AMP 将有一个 amp-iframe 标记，AMP 然后会在知道它将包含什么之前创建 iframe 框。

所有第三方 JavaScript 都被排除在关键路径之外

第三方 JavaScript 使用同步 JS 加载，这往往会减慢加载时间。 AMP 页面允许第三方 JavaScript，但仅在沙盒 iframe 中，这样 JavaScript 加载就不会阻止主页的执行。 即使沙盒 iframe JavaScript 触发了多个样式重新计算，它们的微型 iframe 也只有很少的 DOM。

与重新计算页面样式和布局相比，iframe 重新计算的执行速度非常快。

CSS 必须是内联的并且有大小限制

CSS 会阻塞渲染，它还会阻塞所有页面加载，并且有导致膨胀的倾向。 AMP HTML 仅允许内联样式，这从大多数网页的关键呈现路径中删除了 1 个或大部分 HTTP 请求。

内联样式表的最大大小应为 75kb，尽管这对于非常复杂的页面来说已经足够大了，但它仍然需要页面作者保持良好的 CSS 卫生习惯。

字体触发效率高

Web 字体优化对于快速加载至关重要，因为 Web 字体通常尺寸较大。 在包含几个同步脚本和几个外部样式表的典型页面上，浏览器会等待下载字体，直到加载所有脚本。

在所有字体开始下载之前，AMP 框架声明零 HTTP 请求。 这之所以成为可能，是因为 AMP 中的所有 JavaScript 都具有异步属性，并且只允许内联表，没有 HTTP 请求阻止浏览器下载字体。

样式重新计算被最小化

在 AMP 页面中，所有 DOM 读取都发生在所有写入之前，这确保每帧仅重新计算一次样式 - 因此不会对页面渲染性能产生负面影响。

仅运行 GPU 加速动画

要运行快速优化，您必须在 GPU 上运行它们。 GPU 按层工作，它知道如何在这些层上执行某些操作——层可以移动和淡入淡出。 但是，当 GPU 无法更新页面布局时，它会将此任务交给浏览器，这对页面加载时间不利。

动画相关 CSS 的规则确保动画可以被 GPU 加速，这意味着 AMP 只允许在变换和不透明度上进行动画和过渡，因此不需要页面布局。

资源加载优先

AMP 控制所有资源加载，它确定资源加载的优先级，它只加载需要的资源并预取所有延迟加载的资源。

当 AMP 下载资源时，它会优化下载，以便首先下载最重要的资源。 所有图片和广告只有在用户可能看到、位于首屏或访问者可能滚动它们时才会下载。

AMP 还具有预取延迟加载资源的能力，这些资源尽可能晚地加载，但尽可能早地预取。 这样加载速度非常快，但只有在向用户显示资源时才会使用 CPU。

即时加载页面

大量使用新的 AMP 预连接 API 来确保 HTTP 请求在发出后尽可能快。 因此，页面在用户明确声明他们想要导航到该页面之前呈现，该页面可能在用户实际看到它时可用，从而使页面立即加载。

AMP 经过优化，在预呈现 Web 内容时不会使用大量带宽和 CPU。 当 AMP 文档被预呈现以进行即时加载时，折叠上方的资源实际上会被下载，而可能会占用大量 CPU 的资源（例如第三方 iframe）不会被下载。

您还可以使用以下视频了解“AMP 使您的网页变快的 7 种方式”：

现在我们知道了 AMP 的工作原理，让我们看看 AMP 与 Facebook 的即时文章、响应式网页设计和渐进式网页应用程序的比较。

AMP 与 Facebook 的即时文章

Facebook 于 2015 年推出 Instant Articles，以帮助出版商为 Facebook 用户提供令人难以置信的快速和身临其境的阅读体验。 Facebook 的即时文章是：

• 比标准移动网络文章快 10 倍
• Instant Articles 的平均阅读量增加 20%
• 70% 的读者不太可能放弃即时文章

Instant Articles 帮助发布者在 Facebook 上创建快速和互动的文章。 它们为您提供以下优势：

• 快速响应：无论用户使用何种连接或设备，即时文章都会立即加载。 这些文章易于使用，因为它们转变为移动讲故事体验。
• 互动性和吸引力：文章的沉浸式体验使其更具互动性，这就是即时文章比移动网络文章分享频率高 30% 的原因。 这有助于扩大您的故事在动态消息中的影响范围。
• 轻松灵活的货币化：货币化是即阅文不可或缺的一部分。 要通过文章发展您的业务，您可以扩展直销广告，使用 Facebook 的 Audience Network 填充可用的广告库存，甚至创建原生品牌内容。

AMP 页面和即阅文都为用户提供了快速加载时间，这有助于降低页面跳出率并提高参与度。 事实上，Facebook 的 Instant Articles 加载速度甚至比 AMP 页面更快：

然而，AMP 页面的采用率远高于 Instant Articles，这主要是因为 Facebook 在其动态消息中越来越多地将视频优先于文本文章。 这导致多家出版商停止使用 Instant Articles，包括纽约时报和卫报。

根据 Parsley 的说法，谷歌已经取代 Facebook 成为出版商的最大外部流量来源。 Google 现在占发布商外部流量的 42%：

当 Facebook 推出 Instant Articles 超越谷歌成为媒体和内容网站的主要流量来源时，然而，随着 AMP 的推出和成功，谷歌重新领先。

AMP 项目的成功在于它是一个开源计划，而不是商业伙伴关系。 AMP 项目旨在改变出版商创建移动网页的方式，而不是让用户局限于特定的应用程序，就像 Facebook 对 Instant Articles 所做的那样。

AMP 与响应式网页设计 (RWD)

自谷歌于 2015 年初推出 Mobilegeddon 以来，创建适合移动设备的网站一直是营销人员的首要任务。响应式网页设计旨在帮助创建注重灵活性的网页。 响应式网页可在任何设备或屏幕上运行，提供更好、更吸引人的移动网络体验。

AMP 和响应式网页设计的核心是使用几乎相同的基本构建块来创建移动页面，即 HTML 和 JavaScript。 但是，它们有一系列差异使它们与众不同，例如：

1. RWD 专注于灵活性：响应式网页设计为您的网站增加了灵活性。 您可以创建一个自动响应访问者屏幕尺寸的页面，这使您的页面能够在各种屏幕尺寸上为用户提供良好的移动体验。 响应式网页设计并不完全专注于移动设备，而是适用于所有设备和所有用户体验。

2. AMP 专注于速度： AMP 开源框架专注于速度，特别是移动页面速度。 AMP 为移动网络内容引入了即时呈现。 通过使用内联样式表、延迟加载、预取资源等优化技术，该框架能够即时加载移动页面。

3. AMP 与网页一起使用，RWD 取代网页：虽然可以在您的网页上专门使用 AMP，但 AMP 也可以添加到现有的非响应式或响应式网站，而无需重新设计网站。 但是，要使网页具有响应性，您需要重新设计页面。

4. AMP 提供更好的用户体验：决定移动用户体验的主要因素有两个，即页面元素的移动友好性和速度。 尽管响应式网页设计在缩放页面元素以匹配用户屏幕方面做得很好，但与 AMP 页面相比，它的速度非常糟糕。

5. AMP 有 JavaScript 限制：响应式网页设计支持所有第三方脚本和媒体库，但 AMP 页面则不然。 为了使页面加载速度更快，AMP 框架具有非常有限的 JavaScript 和 CSS 功能。

AMP 适用于静态页面——不包含大量动态内容的页面，而 RWD 可用于任何类型的页面。 然而，响应式网页加载时间有点太长，导致访问者跳出，可能永远不会再返回。 如果您希望为用户提供快速的移动响应体验，您应该考虑使用 AMP 页面。

AMP 与渐进式网络应用 (PWA)

Progressive Web Apps 是一种通过网络交付的移动网络应用程序，它的行为类似于本机应用程序，PWA 和本机应用程序之间的主要区别在于 PWA 不需要从 Google 或应用程序商店下载。

渐进式网络应用程序在网络浏览器内运行，这使得它可以立即加载，即使您的互联网连接不是很强。 PWA 使用预缓存来确保应用程序保持更新，以便用户只能看到最新版本。

对 Progressive Web Apps 的需求源于这样一个事实，即排名前 1,000 位的移动网站比排名前 1,000 位的本机应用程序覆盖的人数多 4 倍。 然而，这些网站吸引用户的时间平均比移动应用程序少 20 倍。

这实质上意味着虽然移动网站倾向于吸引访问者但不吸引他们。

PWA 旨在以原生移动应用程序的外观、感觉和工作方式进行设计。 用户在浏览器中遇到它们就像在任何移动网站上一样。 与该网站互动后，系统会提示用户在其设备上安装网络应用程序。 如果他们选择安装，应用程序将以本地应用程序的方式下载到他们的设备上。

PWA 是：

• 可靠——即使在网络状况不佳的情况下，它们也会立即加载。
• 快速——通过流畅的动画和无卡顿的滚动快速响应用户交互。
• 引人入胜——它们感觉就像设备上的原生应用程序，提供身临其境的用户体验。

当移动网络应用程序满足谷歌概述的必要要求时，移动网络应用程序可以作为可下载的形式提供给用户。

这些是 AMP 和 PWA 之间的主要区别：

您可以选择仅使用 AMP 来创建快速而简单的体验。 您可以依靠渐进式 Web 应用程序来创建动态但速度较慢的用户体验。 或者，您可以通过将两者结合到您的网页设计中来快速开始并保持快速。

如今，AMP 与渐进式 Web 应用程序的结合使用变得越来越普遍，开发人员通过三种方式利用这两种方法。

1. AMP 作为渐进式网络应用

如果您的内容主要是静态的，并且您可以满足于 AMP 的有限功能，则此选项允许您创建闪电般的快速体验作为渐进式网络应用程序。 例如，AMP 就是这样构建的——完全由 AMP 收费的渐进式网络应用程序。 它有一个允许离线访问的服务工作者，以及一个提示“添加到主屏幕”横幅的清单。

2. AMP 到渐进式网络应用

另一种同时使用 AMP 和渐进式网络应用的方法是将 AMP 页面视为您网站的挂钩。 它以瞬时负载吸引用户，然后将他们卷入您的渐进式 Web 应用程序。 这允许您将快速加载的 AMP 页面与比第一个选项更动态的 PWA 结合起来。

3. 渐进式网络应用中的 AMP

正如 AMP 与 PWA 的情况一样，它不必是全有或全无。 您无需使用 AMP 构建所有页面； 您也不需要将 AMP 和 PWA 分开作为钩子和杆。 现在，您实际上可以只 AMP 单个页面的一小部分，从而减小其大小并缩短其加载时间，而无需完全权衡动态功能。

这涉及使用另一种形式的 AMP，称为“影子 AMP”，它允许 AMP 嵌套在网页的某个区域内。 结果是 AMP 在渐进式 Web 应用程序的外壳中。

华盛顿邮报展示了 PWA 和 AMP 协同工作以带来更好的参与度和更快的加载时间的理想示例。 当华盛顿邮报最初让他们的网站响应时，他们的速度是 3500 毫秒。 当他们采用 AMP 时，页面加载时间减少到 1200 毫秒，然后在 AMP CDN 技术的帮助下进一步减少到 400 毫秒。

在他们采用 PWA 来减轻网站负担后，用户可以享受闪电般的页面加载速度而不会中断，以及更好的用户体验。

Accelerated Mobile Pages 项目允许您创建可即时加载的移动页面，帮助访问者更好地参与页面而不是跳出。 创建 AMP 页面所涉及的优化技术不仅可以加快页面加载时间，还可以为访问者提供良好的用户体验。

下一节将重点介绍您在网页上使用 AMP 框架时获得的确切好处。

第 3 节：AMP 的好处和限制

AMP 确保网页加载速度更快，这有助于改善用户体验并让访问者在页面上停留更长时间。 AMP 使用 AMP HTML 帮助移动页面加载更快，事实上根据 Google 的 Gary Illayes 的说法，AMP 页面的平均加载时间为 1 秒，比普通标准 HTML 页面快 4 倍。

我们已经讨论了页面跳出率和页面速度之间的联系，并且我们已经详细了解了 AMP 的工作原理以及它与 PWA、RWD 和 Facebook 的 Instant Articles 的比较。

本指南的这一部分将重点介绍 AMP 的优点和限制，帮助您详细了解创建 AMP 页面时要存储的内容。

AMP 的好处

当您的移动网页加载速度更快时，您会自动改善用户体验和 KPI。 由于 AMP 页面的即时加载，您可以跨所有设备和平台（例如 Google、LinkedIn 和 Bing）为您的用户提供始终如一的快速网络体验。

AMP 为您的移动页面提供以下优势。

吸引观众

AMP 页面的平均加载时间不到一秒，这意味着当用户登陆 AMP 页面时，他们会立即获得他们正在寻找的内容。 因为页面会立即加载，所以他们与页面的互动时间更长，并且更愿意了解您的报价，这使得他们更有可能执行您希望他们采取的操作。

收入最大化

您的页面加载转化所需的时间每增加一秒，转化率就会下降 12%。 这意味着如果您想吸引观众并提高投资回报率，您需要确保您的移动页面满足访问者的速度期望。

AMP 框架让您可以在任何地方为用户提供更快的体验——包括广告、着陆页和网站。

保持灵活性和控制力

当您采用 AMP 格式时，您可以保留自己的品牌，同时利用 AMP 优化的网络组件。 您可以使用 CSS 自定义网页的样式，并使用动态内容在需要的地方获取数据。

您还可以使用 A/B 测试来测试并为您的客户创造最佳的移动用户体验。

降低操作的复杂性

创建 AMP 页面的过程非常简单明了。 您可以转换整个档案，特别是如果您使用 CMS，包括 Drupal 和 WordPress。

您不需要具备任何特殊技能来优化每个 AMP 页面的代码，AMP 格式是完全可移植的，并且无论用户如何访问它们，AMP 页面都始终如一地快速。

最大化您的投资回报率

一旦创建了 AMP 页面，就可以同时在各种分发平台上分发。 这使您可以在 AMP 和非 AMP 页面上投放广告，这意味着您可以制作一次广告并在任何地方提供令人难忘的品牌体验。

创造可持续发展的未来

AMP 项目是一项开源计划，旨在通过帮助每个人提供更好、更快的移动用户体验来保护网络的未来。 您可以加入 AMP 项目，并通过加入 AMP 项目在开放、更快的网络上为您的企业打造可持续发展的未来。

提供更好的用户体验

当然，使用加速移动着陆页的最明显优势是它们将提供更高的用户满意度。 当二分之一的人不愿意为网站加载等待仅仅 10 秒时，将加载过程加快 15-85% 会对访问者的满意度产生巨大影响。

获得 SEO 提升

Google 的算法考虑了页面速度和移动响应能力。 您的页面在移动设备上加载的速度越快，它在搜索引擎结果页面上的排名就越高。

所有支持 AMP 的页面都将以轮播格式显示，即使在搜索结果中的付费广告上方，标题下方也会有一个绿色闪电。

虽然使用 AMP 页面为您提供了很多优势，但 AMP 也有一些缺点。

无第三方 JavaScript

由于您无法使用第三方 JavaScript，因此您不得不告别分析和跟踪功能，这些功能可让您提供高度针对性的广告体验。

不仅如此，使用 Google 的较轻版本的 JavaScript，无法在 AMP 页面上使用需要传输数据的页面元素。

没有谷歌分析跟踪

Google 为用户使用 AMP 页面的缓存版本而不是访问您的服务器，这是 AMP 页面加载速度如此之快的原因之一。 虽然缓存可以让您的页面加载得更快，但 Google Analytics 不会跟踪用户的访问，除非您对 GA 进行配置并对 AMP 页面应用单独的跟踪代码。

下面介绍了如何使用 Google 跟踪代码管理器在 Google Analytics 中跟踪 AMP 页面。

AMP 页面有其优点和缺点，但是，如果您希望为访问者提供快速且优化的移动体验，那么 AMP 的优点绝对胜过缺点。

下一节将重点介绍使用 AMP 实现 KPI 和提高 ROI 的企业的案例研究。

第 4 部分：AMP 成功案例

当我们谈论移动网页时，速度就等于收入。 SOASTA 的研究表明，即使页面加载时间延迟 100 毫秒也会导致较低的转化率：

为了突出 AMP 对移动网页的影响，Google 委托 Forrester Consulting 对使用 AMP 的出版商和电子商务网站进行了全面的经济影响™研究。

该研究重点介绍了 4 家一直在使用 AMP 格式的网络公司。 查看这 4 家公司的结果，Forrester 创建了一个模型来预测三年内实施 AMP 的预期回报。

利用这种模式，一个每月网站访问量为 400 万且利润率为 10% 的网站有望在不到 6 个月的时间内收回植入 AMP 页面的成本并开始看到正收益：

这些是从研究中收集到的主要结果：

• 销售转化率提高 20%。 根据 Forrester 模型，接受本研究采访的两个电子商务网站进行的 A/B 测试表明，其 AMP 页面的转化率提高了 20%，这将带来超过 20 万美元的年利润。
• AMP 网站流量同比增长 10%。 根据该模型，网站流量的增加会带来额外的销售额和广告浏览量，这将在第一年为网站带来超过 75,000 美元的年利润。
• 每次访问的页面增加 60%。 AMP pages performed positively for e-commerce and news publishers who both said that there was a 60% increase in people coming to the site and those people spent twice as long on the site with a small increase in return visitors of 0.3%.

AMP is a relatively new format, and obviously, you have to incur some costs with its adoption. However, the payoff of implementing the AMP format outweigh the initial cost.

Gizmodo uses AMP pages to become 3x faster on mobile

Gizmodo focuses on user experience, with half of their traffic coming from their mobile website, ensuring that the website was fast and clear was essential if they wanted readers to engage with their content on mobile.

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP landing pages, and how connecting optimized AMP ad landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to landing page: Typical ads don't know the URL of the actual landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective landing page, and the page loads instantly.
2. Pre-fetch landing pages: The non-CPU intensive resources that are visible on the first viewport of the landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the landing page.

AMP-constructed landing pages are designed with the framework to continue the streamlined mobile experience that users initiate when clicking on a mobile AMP ad.

Here's how AMP Ad landing pages compare to regular ad landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP landing pages directly from our platform in a matter of minutes just by following these steps.

第 1 步：创建新页面

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

After you finish and click Publish, you will be notified if you exceed the 75KB limit:

Once validated, your page is ready to publish.

第 5 步：发布

WordPress 和自定义域可以在 Instapage 中发布 AMP 登陆页面。 单击蓝色发布按钮后，您可以选择任一方法：

对于 WordPress，请在您的网站上安装并登录 Instapage 插件，然后将您的新 AMP 登录页面发布到 WordPress：

否则，请输入您的域和子域：

页面上线后，您将在仪表板中的页面旁边看到 AMP 徽标：

如果您的移动页面由于页面加载速度慢而遇到高跳出率和低访问者参与度，那么创建 AMP 页面是一个很好的解决方案。

AMP 框架部署的优化技术不仅有助于提高页面速度，还可以为用户提供令人愉悦的移动体验。 创建 AMP 广告着陆页可帮助您向访问者提供优化、快速且相关的着陆页。

Instapage 是目前唯一允许您使用 Google 的 AMP 框架创建针对移动设备优化的着陆页的着陆页平台。使用 AMP 创建的着陆页具有近乎即时的加载和流畅的滚动。

立即开始使用 Instapage 创建 AMP 页面，以创造更好的移动浏览体验、提高质量分数并产生更多转化。