一嘉

AMP,Google 的移动页面优化方案
页面性能优化是一个老生常谈的话题,许多的博主都在尽力去优化页面打开的速度,给访客最优质的体验,Google 某个团...
扫描右侧二维码阅读全文
26
2018/08

AMP,Google 的移动页面优化方案

logo-og-image.jpg
页面性能优化是一个老生常谈的话题,许多的博主都在尽力去优化页面打开的速度,给访客最优质的体验,Google 某个团队推出了一项名为 Accelerated Mobile Pages(AMP)的技术,号称能大大加快移动端页面呈现速度,提高整体体验。本文就带大家认识一下这项新技术。

AMP介绍
Accelerated Mobile Pages(官网GitHub),中文的意思是:加速的移动页面。根据官方说明,AMP 在 Speed Index(首屏展现时间平均值)测试中,性能有 15% ~ 85% 的提升,测试是在模拟 3G 网络环境并模拟 Nexus 5 的条件下完成(详情)。
AMP 如何让页面性能大幅提升暂且搁置一边,先来看看它是什么。根据官网文档得知,AMP 主要由 AMP HTML、AMP Runtime 以及 AMP Components 三部分组成。

AMP HTML
AMP HTML 是 HTML 的子集,在 AMP HTML 中只允许使用有限的标签。例如 body、article 这些标签可以直接使用,没有任何限制;有些标签允许有限制的使用,例如 meta 标签不能使用 http-equiv 属性;而像 img、audio 这样的标签需要替换为 amp-img、amp-audio 等 AMP Components;更多的标签如 frame、form 不允许使用。

以下是该文档中的 AMP HTML 示例:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

可以看出,AMP HTML 与普通 HTML 并没有什么太大区别,将上面这段代码保存为 .html 文件,在浏览器中可以正常运行。下面简单列举一些格式上的要求:

  • DTD 必须是: <!doctype html>; 顶层标签必须包含 AMP 属性,如:<html amp>(让其他程序能方便地识别出这是
    AMP HTML); 必须在 HEAD 区域中放置 <link rel="canonical" href="$SOME_URL" />
    标签,用来指定该文档普通版本的 URL;如果只有一个版本,使用当前 URL
    即可(告诉搜索引擎,这是同一个页面不同的版本,否则可能会被判作弊); 必须将 <meta charset="utf-8"> 放置在
    HEAD 区域最开始的位置(实际上,普通 HTML 也应该这么做); 必须在 HEAD 区域包含这个 ViewPort:

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

AMP Runtime
在上面的 AMP HTML 代码中,HEAD 区域最后外链引入的 JS 就是 AMP Runtime。AMP Runtime 提供对自定义元素(Custom Elements)的支持,负责协调资源的加载时机和优先级,以及提供验证器等调试功能。

访问 AMP HTML 时,在 URL 最后追加 #development=1 会开启开发者模式。这时 AMP Runtime 会自动加载验证器,并在控制台显示本页不符合 AMP 规范的位置信息。

AMP Components
AMP Components 是使用浏览器自定义元素(Custom Elements)实现的组件,用来替换 HTML 中默认的 <video> 等标签,用来实现对资源的自定义加载策略;它也用于实现一些复杂的交互效果,如图片轮播。AMP Components 分为两类:

1)内置组件,包括:amp-img、amp-audio、amp-anim、amp-ad、amp-pixel、amp-video,在 AMP HTML 引入了 AMP Runtime 之后,这些内置组件就可以直接使用。

2)扩展组件,包括:amp-carousel、amp-lightbox、amp-iframe、amp-instagram、amp-twitter、amp-youtube。要使用扩展组件,需要在 AMP HTML 中引入该组件对应的文件。例如要使用 amp-carousel 就必须引入以下文件(必须要有 async 和 custom-element 属性):

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

这里有一个按照 AMP HTML 规范编写的页面,大家可以直接用浏览器打开查看:AMP 示例(注:为了保证国内打开速度,我把 AMP JS 托管在了本地,实际上这么做并不符合规范)。

Last modification:August 26th, 2018 at 03:10 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment