本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载
AMP 全称 Accelerated Mobile Pages(官网)顾名思义是为了加速移动网络的网页加载从而提升体验。
从目前官方统计数据看来,速度平均有 4 倍提升
AMP 是一个在 Github 上的开源项目(传送门)
在我看来,它是一套解决方案,我们的移动页面使用了这套解决方案之后,就可以得到提升加载速度的体验。
AMP 是一套解决方案,它主要由 3 大核心组成:
AMP HTML 本质上是使用自定义 AMP 标签&属性扩展的 HTML。
通过这些自定义 AMP 标签&属性,可以确保可靠性能。
具体可参见【3 AMP 实战】
AMP JS 库主要做了以下工作:
另外,AMP 页面不允许使用第三方脚本。
AMP Cache 是用来缓存所有 AMP 页面相关资源的基于代理的 CDN。
可能说的有点抽象,实际上就是在 CDN 网络加了一层代理,专门用来处理 AMP 页面的缓存。
实际上,AMP Cache 主要做的是:
具体的可以参考官方文档介绍。
除了这 3 大核心之外,AMP 还有其他的一些工具,比如 AMP 验证器,AMP 调试工具等等
刚刚说的可能会让读者一脸懵逼,这里就通俗地讲解一下,为什么 AMP 可以提升页面的加载速度。
首先可以参考官方文档介绍的 为什么 AMP 快。
实际上,官方文档说的都是我们平常在优化页面加载性能的时候的经验做法,AMP 就是实现了这些做法而已。
那么,AMP 是怎么实现的呢?答案就是 AMP 的 3 大核心。
首先,要提升一个页面的加载性能,我们首先要知道影响页面性能的地方是哪里。
举个栗子,比如说图片,html 在解释一个 img 标签的时候,要去异步加载一个图片资源,在加载图片之前,不能阻塞页面渲染,因此我们首先要渲染一个图片的占位符,比如 alt。
等到图片加载完成,这个时候浏览器知道了图片的大小,这时就要渲染图片,如果图片真实的大小和之前的占位符的大小不一样,就会造成 reflow。
那我们知道图片的这个问题了,那是不是可以想办法一开始就计算好占位符的大小,这样就不会造成 reflow 了。
另外,当图片很多的时候,我们很自然的就能想到 lazyload,于是我们就 balabala 写一个 lazyload 组件用起来。
因此,AMP HTML 就提供了一个自定义标签<amp-img>
。
AMP 要求所有的图片资源必须使用<amp-img>
,禁止使用<img>
。
这个自定义标签<amp-img>
就实现了所有我们在加载图片上面所使用到的优化手段。
还有许多场景,比如仅允许异步资源,就是为了防止阻塞页面的渲染,AMP 不允许使用第三方脚本就是如此。
另外一个重要的优化手段是 AMP Cache。
我们知道,优化性能最好的手段就是缓存,因此 AMP Cache 是重中之重。
前面的 AMP Cache 介绍在读者看来可能有点云里雾里,既然有 CDN 了,为什么还要加一层代理?
实际上,AMP Cache 最主要做的事情是离线处理,它把 AMP 页面的所有资源都进行缓存并且替换掉了路径。
举个栗子,我们腾讯课堂有个 AMP 页面,路径是:http://m.ke.qq.com/index.html
。
页面里有一张图片,路径是http://9.url.cn/myPic.jpg
。
当 AMP Cache 对这个 AMP 页面进行缓存的时候,会扫描页面,对里面的资源进行缓存。
然后把图片的路径替换成http://cdn.google.com/google/amp-cache/m.ke.qq.com/s2/9.url.cn/myPic.jpg
,当然这是举例子,真实路径不一定是这样,当页面的所有资源都进行了缓存,路径都替换了之后,那么这个替换了路径之后的 AMP 页面也会进行缓存,同时它的路径可能是http://cdn.google.com/google/amp-cache/m.ke.qq.com/s1/m.ke.qq.com/index.html
。
最后最重要的事情就是,在 google 搜【腾讯课堂】的时候,我们的 AMP 页面被搜到了,当用户点击这个搜索结果的时候,打开的并不是http://m.ke.qq.com/index.html
,而是http://cdn.google.com/google/amp-cache/m.ke.qq.com/s1/m.ke.qq.com/index.html
。
好,说到这里,聪明的读者应该知道了:
好吧,google 做了一个 AMP,你说百度能不能学着点吗?
于是,百度借鉴 AMP,也做了一个 MIP (Mobile Instant Pages)。
嗯,本质上,它们是一个东西,现在 MIP 也能识别 AMP 页面了,做的事情都差不多
由于国内网络,鉴于 MIP 和 AMP 是一样的,所以下面我们通过 MIP 直接来真实感受一下
操作步骤异常简单:
www.baidu.com
MIP
下面是操作的录制:
可以看到,MIP 页面的秒开体验,再和非 MIP 页面的一比,简直一个天上一个地下,要注意到,这可是 PC!
聪明的读者应该能观察到,我们打开的 MIP 官网的 url 是:
https://www.baidu.com/mip/c/www.mipengine.org/
而不是https://www.mipengine.org/
上面讲的也差不多了,下面我们来个小实战,来让读者体验一下 AMP 页面
首先我们写 HTML,直接从官网上面 copy HTML 的结构,然后我们写一个列表,列了 24 个课程卡片,每个课程卡片包含课程封面图,还有课程名字与价格:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://m.ke.qq.com/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=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>
<style amp-custom>
/* any custom style goes here */
.clist {
padding: 0;
font-size: 0;
}
.clist__item {
display: inline-block;
width: 50%;
/* height: 500px; */
vertical-align: top;
}
.clist__name {
font-size: 18px;
}
.clist__prce {
font-size: 14px;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1 class="tt">欢迎来到<span class="tt__name">腾讯课堂</span></h1>
<ul class="clist">
<li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCibEMMrIGh9o2PgpZ8YvRAImnjS3HHd52m6CzLJQJrMSicqbY9EV77BZXnodAgN6WAE/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">0基础入门-中日教情景语法课【和风日语网校】</h2>
<p class="clist__prce">¥388.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBxrgvxvOkmibuWybuibKhIYbgtSGngTOFbevxCDAqw5BEPZrnwHZbsvCY2K3ST4nORc/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">新标日入门初级精讲课(上)【和风日语网校】</h2>
<p class="clist__prce">¥140.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDV0Uw3dwzibvYbFbaE25qpfIp95LTjsCsJpsUuzdM3bRGTCJZglM0VmL4kUJnjOqp4/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">小白专用课程:软件测试从零开始</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCzojp4W1DBG70TgerLQic4XggkPFjVSZF8oMhlOJSDvNl1ARHiaTzwgP2IpVNDEAP8A/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试实战专题课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAEFnG7joWicFS2cKF80NH4knVlgdPRbWCiaJ5DhibVUdYsm4WlMM7Xn1ZBPsibDDu2oCI/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试从基础到高级全栈课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDujuL444SVibzJTAXicALwnB6UQYVtPYNPuGGHl7FDEUup6XasBCKjzgvVQvB9JeUOw/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语初级语法全掌握【知诸学院】</h2>
<p class="clist__prce">¥199.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLA0TKpQmI0Kow2V1RKuUnWyjqJicnMWajurXQHTIib1qG4cnMpom6zzOfJ5RHlTpPZicY/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">备战日语能力考N1N2系列【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLDqsclBwEst3Z3jWiaTFx6QGicCniapDbFNPUBzC6x6712f7iaxSALjGyM3icWFYXVgTrB8/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语能力考试12月备考策略N1N2大放送【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAv1lhMS81mdnZLL7A62KrzKght0oxH5az1BkDUqVNCfjoiaKacJ6ickiagEJHRZPdyKk/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">0基础入门-中日教情景语法课【和风日语网校】</h2>
<p class="clist__prce">¥388.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCSiaTu9icgF5OK1ibtZfbJMYrErGcHDjl8IdXywcUAY6B0N54zZ9tLicalicXTgEj5L3DI/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">新标日入门初级精讲课(上)【和风日语网校】</h2>
<p class="clist__prce">¥140.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCXdVmsp5KyiaxPKic0u1SFeia4vSDMtoKXj4icH74tpVnAiby3IicnmQf2Irc36kEHhGsqI/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">小白专用课程:软件测试从零开始</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAShHftWng9OZ3GwANkoADLMo0ssTMftXLoNm3jzOTLNMVCSGQ5yXak74NbdfX7lLk/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试实战专题课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBibRsot4mLvCss5RicLAP8udxqraQx4NYARRPNEK1os8mou5kBBvZF71CwfcRGy6CCE/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试从基础到高级全栈课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLB0NSbJLqpmymBBzJSmeHWXbAWkHVc99mNhPtowOt95QjtS4vhaOlbC6bYKL3xce8A/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语初级语法全掌握【知诸学院】</h2>
<p class="clist__prce">¥199.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBcs2iazTdcKfC2RtPk0gVPw65LK3Nurj91nCedstEyPLMrsZacUxCRD5AtuicoicdUOY/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">备战日语能力考N1N2系列【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBibbP6ePic0IyEzncn7R2mP05kL0bJfP6tvd0MzxHGk8KRYmfCZBIjwEyQscL6cvO8A/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语能力考试12月备考策略N1N2大放送【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCAIneH0Tq36nVxduhps8U1Z050Mf4M2ic9Ik1KkwtXOFg5wqFARsWakpIltWdYnKHU/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">0基础入门-中日教情景语法课【和风日语网校】</h2>
<p class="clist__prce">¥388.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCiaTibjHZP5DSjoEqibTYWSSWNe9GNfEJI3uYSszhNAnLDzfMRGAd2koRMzWSNDM0ITE/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">新标日入门初级精讲课(上)【和风日语网校】</h2>
<p class="clist__prce">¥140.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCzHEECs6RlyDSg7JU1I9EHA0PP97pyGPxicj23J1shtYWR51uyFibYO54HJhsnYUibDs/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">小白专用课程:软件测试从零开始</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLCpicRiayM5FTLfwkWgiaIuw3FgegKtvgltpFJn2ibA6Ubf5xCpRXiciaczQ5EZFMMWnJoUc/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试实战专题课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLBROfeZkt9Xz7NOAkicyZxI1uB7T5atHITRIHDr6S75YY2bV9VZxxhB9VFRnl57bd2Y/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">软件测试从基础到高级全栈课程</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLB3icdDk4Vs3xOq8ytNiauslNczwyNXiaCgU9dXxbjoPkaibrpqLmO5yLRTwo9CibcucHibA/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语初级语法全掌握【知诸学院】</h2>
<p class="clist__prce">¥199.00</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAmQOhfTwpkTzicRiaJ1ibMlYxkJwJUCibrFNictfcbWjaTnybt9HAVfP8ShhdBA7obB5X4/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">备战日语能力考N1N2系列【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li><li class="clist__item">
<amp-img
src="//10.url.cn/qqcourse_logo_ng/ajNVdqHZLLA1FgDkiaVOZjbBdjvqNPCTaRWSII9eOXCeJ6s2xg3eoKTib2QibUPRtebC99kngysa5M/220"
height="124" width="220" layout="responsive"></amp-img>
<h2 class="clist__name">日语能力考试12月备考策略N1N2大放送【和风日语网校】</h2>
<p class="clist__prce clist__price--free">免费</p>
</li>
</ul>
</body>
</html>
上面最主要就是用到了<amp-img>
然后我们通过代理,在 chrome 中打开,在 url 末尾加上 #development=1
,chrome dev tools 就会帮助我们进行 AMP 页面的验证:
再看下 network
界面:
可以看到,页面总共 24 张图片,首屏加载了 18 张,大概 6s 之后加载 4 张,再过 6s 之后再加载剩下的 2 张。
如果在 6s 之内滑动下去的话就会发现图片是有进行 layzload 处理的
可以看到,仅仅通过 <amp-img>
标签,AMP 就帮我们把所有与图片相关的优化都处理了,只要我们遵循 AMP 的规范来编码就可以了
到此,读者应该对 AMP 有个初步的认识了,AMP 页面真的很快,再搭配相应的 Cache 策略,在恶劣的移动网络下,秒开不在是梦!
当然,也需要认识到 AMP 页面的不足的地方:
目前 AMP 页面只适用于静态页面,因为它不允许第三方脚本;另外,页面的链接被替换了呀!
因此,AMP 页面一般适用的地方是:站点官网、广告页。