AMP (Accelerated Mobile Pages) 是 Google 的一个开源的项目,通过使用 AMP HTML,可以极其显著的提升网页加载速度。最近我在移动设备上使用 Google 的时候,发现很多网站都开始使用了 AMP。在从 Google 上进入一个 AMP 页面时速度更是异常的快,快到超乎想象——延迟几乎为零。本站也配置了 AMP,本文对 AMP 的一些特性进行一些分析,并介绍如何在 WordPress 上支持 AMP,并开发插件对其自定义。MIP是百度自己的AMP版本,MIP项目的技术方面与AMP也基本相同,AMP基于三个基本组件:MIP特定的HTML标记,管理资源加载的MIP JS库和MIP缓存,基于代理的CDN,提供有效的MIP页面。虽然百度首先需要创建MIP并没有明确答案,曾经封锁的AMP项目网站后来可以在中国大陆成功加载,由百度启用CDN,接受咱们国内的监管。这些实现,都是随着谷歌与国内相关机构双方长时间不懈的沟通与努力,甚至已经等待数月才能看到这个项目进一步的更新。最终,我们发现了百度网站管理员工具界面终于迎来了变化。MIP部分成功演变为“MIP&AMP”,将这两个术语并排配对。但很明显,咱们国内对谷歌托管资源的严格审查是主要原因,mip也是amp的一种替代,当然今天主要写AMP,在此感谢作者:Guo Zeyu(之前写的请移步:http://www.rrdaj.com/hzseo/3237.html)!

 

 

【移动端SEO】百度 AMP 手机端优化的相关配置介绍!

AMP HTML

AMP HTML 也是一种 HTML,一个符合标准的 AMP 页面只能使用有限的标签,而且很多标签都并非 HTML 标准,如 <amp-img> 、<amp-video> 等。

 

一个 Hello, AMPs 的例子:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

 

 

此代码可以在主流浏览器中直接运行,和普通的 HTML 相比,它有以下区别:

  • AMP HTML 在 <html> 中增加了 amp 属性,来标记这是个 AMP 页面
  • <head> 中必须引用一个 JS:<script async src="https://cdn.ampproject.org/v0.js"></script>
  • 需要有带 amp-boilerplate 属性的 style,其中一个在 <noscript> 中。
  • <head> 中需要有一个 <script type="application/ld+json"> 去标记文档的 metadata。

 

 

在 AMP HTML 中插入一个图片的例子:

<amp-img src="450px.jpg" srcset="450px.jpg 450w, 1200px.jpg 1200w"></amp-img>

 

 

大家会发现其实这和普通的 img 标签的语法没有什么区别,只是换了一个名字,实际上通过这样引入图片,AMP Runtime(就是在头部所引用的 v0.js) 就会自动地解析这个 AMP Components,并会根据设备的分辨率去选择一张图片加载(原理只不过是通过 js 再创建一个 img 标签去让浏览器识别),甚至都不需要浏览器去支持 srcset 属性;而且还能够自动的延迟加载图片。插入视频和音频同样也需要使用 AMP 特定的方法去做。

 

如果浏览器禁用了 JS,那么网页上的所有图片和视频等使用非标准 HTML 标签的内容都无法显示。

 

在 AMP 中引入更多的交互

AMP 中禁止使用任何自己的 JS,这样做只是为了保证 JS 的加载速度——因为移动设备的性能不高,尽量减少 JS 或避免使用低质量 JS 的使用能够提高用户体验。

 

所以,如果想使用更多的交互,那么必须通过 AMP HTML Extensions 的功能来实现,所以只能使用有限的交互功能。或者可以通过纯 CSS 来实现各种复杂的功能。

 

验证 AMP

这个网站上可以在线对 AMP 页面进行验证

 

为何那么快?

你其实会发现,网页中可能会阻碍加载的内容只有一个外部的 JS(也就是 AMP Runtime),而且这个 JS 还被标记上了异步加载。所有的 CSS 都是 Inline 的。

在国内的应用

AMP 所必须要引用的 AMP Runtime 这个核心 JS 必须要使用 Google 提供的那个特定的域名,现在 Google 已经针对中国解析到了中国服务器,中国访问还挺快!

 

现在,我发往微信公众号上的文章就使用了 AMP 技术,直接推送 AMP 版本的网页,放弃使用微信素材库,实际测试加载速度比微信素材库的文章还要快。并且由于 AMP 页面适合缓存,我也针对中国进行了缓存的优化。

 

如何在自己的网站上实现 AMP

为了支持 AMP,需要让每个文章拥有两个页面:一个正常版本的页面,一个符合 AMP 标准的 AMP 页面。当然,也可以通过直接修改页面本身让其符合 AMP 规范,只不过这种方法做的改动会比较大。

最简单实现 AMP 的方式就是通过插件的方式去实现,尤其是如果你正在使用 WordPress 的话:

 

在 WordPress 上实现

Automattic(其实就是 WordPress 官方)制作了一个 AMP 插件,安装并激活这个插件之后,无需任何配置——这是我喜欢这个插件的原因之一,就能够激活 AMP 功能了。这个插件会自动生成每个文章的对应页面,并会相应的在原始页面添加 AMP 的 metadata。安装后表面上没有任何变化,但是当在一个文章页面后添加上 /amp/ 或者 ?amp=1 后,就能看到文章对应的 AMP 页面了。

 

补充:

Google 的 AMP 功能非常类似于 Facebook 的 Instant Article,只不过后者甚至都不需要自己去托管服务器。AMP 中大量的 CSS 仍能自己控制,这相比国内绝大多数搜索引擎的<a href="https://guozeyu.com/2015/08/block-haosou/" rel="nofollow">转码页面</a>的效果还是要好不少。网页中仍能自己投放广告内容,这也是 AMP 能被接受的那么快的原因。它在各种不开放的限制中也保留了众多开放的东西。

启用 AMP 不仅能在 Google 搜索结果页面中载入获益,AMP 页面本身其实还可以作为专门给移动设备适配的页面——如果网站本身没有移动版页面,那么移动版页面可以直接拿 AMP 做,然后自动跳转。

当然,就像之前说的,网页可以通过直接修改页面本身让其符合 AMP 规范,或者在制作之初就按照 AMP 的规范作,<a href="https://www.ampproject.org/" rel="nofollow">AMP 官网</a>就是一个典型的例子。然而这种做法未免过于激进,兼容性也不是很好(比如其对于 JS 的强烈依赖),使用前应该做好充分考虑。

 

关于 MIP 的补充

百度从 AMP 借鉴了很多技术并做了 MIP,其与 AMP 十分类似。

经过简单的实验,我发现 AMP 可以很轻松的变为 MIP,只需要将 AMP 页面做以下内容的替换或删除即可:

 

  • <html amp 替换为 <html mip
  • <script src="https://cdn.ampproject.org/v0.js" async></script> 替换为 <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
  • amp-pixel 替换为 mip-pix
  • amp- 替换为 mip-
  • </body> 替换为 <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script></body>
  • 删除 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

 

 

修改完的 AMP 页面可以直接通过 MIP 测试,这相当于不需要二次开发就能够同时兼容 AMP 和 MIP,多方便!

启用了 MIP 的网站在百度搜索结果上也会预加载,于是就能实现秒开的效果。

 

MIP 的一些坑

CSS 的不同

MIP 自带的 CSS 竟然声明了这个样式:

 

* {
    margin: 0;
    padding: 0
}

 

由于它的存在,会导致很多地方的排版出现问题,并会覆盖掉浏览器的默认样式(例如 h1、h2 这些标签),所以你可能还要为百度单独添加一些样式。

video 标签的 Bug

经测试,<mip-video> 标签不能够支持 <source> 标签,使用了这种标签的视频无法加载。

    版权声明:

     本网站的所有文字、图片资料,未标注转字的均由作者亲自整理创作,如需复制、转载、转贴等方式发布/发表,请以锚链接的方式显示原文出处,请尊重我的劳动成果,侵权必究。本网站转载的文章如有侵权的地方请及时联系本人,核对后会第一时间删除!

阿沐
1625139774@qq.com

发表评论