WordPress & Ghost 实现 AMP 加速
本文最后更新于 2605 天前,其中的信息可能已经有所发展或是发生改变。

前言

最近把博客的移动页面交给了 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 功能了。

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

验证

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

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

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

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

评论

  1. 7年前
    2017-3-07 19:07:01

    会玩,哈哈。。。

    • 妙正灰
      博主
      大布丁
      7年前
      2017-3-07 22:12:07

      因为的流量大部分还是来自谷歌的,我更乐意讨好谷歌

      • 妙正灰
        7年前
        2017-4-04 21:39:03

        对于我们这些,流量大部分来自百度的,想讨好百度,可百度官方迟迟不推出MIP官方wordpress插件,第三方插件也没有选择的余地。目前就只能用自适应主题适配移动端。

        • 妙正灰
          博主
          站长资源网
          7年前
          2017-4-06 12:06:29

          百度是有计划的,但是我觉得期望不要太大

  2. 禅猫
    7年前
    2017-3-11 1:55:02

    你编译的中文呢?没连接,另从你这里的amp页面,点评论要两次l才转过来

    • 妙正灰
      博主
      禅猫
      7年前
      2017-3-11 13:13:30

      AMP下不现实,用 PC 看

  3. 7年前
    2017-3-17 2:25:04

    百度好像也弄了个类似的东西。唉。

    • 妙正灰
      博主
      Vans爱好者
      7年前
      2017-3-17 13:42:04

      有写,不过碍于百度生态,很堪忧啊

      • 妙正灰
        7年前
        2017-3-17 13:44:26

        对,感觉整体抄袭Google,但是感觉吧,对于我们这种网站来说,用Google又怕不稳定。毕竟大天朝。不像个人博客。

    • 妙正灰
      博主
      Vans爱好者
      7年前
      2017-3-17 13:43:09

      话说,我最近好想买vans,但是苦于看不好款式,而且又怕磨脚跟

      • 妙正灰
        7年前
        2017-3-17 13:44:44

        可以微信找我啊,你有我微信的。

  4. John
    7年前
    2017-9-06 10:30:50

    博主,看不到AMP代码了。能私发一波吗?谢谢!

    • 妙正灰
      博主
      John
      7年前
      2017-9-06 18:24:57

      wp官网直接搜索AMP就有插件了

本文评论已关闭
上一篇
下一篇