AMP（Accelerated Mobile Pages）是谷歌近年推出的，
一项专门针对移动设备快速加载页面的技术。
近期的项目中已经开始试用，
于是把目前从 HTML 转 AMP 经验稍微整理下，以作参考。
以下的内容适用于已经基本了解 AMP 概念，
开始进入实践阶段的 coder。
【AMP 资料】
1、官网：https://www.ampproject.org/
2、范例：https://ampbyexample.com/
3、社区：https://github.com/ampproject
4、检测：https://search.google.com/test/amp
【图片转换】
1、<img> 替换为 <amp-img>
2、所有图片需指明高宽
3、响应式图片增加 layout="responsive"
4、因 amp 实现方式，对父级容器的定位可能需要事后调整
【CSS 整理】
1、除了字体，全部样式需直接插入页头的 <style amp-custom>
2、不能使用 !important，不能使用各类 hack
3、动画效果仅限 opacity/transform（支持 gpu 加速的属性）
（transition/animation/keyframe）
4、精简并压缩（https://cssminifier.com/、https://www.cleancss.com/css-minify/）
【常用交互】
1、滑出侧栏：https://ampbyexample.com/components/amp-sidebar/
2、收缩区块：https://ampbyexample.com/components/amp-accordion/
3、图片轮播：https://ampbyexample.com/components/amp-carousel/
4、图片放大：https://ampbyexample.com/components/amp-image-lightbox/
5、图文遮罩：https://ampbyexample.com/components/amp-lightbox/
6、社交分享：https://ampbyexample.com/components/amp-social-share/
7、YouTube：https://ampbyexample.com/components/amp-youtube/
【跟踪分析】
1、ga：https://developers.google.cn/analytics/devguides/collection/amp-analytics/
2、gtag：（似乎已失效，最终使用的是 amp-pixel）
https://juliencoquet.com/en/2017/01/27/tracking-amp-pages-with-google-analytics-and-tag-manager-2/
https://www.conversioner.com/blog/google-analytics-amp-website-google-tag-manager
2、adwords：https://developers.google.com/adwords/amp/landing-pages
3、bing：https://www.ampproject.org/docs/reference/components/amp-pixel
4、amp client id：https://support.google.com/analytics/answer/7486764
【调试发布】
1、地址后添加 #development=1 进入调试模式/校验
2、head 中 canonical 指向普通版网址，普通版网址通过 amphtml 指向 amp 页面。
3、添加“结构化数据/schema”（https://www.ampproject.org/docs/tutorials/create/basic_markup）
4、通过在线测试后加入谷歌索引（可选）
5、查看搜索报告，分析问题
(最后更新：180208)
