有必要了解的AMP技术

发布时间:2019-02-22 作者:一点通


AMP是Google退出的一款加速移动网页的开源框架,全称是Accelerated Mobile Pages(加速移动网页),据官方给出的数据,平均能有4倍的速度提升。

目的

  • 为了解决移动端网站加载慢的问题

移动网页为什么慢

  • 1、移动设备的硬件性能本身要比PC低
  • 2、目前大多数网页都是兼容PC和移动端的,所以并未单独为移动端做优化
  • 3、网页中充斥着大量的低质量JS代码也是降低网页性能的原因之一

加速原理

  • 1、AMP runtime定义了一套独有的HTML标签,替代了原有的一些加载缓慢的标签。
  • 2、AMP validator是一个验证器,严格限制AMP网页中能用的东西,比如不允许使用自己的JS,不允许外部加载CSS
  • 3、Google AMP cache提供了第三方的缓存用来保证从Google搜索页进入AMP网页时能够预加载甚至预渲染。

适用对象

  • 要知道,任何技术都不能解决所有问题。同样,AMP主要适用于静态的、交互简单的、不需要依赖外部JS的网页。

实现成本

  • 需要完全按照AMP的规范和标签来改写网页,所以一般老的网站得整个重写,成本较高。

回报

  • 1、提升网站访问速度
  • 2、提升SEO
  • 3、提升品牌价值

代码示例

接下来我们看看MP究竟长什么样子,首先Doctype是必不可少的

<!doctype html>

然后是<html amp>或者<html ⚡>告诉大家这是一个AMP网页。

头部的第1行必须是

<meta charset="utf-8">

第2行引入AMP runtime JS框架

<script async src="https://cdn.ampproject.org/v0.js"></script>

接着是一个标记,该标记指向AMP-HTML文档的常规HTML版本

<link rel="canonical" href="https://ampbyexamplecom/introduction/hello_world/">

然后是viewport

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">

CSS必须是内联的

<style amp-custom>
    h1{
        color: red;
    }
</style>

完整代码如下

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link rel="canonical" href="https://ampbyexamplecom/introduction/hello_world/">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
    <style amp-custom>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive"></amp-img>
</body>
</html>

百度MIP

虽然AMP带来了不少的好处,但是国内毕竟不能访问Google,缓存效果也没那么好,而大部分用户还在百度上。

基于上面的原因,百度在AMP之后也推出了一款极为类似的框架MIP,全称是Mobile instant Pages(移动网页加速器)。在手机端百度上面搜索MIP可以看到右下角有一个蓝色的闪电图标。

原理都一样,不过自定义的标签却不一样。所以如果想同时实现AMP和MIP的话,目前只能开发两套,不过未来很可能会走向统一的标准。

到底用什么

最终都得看需求,如果你的网站主要用户群体都是从百度作为入口,那么无疑是走MIP,如果网站是国际化的,那么AMP是首选了。