Accelerated Mobile Pages(简称AMP,意为“加速移动页面”)是Google带领开发的开源项目,目的是为提升移动设备对网站的访问速度。AMP也可指其派生的标准和库等项目成果。AMP在HTML等广泛使用的网络技术基础上进行改良,它的核心称作AMP HTML,是HTML的一种。服务于技术预览期结束后的2016年2月正式发布。
简单一点来说,AMP 就是一种让移动网页访问速度更快的一种页面写法,本质上依然是HTML + CSS + js,只是避免了那些损耗性能的糟粕特性。谷歌爸爸占据着流量的入口优势,说,你们按照我说的来,你们的网站速度就会更快,你爱信不信,反正将页面改写为AMP的人SEO排名已经遥遥领先,率先成为高富帅了。所以,我不得不再切一个AMP的页面。
为什么会有加速的效果?
- AMP有着非常多的限制,本质是为了避免HTML、CSS、JavaScript损耗性能的部分特性。
- 发布的AMP网页会在谷歌的服务器上访问,所以是利用谷歌的cdn资源和缓存资源。
- 谷歌有着大量的访问流量,可以提前缓存静态资源。
- 😝以上原因都是我猜的。
amp 能否结合 vue 或者 react 一起使用?
- react的自定义组件名是以大写开头的,目前来看现有amp组件都是小写,那么react应该不会接管amp的组件,不过amp对额外的script、style标签是有限制的,所以需要进行后端渲染,在参考链接里有一篇文章可供参考。
- 目前的认识来看,应该是不能使用 vue 的,vue 会把 amp 组件当成 vue 组件,直接无法通过构建。
- 当然,对大牛来说上面都不是问题。
如何将现有 HTML 转化为 amp 页面?
- PHP 有一些类库利用正则表达式做一些标签替换就行了,对应其它语言类似。
- 谷歌收购了一款专门将传统网页转化为 amp 页面的工具:Relay Media。
如何快速上手?
在 amp 页面上加上 development=1 的参数就会有页面校验功能,这样把报错一个一个修正过来,免去文档不知道从哪里看起的烦恼。
https://www.dev.591.com.tw/home/news/detail?id=17#development=1
amp 内置标签一些特殊用法
amp-img
必须设置 height 和width 属性,否则无法正常显示,所以如果你使用的是富文本编辑器,那么记得在img标签上设置width 和 height的属性,以便转换为amp-img标签时不会失效。<img src="https://hp1.dev.591.com.tw/house/news/2018/151600946998898006.png" width="388" height="291" layout="responsive">
参考链接
https://zh.wikipedia.org/wiki/Accelerated_Mobile_Pages
https://www.ampproject.org/zh_cn/docs/reference/components/amp-img