![b2fd7b388600d5af4bda02a153ccc054.png](https://i-blog.csdnimg.cn/blog_migrate/5eafbfc6138d7899a35082c6151cd371.png)
今天聊聊移动端加速AMP这个话题
什么是移动端加速AMP?
AMP(Accelerated Mobile Pages)加速的移动端页面,我理解的AMP是一个更加简洁高效的Web组件框架,他通过amp来标记标签,例如:
我们在页面嵌入图片时用<img>标签,而在AMP框架中则使用<amp-img>标签。
基础的教程内容,大家可以看官方教程。
AMP之所以快,很大一部分原因是牺牲了很多的CSS加载使用,所以AMP网站通常都非常简洁。
通过AMP,可以构建移动端的网站、内容、广告以及邮件。
为什么要做移动端加速?
移动端一直都是大趋势,看下数据就能知道未来一定是移动互联网的天下。
2019移动经济报告:2025全球移动用户数将达60亿 5G占全球移动连接15%
那么你的移动应用打开的快慢直接会影响到用户的体验,所以这是大势所趋。
WordPress站点如何做移动端加速AMP?
实现WordPress站点的移动端加速,主要2个方案,一个是按照开源的插件,另外一个就是安装AMP主题。
1、开源插件AMP
这个开源插件贡献者包含google、XWP、Automatic等大厂,就是针对一些已经使用了wordpress站点的用户来对其站点进行AMP优化的。
![67e3eae46469f46ae6a96f25d4134818.png](https://i-blog.csdnimg.cn/blog_migrate/3eedf40e82c76bcfa23260989e9e696d.jpeg)
使用之前去官网看下是否支持你目前使用的主题。
我使用Astra主题+Elementor页面编辑器,安装配置之后测试效果不明显,因为大部分页面的雅压缩后CSS都超过了给的预算。
![398f4714fa0abdef062d158a304715fe.png](https://i-blog.csdnimg.cn/blog_migrate/310271bddfebcc43b5a186c81f0d95bf.jpeg)
如果使用标准模式,则我的页面毫无布局可言。这可能和我使用的插件和页面编辑器有关,导致页面需要加载的文件非常多。
这也是一个弊端,如果你的页面较大,需要加载的文件过多,其实这个插件并不会起到任何作用。
我使用自带主题Twenty Fifteen配置AMP后,使用Google Pagespeed Insights测试结果如下:
![365f9b655f4eb75bd033d40b48ca040b.png](https://i-blog.csdnimg.cn/blog_migrate/9a00dfdc16cdfe4ad07491faedb28640.jpeg)
![e3c2d8f9e42e45517f8a1b1902700888.png](https://i-blog.csdnimg.cn/blog_migrate/0f8517b3dbef90ed66206ba8c492e59e.jpeg)
使用用AMP插件之后再进行测试结果:
![eaa74a041f5b5492faf105ee69d0d61d.png](https://i-blog.csdnimg.cn/blog_migrate/ae3465fd7ae2ed4c3946d9fbaa937a8c.jpeg)
![d07b17b0679726dc41cc8a09aedb0221.png](https://i-blog.csdnimg.cn/blog_migrate/f91e9e9a338e322f5d59635fddd440b3.jpeg)
可以看到PC端几乎没有变化,但移动端在安装实施AMP前后的分数还是有点差距的。
2、AMP主题
可以通过安装AMP By Automattic Settings插件,来自定义移动端AMP页面,工作量相对较大需要重新搭建移动端,且如果PC较复杂,移动端只能简化。
当然也可以购买AMP主题,这个个主要是针对还未建站的或者准备升级网站的用户比较适用,相当于是重新做一套网站。
![3227413271eae51735a6756da3d1ad4f.png](https://i-blog.csdnimg.cn/blog_migrate/ff4a30c31cd79ed564713f16fd2f1039.jpeg)
![c5c7b9a1a34fb942d8827c3b6f230451.png](https://i-blog.csdnimg.cn/blog_migrate/558811181c9c09c9004a8c0a7437e945.jpeg)
当前官网也就只有10套AMP主题,而且都是收费主题。
感兴趣的可以2个方案对比一下,个人更推荐AMP主题。老的东西毕竟是需要更新的。
以上希望对各位小伙伴有帮助。