网络上有大约 150 万个加速移动页面 (AMP)。

AMP 不仅有助于缩短加载时间，还可以删除不必要的 JavaScript、CSS 和延迟加载。 它帮助各种组织开发了干净和精简的网页，并将页面速度提高了三倍。

在本文中，您将了解 AMP 的组件、其工作原理、优势、限制以及与渐进式 Web 应用程序 (PWA) 和响应式 Web 设计相比的位置。

什么是安培？

让我们解开什么是 AMP 以更好地理解它。

三个核心组件和优化技术的结合确保了超快速的用户体验。

AMP的核心组件

AMP 由三个元素组成：HTML、JavaScript 和缓存。

AMP HTML

AMP HTML 与常规 HTML 标记不同，因为它还包含 AMP 特定标记。 也称为自定义标签，这些标签使在代码中执行 AMP 变得容易。

AMP HTML 限制了一些 HTML 代码以保证网站的可靠性能。 谷歌搜索引擎和其他平台通过 HTML 标签识别 AMP。

AMP JavaScript

AMP JavaScript 库实施 AMP 最佳性能实践，以确保快速呈现 AMP HTML 页面。 最佳实践包括内联 CSS 和字体触发。

来自外部资源的所有内容都与 AMP JS 异步，以防止渲染延迟。 AMP JS 还禁用慢速 CSS 选择器并在加载资源之前预先计算页面元素以提高页面性能。

AMP 缓存

缓存是一种众所周知的提高页面性能的技术。 AMP 以 AMP 缓存的形式利用基于代理的内容交付网络来存储有效的 AMP 文档。

AMP 缓存带有自己的验证系统。 该系统使用一系列断言来验证页面的标记是否符合 AMP HTML 规范。

验证系统的单独版本将验证错误直接记录到浏览器的控制台中，使您能够查看影响性能和 UX 的代码更改。

优化技术

既然您已经了解了构成 AMP 框架的核心组件，那么让我们回顾一下使快速加载页面成为可能的优化技术。

异步 JavaScript 执行

AMP 只允许异步 JavaScript，因为 JavaScript 往往会延迟页面渲染并阻塞 DOM 构建。 确保 JavaScript 不会延迟渲染很重要，否则会直接影响页面的加载速度。

所有资源的静态大小

AMP 喜欢在加载资源之前确定每个元素的大小和位置。 这就是为什么任何外部资源（如图像或广告）都必须声明其 HTML 大小的原因。 利用此信息，AMP 无需等待任何资源下载即可加载页面布局。

扩展机制

AMP 会阻止许多不必要的 Javascript、CSS 和 HTML 以提高速度，但它允许对灯箱和社交媒体嵌入等元素进行扩展。

不使用第三方 JavaScript

由于同步加载，第三方 JavaScript 会减慢加载时间。 AMP 页面允许使用 JavaScript，但仅限于沙盒 iframe。 由于沙盒，Javascript 无法阻止主页面的执行。

内联和大小绑定的 CSS

CSS 往往会导致臃肿，并且还会延迟渲染。 AMP HTML 使用内联样式来删除对网页的许多 HTTP 请求。 应该为内联 CSS 保留 50 KB 的空间——足够用于复杂网页的空间。

高效的字体触发

一个典型的页面由同步脚本和几个外部样式组成。 在加载脚本之前，浏览器不会下载字体。

仅运行 GPU 加速的动画

繁重的动画需要 GPU 加速。 GPU 分层执行所有任务。 然而 GPU 无法更新页面布局。 它将任务交给网络浏览器，从速度的角度来看，它的效率并不高。

资源加载的优先级

AMP 保持快速速度的一种方法是优先考虑资源加载。 它只根据需要加载资源，并预取延迟加载的资源。

即时加载页面

AMP 会立即加载，因为它们甚至在用户指向他们想要导航到的页面之前就已呈现。 这可以通过 AMP 预连接 API 实现，而无需使用大量带宽或 CPU。

AMP 的好处

当应用程序的页面加载速度超过标准时，用户体验会得到改善。 它改善了不同设备和平台上的 Web 体验。 由于这些创新，AMP 具有许多优势。

吸引更多客户

您的网站访问者将立即获得他们需要的信息。 这是可能的，因为 AMP 的平均加载时间不到一秒。 如此短暂的加载时间会增加页面参与度，并使访问者更有可能对您的 CTA 采取行动。

最大化收入

就像一秒钟的停机时间可以决定一个企业集团市场价值的命运一样，您的网站延迟一秒钟会使您的转化率降低 12%。 AMP 在网站、广告和点击后登录页面上提供更快的用户体验。

保持灵活性

使用 AMP 时，您有机会使用优化的 Web 组件。 您可以使用 CSS 设置样式并从网页中检索数据，然后进行 A/B 测试以确保最佳用户体验。

降低复杂性

AMP 创建过程简单明了。 您的整个存档可以轻松转换为 AMP，包括您的 CMS 存档。 优化 AMP 页面不需要任何特殊技能。

最大化投资回报率

创建 AMP 页面后，它们会同时分发到不同的平台。 AMP 的此功能允许在 AMP 和非 AMP 页面上使用广告。 因此，您可以在所有平台上制作广告并提供您的品牌体验，从而最大限度地提高您的广告预算投资回报率。

创造可持续的未来

作为一个开源项目，AMP 旨在构建致力于提供更快、更好的用户体验的应用程序。 通过在您的移动应用程序和网站中部署 AMP，您可以成为这个可持续未来的一部分。

改善用户体验

您的最终目标应该是建立更好的用户体验。 AMP 可以让您的加载时间加快 15% 到 85%。 即使它只意味着一秒钟的改进，也值得一试 AMP——你可能会对它对用户体验的改进程度感到惊讶。

提升搜索引擎优化

在对网站进行排名时，Google 的算法会识别页面加载速度和移动响应能力。 您的移动网站的加载时间将有助于确定您的网页排名。 它加载得越快，它在搜索引擎结果页面中的排名就越高。

AMP 优化页面的标题下方有一个绿色闪电图标，表示其加载速度很快。 支持 AMP 的页面也以轮播形式出现在 SERP 上的付费广告上方。

AMP 的限制

毫无疑问，AMP 页面提供了很多优点，但也有一些不容忽视的缺点。 这里有几个。

没有第三方 JavaScript

由于 AMP 限制了 JavaScript，开发人员无法跟踪分析功能。 因此，很难提供量身定制的用户体验。

没有谷歌分析跟踪

AMP 速度更快的原因也限制了 AMP 使用 Google 分析。 Google 使用 AMP 的缓存版本，而不是从服务器加载页面。 除非您进行 GA 配置并使用单独的跟踪代码，否则它不会跟踪访问者的数量。

AMP 与其他优化框架

AMP 是一种创新方式，可以加快移动网页的加载速度，但它并不是唯一经过优化的框架。 以下是它反对替代方案的方式。

AMP 与 Facebook 即时文章

AMP 页面和 Facebook Instant Articles 都加快了加载信息的过程。 尽管与网络替代品相比，AMP 页面更受欢迎，但 Facebook Instant Article 的参与率和速度远高于 AMP。 这是因为 Facebook 开始优先考虑文本和视频文章，导致开发人员停止使用即时文章。

AMP 与响应式网页设计

自 2015 年谷歌推出其适合移动设备的算法以来，移动网站一直统治着网络应用程序——这一事件被称为 mobilegeddon。 使用响应式网页设计创建的移动网页为不同的屏幕尺寸和方向提供灵活的格式。

另一方面，AMP 于 2016 年问世，旨在加快网页的加载时间。 两个页面都使用 Javascript 和 HTML 作为编码部分，但 AMP 通常更注重速度，并引入了即时内容渲染。

AMP 与现有的响应式网站相结合，无需重新设计网页，但要开发一个响应式网页以与另一个网页结合，则需要重新设计。 响应式网页设计是缩放网页而不是提高速度。 AMP 具有更多有限的功能，使其能够比响应式网页设计页面更快地加载网页。

AMP 与 PWA

AMP 针对速度进行了优化，而渐进式 Web 应用程序 (PWA) 则强调网站的外观和感觉。 PWA 可以在不中断用户体验的情况下动态更新网页。

AMP 和 PWA 如果一起使用，可以帮助您创建具有快速页面呈现过程的动态网站。

AMP 提升您的移动网页

借助 AMP、Facebook Instant Articles 和 PWA 等一系列优化框架，您的移动页面上的低参与度和高跳出率确实没有任何借口。 利用 AMP 优化技术提供强大的体验并满足 Google 的速度预期。

使用 AMP 优化您的网站？ 您还需要一个移动开发平台。 查看 G2 上的所有可用选项。