WordPress & Ghost 实现 AMP 加速

前言

最近把博客的移动页面交给了 AMP,效果(PC端效果略瞎),就介绍一下肿么设置吧~

前景

AMP 因为是谷歌推出的方案,所以自然带着谷歌的特色,就是大陆体验一般般,所以百度也有借鉴其推出 MIP 不过因为国内的开发和 SEO 生态导致了其宣传发布会开了一场一场,但是普及率一直很低。

AMP 因为插件多适合不会 Web 性能优化 的朋友,在 MIP 普及之前 0 成本实现移动页面的性能优化。

对于做国际贸易、跨境电商的企业,宣传和新闻页面使用 AMP 的价值就非常大了,谷歌会提供搜索结果加成,客户也更乐意打开更快速的页面。

介绍

AMP 即 Accelerated Mobile Pages(移动页面加速),AMP 在 Speed Index 即 首屏展现时间平均值 测试中,模拟 3G 网络环境并模拟 Nexus 5 的条件下可以到达 15% ~ 85% 的性能提升(详情)。

AMP 主要由 AMP HTML、AMP Runtime 以及 AMP Components 三部分组成。通过一定的技术限制和谷歌的资源分配来实现移动环境下极快的访问体验。

更多技术性介绍请看:AMP,来自 Google 的移动页面优化方案

目前用手机访问谷歌搜索关键词,会有 AMP 专属的结果提示:

然后点击访问一下,哇塞,网络体验好的情况下真的是比秒开还秒开,贼快。所以在手机上使用谷歌搜索的时候,看到 AMP 标记的网站我更乐意去点,因为的确体验很好。

访问状况

https://cdn.ampproject.org/v0.js

针对大陆访问,谷歌已经将其放在位于北京的服务器了,所以不用担心打不开的问题。

https://www.google.com/amp/s/www.mf8.biz/amp

目前 AMP 的缓存结果是这样的,所以不会只呆梨非中国 IP 后访问 Google 查看 AMP无法访问的问题了。

WordPress 实现

WordPress 官方有开发 AMP 插件 —— AMP 来帮助提升移动浏览体验,不过定制性略低而且不适应多语言,所以我们还需要增强型插件 —— Accelerated Mobile Pages

两个插件都安装好后,就可以在左侧边栏看到 AMP 的设置了,不过看如下图片:

很多细节都是英文的,影响体验,所以我们要在设置中加速一波。

进入 AMP —— Getting Started —— Translation Panel 中即可翻译这些细节了。

当然我也有准备好我的翻译结果,进入 AMP —— Import / Export 就可以导入设置了。

设置代码在此:

Ghost 实现

自 Ghost 0.11.4 版本开始,Ghost 就集成了 AMP 功能了。

开启方法,进入 Settings - General - AMP support ,开启后,在网址后加入 /amp/ 就可以访问 AMP 了。

验证

如何验证是否开启 AMP 了呢?

进入 https://search.google.com/search-console/amp 输入 AMP 页面(不可是网站默认页面),就可以验证了~

当页面中如下标签后,谷歌抓取页面后就会自动在结果也推荐 AMP 结果,WordPress 的 AMP 插件开启后是自动添加的。

<link rel="amphtml" href="https://www.mf8.biz/dmoz-clouse/amp/" />

13 条评论

发表评论