让我们深入了解加速移动页面

已发表: 2016-04-17

目录

  • 1 AMP 入门
  • 2 AMP由什么组成？
  • 3为什么AMP这么快？
  • 4安培您的网站...
  • 5如何通过 AMP 中的广告获利？
  • 6如何使用 AMP 启用分析？
  • 7 AMP 在 Google 上的外观如何？
  • 8总结：

难怪，响应式布局、适合移动设备的网站以及网络上的无数数字策略引起了轰动，以确保您的网站在各种设备上流畅运行。 然而，对于许多用户来说，在移动网络上阅读是一种缓慢而笨拙的体验。 为了随时随地访问内容并向用户提供即时加载的移动优化内容，需要开发精美的流线型网页，以提高页面加载速度。

在继续之前，让我们快速浏览一下您将从这篇文章中学到的关键点：

–革命性加速移动网页 (AMP) 简介
– AMP 是如何工作的？
–高速背后的奥秘
–在您的站点中集成 AMP
–您如何通过 AMP 获利？
–启用分析

瞧！ 您已准备好在 Google 搜索上查看完美、强大且活泼的移动网页。

在不断发展的移动网络中，Google 随时准备尝试新的方法来提高性能并加快所有设备上的内容交付。 几个月前，谷歌宣布了一项革命性的移动新闻消费计划，采用了一种名为 Accelerated Mobile Pages (AMP) 的基于 Web 的开源解决方案。 是的，这是一个谷歌项目，旨在让网站构建快速呈现的轻量级页面。

AMP 入门

AMP 是一个易于访问的框架，用于创建快速加载的移动网页。 这是一项专门为出版商设计的开源计划，旨在通过提高页面加载速度来增强移动阅读的用户体验，从而保护他们可能依赖的任何广告收入。

从 AMP 开始

尽管有经验的 Web 开发人员可以通过关键的性能优化来实现类似的结果，但由于缺乏资源，出版商经常忽略这一点。 而且，AMP 允许在不修改主要移动 Web 体验的情况下轻松实现这些优化。

Accelerated Mobile Pages 项目的关键是出版商、平台和开发人员都支持并共同努力

一些大型网络技术公司和谷歌通过将其集成到各自的平台来鼓励使用它，这将是其未来使用的额外好处。

AMP由什么组成？

AMP基本上由三部分组成：

1.AMP HTML
它基本上是一个扩展的 HTML，具有一些自定义 AMP 属性以提供高性能和一些扩展，以构建超出基本 HTML 的丰富内容，用于这个简单而优雅的解决方案。

尽管大多数标记都是相同的 HTML 标记，但有些标记已被 AMP 特定标记所取代。 这些是自定义 AMP HTML 元素，它们使常见的模式易于实施。 例如， <img> 标记已替换为 <amp-img> 。

2.AMP JS
AMP JS 库整体确保页面的快速呈现。 它管理资源加载并实施最佳性能实践。

它提供了许多性能技术，例如对所有 iframe 进行沙盒处理、在加载资源之前预先分配页面上每个元素的布局以及禁用慢速 CSS 选择器。

这是最大的优化之一，所有内容都来自异步外部资源，因此页面上的任何内容都不会阻止任何内容呈现。

3.谷歌AMP缓存
Google AMP Cache 是一个基于代理的内容交付网络，可交付所有有效的 AMP 文档。 它带有一个内置的验证系统，以确认每个页面都可以正常工作并且不依赖于外部资源。 此验证系统有助于在页面呈现时将错误日志直接保存到浏览器的控制台，并允许您跟踪代码中的一些复杂更改可能如何影响性能和用户体验。

为什么 AMP 这么快？

设计 AMP 项目背后的整个想法是纯粹的速度和纯粹的可读性。 而且，这是通过对 HTML、CSS 和 javascript 的优化来实现的。 让我们发现：

页

–某些 HTML 标记的使用已被取消，并且不会在 AMP 中使用表单等元素。 这就是为什么有些人认为它是饮食 HTML 的原因。
–您将不得不使用 CSS 的简化版本，并且 CSS 的一些最佳实践部分受到限制。
–基本上，根本不允许使用 Javascript，但您仍然可以使用现成的 js 库，该库提供诸如延迟加载之类的内容，并且页面上的图像在滚动到视图中之前不会加载。
–这些页面被大量缓存，因此 Google 可以托管这些页面并在其中获取实际内容。

AMPing 您的网站...

对于初学者，建议维护您的文章页面的两个版本：用户可以看到的原始版本和该页面的 AMP 版本。 此外，让我们看看下面列出的表格中包含的内容和不包含的内容：

1. AMP 不允许使用表单和第三方 javascript 等元素，因此您将无法拥有潜在客户表单、页面评论和您通常在标准实施中使用的一些其他元素。

2. AMP 允许 CSS 的简化版本。 为了控制快速加载，AMP 中的 CSS 必须小于 50kb，并且应该是内联的。 此外，必须使用特殊的扩展名 <amp-font> 来加载自定义字体，以控制加载强度。 因此，您可能需要重写网站模板以提交这些 AMP 限制。

3.为了更好地处理多媒体，您网站中的图像应明确包含高度和宽度属性，它们需要使用自定义 <amp-img> 元素并为动画 GIF 使用单独的扩展组件 <amp-anim> .

4.要通过 HTML 嵌入本地托管的视频，可以使用自定义 AMP 标记 <amp-video>。 但是，对于嵌入 Youtube 视频，有一个单独的组件 <amp-youtube>

5.对于幻灯片等内容，可以使用 <amp-carousel>，对于图像灯箱，可以使用 <amp-image-lightbox>。 有用于嵌入各种社交媒体渠道的特殊扩展组件。

最后，为了让 Google 检测到您的 AMP 版本的页面，您需要在原始文章页面中包含以下标记：

<link rel =”amphtml” href=”http://www.example.com/blog-post/amp”>

–规范标签应基本上包含在 AMP 页面中。
–此外，一些支持 AMP 的平台需要通过 Schema.org 元数据指定页面的内容类型，因此请确保正确使用您的架构。

如何通过 AMP 中的广告获利？

广告拦截器的大幅增加使发布商难以通过其网站获利。 如今，许多人使用广告拦截器来帮助提高浏览器速度和加载时间。 AMP 是这个问题的完美解决方案。

AMP 项目在考虑以用户为中心的方法的同时，确保在移动网页上实现有效的广告盈利。 这一目标导致为 AMP 中的各种广告格式、广告网络和技术提供支持。

因此，一些最流行的广告网络，如 Amazon A9、Adreactor、Google AdSense、Adform、Taboola、Smart AdServer、DotAndAds 等已经开始使用 <amp-ad> 组件。

如何使用 AMP 启用分析？

AMP 包含一种非常智能的分析策略，即测量分析一次并将其报告给许多人，以防止多次分析跟踪降低您网站的速度。 有两种方法可以为您的网站启用 AMP 分析功能：

1. <amp-pixel> 元素：
它是一个简单的标签，用于计算页面浏览量，因为理想的跟踪像素将使用 GET 请求执行。 此外，您可以传递许多变量，例如 Title 和 document_referrer。

2. <amp-analytics> 扩展元素：
这比 amp-pixel 更先进，用于在您的站点上实施分析，从而允许为分析交互进行大量配置。 如果您不想让 Google 分析工作，请选择 amp-analytics。 只需在该部分中添加 <head> 所需的 js 库，并在网页的 <body> 部分中使用一些 JSON 标记对其进行配置。

但是，如果您希望在 AMP 中使用 Google Analytics，您需要查看 Google 在其开发人员页面上的 AMP Analytics 部分，该部分提供了几个实施示例。

AMP 在 Google 上的外观如何？

您难道不好奇您的 AMP 页面在 SERP 中的样子吗？ 您可以在 http://g.co/ampdemo 或 YouTube AMP 演示上查看 Google 为该 AMP 功能提供的现场演示。 您也可以通过在手机上搜索某些内容或在 Chrome 开发人员工具上进行模拟来尝试。

谷歌-AMP-Project-1024x576

你会发现什么？ 您会在顶部看到一个带有 AMP 文章的轮播。 点击您想阅读的文章，您也可以左右滑动阅读其他文章。 你一定会接受这种体验。

您可以在此处找到一些主要出版商的演示版本，例如《卫报》（示例 AMP 页面）和《华盛顿邮报》（示例 AMP 页面）。

包起来：

AMP 页面让您体验新设计的精美流线型、快速检票口的内容网页。 因此，对于发布者来说，提高移动网页的速度是一种相对简单的方法。 为了响应谷歌的势头，甚至 Facebook 最近也向所有出版商宣布了 Instant Articles。

如果您是出版商，请开始规划 Accelerate Mobile Pages，采用最新技术并在移动运行中保持领先地位。