初探谷歌AMP技术

最新推荐文章于 2023-03-20 08:47:17 发布

没睡醒的蛐蛐

最新推荐文章于 2023-03-20 08:47:17 发布

阅读量5.1k

点赞数 2

分类专栏：前端文章标签： amp web前端移动网页设计与开发html5 性能优化 html

本文链接：https://blog.csdn.net/meishuixingdeququ/article/details/75048533

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

参加完腾讯web前端大会后，对其中的AMP技术比较感兴趣，遂花了点时间研究了一下，于是有了该篇文章

什么是AMP？

AMP全称Accelerated Mobile Pages，意为加速的移动页面。Google将会免费把他们的网页缓存到Google自己的CDN中。简单的说 AMP就是缓存…如果符合规则，您将可以使用其中的缓存。

谷歌开发AMP初衷

广告服务

Facebook开发Instant Article的目的是让你在Facebook上就能看到其他网站上的内容，这个方向是非常正确。如果能够在Facebook里享受到比在其他浏览器更加快的加载速度的话，用户又何必再去用别的应用来看呢。

谷歌似乎是认识到了来自于Facebook的这种威胁——通过Instant Article，Facebook完全可以过滤掉Google的广告服务。于是Google迅速动手开发了AMP项目，其目的实际上就是为了增强它在移动广告服务领域的市场。至于为什么电脑用户被抛弃掉了，那是因为谷歌已经掌握把广告推送给你的能力了。

AMP特点

AMP的HTML是标准HTML的子集，限制了部分标签的使用
CSS代码也简化，而且要写在HTML中，不能调用外部CSS文件
所有js文件必须是异步加载的
不允许自定义js脚本
资源控制，比如图片、视频等用户下拉到图片时再加载
高度缓存，Google将页面缓存在自己服务器了
根据Google给出的数据，目前所有的AMP页面的打开速度都低于1秒，少于1s是符合用户心理预期的.大于1s后多延迟1s会流失20%的用户

AMP技术组成

AMP HTML

下面是一些在写AMP HTML时需注意的：

如果 a 标签的 href 属性以 javascript: 开头，则 target 属性必须设置为 _blank，否则不被允许。
内部样式表必须包含amp-custom 如<style amp-custom>
不可使用!important样式，AMP Runtime需要拥有对元素样式的最终决定权
某些选择器因为性能问题而被禁用，如(*) 和 (:not)

AMP JS

在head区域引用的<script async src=”https://cdn.ampproject.org/v0.js”></script>就是AMP JS，它最大的优化是使一切来自外部的资源都异步加载，不会阻塞页面渲染。AMP JS提供对自定义元素（Custom Elements）的支持，负责协调资源的加载时机和优先级，以及提供验证器等调试功能。
另外，在浏览器url后追加 #development=1 会开启开发者模式
正常页面：https://www.seozac.com/baidu/aureum-algorithm/
AMP页面：https://www.seozac.com/baidu/aureum-algorithm/amp
开发者模式AMP页面：https://www.seozac.com/baidu/aureum-algorithm/amp/#development=1

AMP Cache

AMP Cache是基于CDN，它会自动抓取AMP HTML页面，并自动缓存，以提高页面的性能，并且所有JS文件和图片使用HTTP2.0。简单的说，只要大家按照AMP的规范写AMP页面，就能够被收录到AMP Cache中。
AMP Cache还带有一个验证系统，以确保页面正常工作，而且不依赖于外部资源。该验证系统还运行一系列的断言确保页面符合AMP HTML规范

AMP适用于哪些场合？

由于AMP HTML对页面做了许多限制和约束，所以AMP主要用于提高静态页面的性能，这个静态也不是指无服务端参与的页面，而是指没有复杂交互、以展示内容为主的页面，比如无评论功能的博客、新闻详情页面等等

解析一个AMP文件

<!-- 必须为 doctype html -->
    <!DOCTYPE html>
    <!-- 方便其他程序能识别出该页面为AMP HTML  ⚡ 也可换为amp-->
    <html ⚡>
      <head>
        <meta charset="utf-8">
        <!-- AMP Runtime 该js需翻墙 -->
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <!-- 用于指定该页面普通版本的url，如果只有一个版本，使用当前url即可 -->
        <link rel="canonical" href="my-non-amp.html">
        <!-- 在普通页面版本中 href需指定为amp页面的url -->
        <!-- <link rel="amphtml" href="my-amp.html"> -->
        <!-- 必须包含viewport -->
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <!-- 样板代码 start -->
        <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>
        <!-- 样板代码 end -->
        <!-- 内部样式表(不超过50KB)必须包含 amp-custom属性 -->
        <style amp-custom>
          h1{
            color: #6cf;
          }
          .test{
            border: 1px solid red;
            width: 60%;
            margin: 0 auto;
          }
        </style>
        <title></title>
      </head>
      <body>
        <h1>demo</h1>
        <div class="test">
          <amp-img src="./img/a.png" width="400" height="300" alt="" layout="responsive">
        </div>
      </body>
    </html>

样板代码是为了确保页面在被渲染完毕前不可见（透明度为0）
早先的样板代码如下：

    <style>
      body {
        opacity: 0
      }
    </style>

    <noscript>
      <style>
        body {
          opacity: 1
        }
      </style>
    </noscript>

这种样板代码，如果AMP Runtime加载失败，技术上是不可能让页面的透明度从0变为1，为了避免这种情况，现在的模板已经做了修改

    <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>

AMP上线前验证

AMP可以在 https://search.google.com/search-console/amp 验证下, 通过后可以提交
AMP毕竟是谷歌的产品，所以自然带着谷歌的特色，在大天朝体验效果就一般般，百度也推出了一个类似的MIP，这个就不在这里展开了，有兴趣可以看官方文档 https://www.mipengine.org/doc/00-mip-101.html
MIP可以在百度站长平台-MIP引入提交: http://zhanzhang.baidu.com/mip/index

体验地址

可以从该地址来体验AMP技术的效果https://g.co/ampdemo

不管我在PC的移动端模式还是手机上，搜索出来的结果并没有带AMP标记的网页，感到比较奇怪。

补充

AMP技术可以极大提高网站加载速度，但这只是影响搜索排名的中的一个因素，使用AMP并不能大幅提升你在搜索结果中的排名

没睡醒的蛐蛐

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
初探谷歌AMP技术

什么是AMP？AMP全称Accelerated Mobile Pages，意为加速的移动页面。Google将会免费把他们的网页缓存到Google自己的CDN中。简单的说 AMP就是缓存…如果符合规则，您将可以使用其中的缓存。
复制链接

扫一扫