168网络营销学院-从SEO到全网营销的在线课程

百度官方MIP实操指南

MIP的定义

MIP是Mobile Instant Pages的简称,也就是移动网页加速器,是一套应用于移动网页的开放性技术标准,使用 MIP无需等待加载,页面内容将以更友好的方式瞬时到达用户。其核心价值是提升了移动端渲染能力。


MIP诞生的背景
工信部2016年最新发布的数据,移动互联网用户1月净增1942.1万户,同比增长11.8%,总数达9.8亿户。随着移动设备的性能不断提升、网络速度大幅提高,用户群体对移动网页等待的耐心在逐渐降低,更多的时候要求移动网页可以瞬间打开。

以往研究数据表明网站打开速度对用户浏览、电商成单量、搜索引擎的搜索量等都有很大影响!

如: Facebook每慢500ms用户浏览下降3%,Amazon每增加100ms成单量下降1%,Google每增500ms搜索量下降25%等等; 

这种环境下,我们要考虑的问题,除了网站是否需要移动客户端外,还有如何更大程度的提高移动网站的用户体验。那么你的移动网页用户体验合格吗?打开的速度够快吗?内容够简洁突出吗?经常出现各种安全问题吗?

万众瞩目下,百度推出了针对提高移动网页打开速度和用户体验的新标准规范,以及解决方案。



MIP提升性能的奥秘
通俗来讲,移动网站按照百度提供的网页标准规则进行修改,修改合格后,百度将你的网站放在百度服务器上面。你的移动网站在修改之后,不仅网页更加简洁规范,而且接入百度服务器之后网页的打开速度将非常之快,并且可以提升安全性能。

MIP之所以可以达到这种效果主要归功于其组成的三部分:

MIP HTML(页面标准主要包含Css、HTML代码、图片)——为了让移动网页更加简洁规范

MIP JS  (引用官方标准化JS文件)——提供了网页基础的JS需要

MIP Cache(接入官方缓存服务器)——百度缓存服务器,加速环节最重要的部分!




MIP和CDN有什么区别
从MIP性能表现上看,主要是体现在页面加载快,用户体验好等特点,所以很多人产生了疑问,MIP是不是等同于CDN,已经使用CDN还要不要改造成MIP? 接入MIP还要改,那么麻烦,那我直接用CDN多好?

事实上他们还是有比较明显的区别,主要在五个方面:
1、MIP要求站点必须按照 MIP标准进行修改或者重新制作,CDN只会站点提供节点加速服务,无需修改。

2、MIP服务器基本上是在用百度移动端的快照缓存服务器。而CDN提供的节点是无法和百度服务器相媲美的。

3、MIP地址使用是百度缓存服务器域名,可以提升一定安全性,而CDN还是自己的域名;

4、MIP只针对移动页面进行加速,不影响PC端,而CDN则是可以支持不同用户端;

5、MIP一项长久免费的开源计划,而大部分CDN是需要付费使用的。

MIP HTML是为了更加规范移动网页而推出的网页标准,而不是单纯为了接入MIPCache服务器提出的标准。
MIPCache部分确实相当于CDN的功能,但是这个MIPCache百度服务器数量是国内任何一家CDN节点数量上无法去相比的,而且还是免费提供给MIP站点的站长。
百度蜘蛛对于移动站点的抓取,接入MIP Cache的MIP站点更加有优势,因为网页已经早已缓存到百度服务器。而这一点,更是CDN无法相比的。


MIP改造难不难?
通俗讲,MIP的改造,就是一些基础的HTML标签替换成MIP HTML标签,接入百度缓存服务器的过程。

我看到有人在改MIP站点的时候,抱怨,好难,这个功能没有,那个组件没有。其实,MIP的旨意不是让你继续沿用过去网页的标准,而是为了提高网页的打开速度,通过MIP的新标准,去简化规范网页。

所以说,根据MIP HTML标准修改原网站,或者根据MIP HTML新建网站模版,是非常简单的。由于目前是MIP前期,建议大家采取新建MIP站点,并保留原移动站点的模式。

MIP能做什么
MIP能帮助站长和网站开发者快速搭建移动端页面。
MIP怎么加速?MIP从前端渲染和页面网络传输两方面进行优化,杜绝页面渲染中的阻塞问题,提升页面展现速度。
移动站应该用MIP吗?这里有五个原因,告诉你MIP的好处:

加速移动端页面,一切的基础
为减少DNS解析,MIP-Cache将静态文件以相对路径储存在百度CDN中;为减少网络传输耗时,MIP-JS 控制静态资源的按需加载,MIP-Cache系统优先从CDN读取文件;为减少浏览器渲染重绘耗时,MIP-HTML 对<img>,<video>等造成浏览器重绘的标签进行了封装控制。

根据2016年8月数据,页面MIP化之后,页面展现时间减少了30%-80%。如果您的页面只有简单交互,却引用了庞杂的前端代码库,那么尝试MIP之后速度能够得到显著提升。

速度对于页面意味着什么呢?如果一个页面需要3秒来打开,用户就需要盯着白屏等待三秒,这很容易引起用户的不耐和放弃。也就是说,一个页面能在眨眼之间打开,意味着更少的用户放弃。所以说,对于页面来讲,速度是一切的基础。


提升到达率和用户体验,更少的流失率
正如上文提到,使用MIP规范之后页面的打开速度会大幅提高,减少用户的等待时间,减少用户放弃。

试想一下,当全站的每个页面都能在1秒内打开,用户每次点击都会立马得到相应,那么就会提高用户体验和满意度。如果页面内容有趣,用户就会在各个页面间冲浪(Surf)。在日均UV(Unique Visitor, 独立访客)不变的情况下,页面的PV(Page View)会有所增加。此时,用户消费了更多网页提供服务时,页面广告也会得到更多的曝光。


百度搜索提权,更大的用户量
众所周知,百度的自然结果是根据用户点击和页面质量排名的。在2015年年底,我们推出了《百度搜索Mobile Friendly标准》(下文简称《MF标准》),在站长平台的说明中,《MF标准》也会作为页面排序的参考因素。

在《MF标准》中,有页面加载速度体验一项。使用MIP规范,能够加快网页加载速度,使页面更符合标准。

 
开发简单,迁移成本低
迁移已有页面到MIP并不是一件困难的事情。MIP-HTML组件和JS运行环境与前端代码语法相同,官网文档中有详细的步骤,我们也会陆续推出文字和视频教程。我们还为开发者提供了实时校验工具,帮助MIP用户开发出完全符合规范的页面。
 

已有组件兼容性好,也可个性化定制新组件
MIP-HTML 拥有不断完善的的组件库可以使用。图片预览,视频播放,分享组件均已上线。直接使用已有组件,能够保证代码质量和各个终端浏览器的兼容性。利用最小最快的方式达到交互效果。
除此之外,MIP是一个开源的项目,提供了《扩展组件开发规范》,支持MIP用户自己开发个性化组件,交由MIP开发小组审核后即可上线使用。



什么网站适合加入MIP
结合目前MIP官网技术文档和已有案例反馈,MIP已经可以完美支持资讯、图片、企业、小说、论坛等信息流类型的网站。复杂的页面暂不建议MIP改造,目前对资讯、图文类支持已较好,若功能较为复杂的建议自定义组件或等待MIP项目小组开发。



抛开网站类型不谈,存在以下问题的网站更要加入MIP:

1、网站加载速度慢,打开速度时间长

影响网站加载速度的因素除了外在因素(服务器带宽、庞大的数据库)外,绝大多数是网站本身的问题,例如:冗余代码、用了大量js调用,网站图片太大、flash文件等。MIP的规则就是针对MIP-HTML规范、MIP-JS运行环境以及MIP-Cache页面缓存系统进行优化,实现移动网页加速。

2、用户体验差,跳出率较高的网站

网站弹出广告过多、内容质量差、加载速度慢都是影响用户体验差的因素,为了避免这些现象,MIP要求将所有的资源(广告、图片、音频和视频)标明尺寸。当资源真正加载时,所有资源大小可以被立即推断出并迅速用于计算页面布局,加载中的资源将无缝呈现,不必因为页面频繁更新布局而影响到用户的阅读体验。而且MIP提供与MIP runtime兼容的封装好的组件来实现,严格控制外部资源的加载,来确保其高效性,开发者的任何自定义脚本,都需要用MIP的tag反馈给MIP,例如mip-ad、mip-iframe等,这些方式不会阻塞页面的layout和渲染。



MIP改造难不难?
通俗讲,MIP的改造,就是一些基础的HTML标签替换成MIP HTML标签,接入百度缓存服务器的过程。

有人在改MIP站点的时候,抱怨,好难,这个功能没有,那个组件没有。其实,MIP的旨意不是让你继续沿用过去网页的标准,而是为了提高网页的打开速度,通过MIP的新标准,去简化规范网页。

所以说,根据MIP HTML标准修改原网站,或者根据MIP HTML新建网站模版,是非常简单的。由于目前是MIP前期,建议大家采取新建MIP站点,并保留原移动站点的模式。


加入MIP的接入流程
经过前面的内容介绍,相信你已经迫不及待想加入MIP生态了吧。如果你的网站在上述MIP支持的改造范围中,那么只需要4个步骤即可完成MIP网站改造:



(1) 改造评估:

评估自身网站情况是否适合改造MIP,如果支持则要选择一套改造方案;目前主要有两种方式,一是在原页面上进行改造,另外一种是新建一套MIP模板。

原有页面修改方案:主要适用于拥有独立移动站的网站,优点是改造内容少,技术成本低,方便维护等优点 ;

新建MIP页面方案:适用于目前所有网站的情况,具有独立好操作,改造干扰少,未知风险小等特点,美中不足的是因为是新的url,需要蜘蛛从新抓取,接入速度略慢;

(2) 页面改造:

确定改造方案后,,按照MIP官网内容要求进行代码改造。改造需具备一定的html知识,改造MIP教程请按照教程来,特别注意大小写,建议全局小写。如果初次接触MIP,可以先学习下《新手指南》,更详细请参考《如何用MIP的快速搭建移动页面》。



(3) 工具校验:

页面改造完成后,可以通过官方工具进行校验,工具会给出是否合格的提示;点击进入检验地址:https://www.mipengine.org/validator/preview
注意:检测合格后,一定要看预览效果,可能会有样式问题!



(4)数据提交:

校验合格后,通过站长平台的MIP工具,以主动推送的方式进行数据提交;

MIP提交地址:http://zhanzhang.baidu.com/mip/index



(5)线上生效:
当MIP数据库收到站点提供的数据,会对数据进行抓取、收录、校验等一系列的步骤,最后在线上生效,并且在快照上回有一个


如何快速完成MIP改造?网站可以选择直接将原先的移动站点直接改成MIP站,也可以单独再做一套MIP站点与移动站并存。

从一个html页面的上下顺序一步步改造,只要按照本文章内的一步步来,即可完成MIP改造。


1. Doctype改造

1.1 打开你的模板或代码文件看第一行,将<! DOCTYPE ***>改为<!DOCTYPE html>


2. <Html>标签改造

2.1 完成第一步后,继续修改下一行代码,将: <html xmlns="http://www.w3.org/1999/xhtml">或:<html lang="en"> 改成:<html mip>注意全部小写


3. Head部分改造

3.1 <head>标签必须是完全小写。

3.2 页面的编码必须是utf-8,修改声明为:<meta charset="utf-8">

3.3 页面中加入<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">

3.4 页面中加入MIP专用样式文件< link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v1.0.1.css" >

3.5 这里需要告诉搜索引擎改页面对应的标准html页面地址,如果存在则标识<link rel="canonical" href="H5/PC原页面"> 其中href值修改成为与当前mip页面相对应的标准页面url地址。如果只有mip页面没有相对应的标准页面则标识为:<link rel="standardhtml" href="MIP自身"> 其中的href值为当前页面地址。


4. Body内改造

4.1 首先<body>标签必须是小写的;

4.2 加入MIP专用JS文件:<script src="https://mipcache.bdstatic.com/static/mipmain-v1.0.2.js"></script>

4.3 替换<img>, <style>, <frame>, <form>,< input>, <textarea>, <select>, <option>标签为对应MIP组件标签,具体见官网文档。

4.4 引用MIP-JS 运行环境 <script src= "https://mipcache.bdstatic.com/static/mipmain-v1.1.0.js"></script>放在页面尾部。


5. 使用MIP Cache注意事项

5.1 一般Cache图片、样式、脚本,做完上述4步后,修改资源地址为相对地址或合法绝对地址(以校验工具为准);

5.2 Cache的内容需要更新需要通过MIP数据提交中的更新数据接口,把更新的url链接推送过去,等待百度更新。


6. 组件的使用

6.1 除了上述这些需求外,一部分站点可能需要用到组件,官网文档包含了目前支持的所有组件,详见《组件概述》。

6.2目前官网开发了很多通用性组件,并提供了使用示例,以百度统计组件为例:在百度统计中申请js统计代码,将其中的token值截取出来,如下图所示字符串:


将字符串以<mip-stats-baidu token="02890d4a309827eb62bc3335b2b28f7f"></mip-stats-baidu>的形式植入到页面中,并在页面中嵌入 <script src="https://mipcache.bdstatic.com/static/v1.1/mip-stats-baidu.js"></script>

以上步骤就可以将百度统计组件植入到MIP页面中了!

6.3特定组件的使用:对于官网没有的组件,网站可以自主开发组件接入,具体方法可以参考《扩展组件开发规范》;



改造前MIP常见问题集锦

1、MIP 化后对其他搜索引擎抓取收录以及 SEO 的影响如何?

答:在原页面 MIP 化,不会影响其它搜索引擎的抓取收录,也不会影响页面权重。新增 MIP 页可通过 robots.txt 文件禁用其它搜索引擎的抓取,从而保证原页面的权重。

2、MIP 可以加什么样子的广告?

答:MIP 既可以加入百度联盟广告,也可以加入第三方广告,加入百度联盟广告的方式详见《mip-ad 广告》

3、MIP Cache 缓存更新时间是多长时间?

答:目前是50分钟左右,后期将会优化到更短时间。

4、百度对站点 MIP 化方案的建议是怎样的?

答:目前 MIP 化有两种方案:一种是在原有页面上进行修改,另一种是在保持原有页面的基础上再新建一套页面;两种方案都可以良好支持。

5、如果采取新建一套 MIP 页面的方式,假设新建 MIP 页面出现问题,譬如改造错误、失效或者其他不可预知问题,百度的处理机制是怎样的?

答:MIP 是有回退机制的,MIP 访问出问题后,会直接回到原来的 h5 页面;不会影响权重,MIP 会更被认可和优先。

6、是否必须是 https 才能 MIP 化,如果不是 https 会有什么影响?如何快速 https 化?

答:mip 改造本身是不需要支持 https 的。但如果有异步加载、实时调取等数据交互类的功能,是要求 https 的。实现方式上可以通过自身支持或者走 MIP Cache 代理两种方式实现。快速进行 https 化可以通过百度云加速的 https 方案进行快速部署 https 环境.

7、MIP 页面中可以展现哪些元素?对于弹窗广告有何限制?

答:MIP 页面中可以展示所有原页面的元素,在前端代码中对于一些标签做替换即可。我们会提供组件支持fix布局,可用于页面固定广告的显示。

8、MIP 化的收益是什么?具体数据?

答:从目前收集到的数据来看,网站 MIP 化上线后,页面速度提升 30-80%,页面到达率提升 5-40%

9、使用伪静态 url 的网站如何使用 MIP?

答:MIP 页面可能会被 MIP-Cache 缓存,所以用户看到的不一定是动态的页面。当需要更新页面内容时,可通过 MIP 组件形式封装js请求,以及后续更新 DOM 的 js 操作。

10、针对拥有 pc、wap、mip 三套页面的网站,如何进行移动适配工具和 mip 工具提交?

答:MIP页面可单独通过站长平台的 MIP 入口提交,不会影响 PC 和 WAP。

11、代码适配站点如何使用 MIP?

答:区别讨论。如果后端根据 UA 判断是否为移动端页面,并返回页面,则将返回的页面 MIP 化即可。如果是前端判断浏览器宽度或 UA,再请求后端返回相应页面,则需要改变这套流程,使用后端判断,或直接改为响应式页面。

12、MIP 在原网站搭建还是重新在新子域做,还是新目录做?

答:都可以,MIP 不做限制。MIP 和原页面的对应关系写在头部 link 标签中,具体见官网说明。

13、gbk编码的网站如何使用 MIP?

答:更改成 utf-8 编码后使用 MIP。gbk 编码并不是国际通用标准,在一些手机上会有会显示乱码。

14、网站如何确认改造的 MIP 页面已经在线上生效?

答:MIP 页面都会使用百度搜索结果页异步打开,只需要在百度搜索中搜索链接,并且快照上有闪电标。

15、这个 MIP 移动网页加速器做了之后是只针对移动百度的展示,还是说也对我们其它的正常用户一样显示?

答:MIP 页面是可以独立运行的,可以在浏览器中通过 url 直接访问,不依赖百度结果页。由于 MIP 页速度较快,体验更优,会在百度移动结果页有更高的权重。

16、MIP 与 CDN 的区别是什么?

(1)已使用了 CDN 之后,再进行 MIP 改造,两套 CDN 会不会产生冲突和影响?

答:不会产生冲突,也不会存在双重加速的问题。 搜索请求会先发到 MIP-Cache(MIP-CDN),如果页面不存在或过期,会进一步访问原 CDN。

(2)已经使用 CDN 再用 MIP 的必要性是什么?

答:MIP的性能提升方案,很大一部分是技术实现的收益,非 cdn 收益。MIP 原理不能简单的理解为Mobile Friendly 框架+ CDN,技术核心是通过页面渲染技术等提升性能,详见博客。

17、目前 MIP 组件之外的一些 javascript 插件如何支持?譬如广告、统计、推荐等等?

答:(1)MIP为了确保安全性和性能表现,不允许用户自定义JavaScript,需要用MIP 组件的形式引进来;MIP组件是开源的,允许开发者自定义功能组件。

(2)目前MIP组件已经支持多种功能组件:如广告支持站长自定义的横幅广告、视频广告、H5广告,同时也支持一些第三方广告系统,统计可以支持百度统计,更多具体的组件支持的可以参考官网的组件说明;后续MIP也将持续提供多样的组件,以适应不同的需求.

18、搜索结果打开是百度的域名,用户分享的是否也是是百度链接?使用百度域名是否不利于网站的品牌传播同时也会影响流量统计,该如何解决?

答:如果用户通过分享组件分享,则分享的标题,图片和内容都是原页面内容,具体分享内容可以在使用组件时定义。这种做法不会影响品牌传播,也不会影响流量统计。如果用户直接从浏览器复制链接分享,那么被分享的是当前页面url,没有品牌和标题露出。统计代码在页面加载完成后都会生效,不会受到分享影响。

19、如果新建一套 MIP 页面,在搜索结果中 MIP 页面和原来的页面关系是怎样的?

答:在创建 MIP 页时加入canonical标签,在原页面加入miphtml标签,将两个页面联系起来。在搜索结果中会用 MIP 页面替换原生页面,用户打开后展现的是 MIP 页面。

20、我决定新建 MIP 页了,要如何开始呢?

答:我们在官网准备了《新手入门文档》,在github提供了mip脚手架工具。


改造中MIP常见问题

1. MIP 页面的 <a>链接校验报错,MIP 是强制 target=“_blank” 吗?

如果想直接跳转MIP页,可以用mip-link 组件;MIP 页 <a> 强制跳出是为了解决 MIP 体验的问题,12月底会升级校验,去掉强制target=“_blank”。

2. 静态文件引用,一定要用绝对路径么?

目前是,一定要使用“带有协议头和域名”的绝对路径,比如”https: //m.baidu.com/a.jpg”。未来有计划取消这条规则,请关注官网进展。

3. <a href=“m.a.com”>test</a>标签<a>中的属性’href’的属性值’m.a.com’无效?标签’a’的强制性属性’target’缺失?

标签href属性可以为“//m.a.com”, “http: //m.a.com”, “https: //m.a.com”三种。标签强制target=“_blank”, 因为在iframe嵌套页面跳转有问题。可以加上target=“blank”,如果直接跳转到另一个MIP页,可以直接使用 mip-link 组件解决。


广告相关

1. MIP页的网盟广告为什么在uc和qq下不显示?

如果您使用了网盟广告type="ad-baidu", 可以尝试使用网盟扩展广告type="ad-baidu-wm-ext"。

2. 从百度结果页打开MIP页,为什么反屏蔽广告不展示?

反屏蔽广告必须是 https 的,如果原页面正常,在预览环境下却不展示很可能是站点域名未注册https;在网盟扩展广告文档的注意事项中有说明,或者看网络控制台有没有js获取不到的报错。

3. 从百度结果页打开MIP页,为什么悬浮广告不展示?

不只悬浮广告,MIP 页面中所有的悬浮元素(布局为 position: fixed 的元素)联盟广告自带的贴底广告都需要使用 mip-fixed 悬浮组件进行支持,使用细节可参考 mip-fixed 悬浮组件。



组件相关

1. 为什么mip和组件和AMP不完全一样?

市场环境不同。国内有一些浏览器兼容性不好,MIP组件需要额外增加兼容代码。

2. 百度统计组件为什么不生效?

1) mip-stats-baidu.js 依赖 mip.js,所以要把 mip.js 写到前面;
2) 标签名和所使用的脚本应该保持一致;
3) 确认标签使用的是<mip-stats-baidu>而不是<mip-stats-bidu> 。
4) 确认脚本引用的是https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js。

<!--正确示例--><mip-stats-baidu token="4e397f684261b9e4ff9d8ad4714f5b2b"></mip-stats-baidu><script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script><script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>

3. 悬浮组件如何关闭?

mip-fixed 悬浮组件支持关闭功能,详见文档-关闭悬浮元素的方法。

4. 自己开发扩展组件,使用了<script type=”application/json”>标签,在标签内的JSON属性值配置html,MIP 页面会乱码?

示例:

 <script type="application/json">    {        "key": "<div>value</div>"    }</script>
解释:MIP 不会对上述情况进行特殊处理,需要扩展组件的开发者在标签<script>中使用encodeURIComponent对html进行编码,然后在组件中进行解码

5. 自定义组件上线后访问404?

首先,组件pr merge后并能马上使用,需要操作上线,上线后会在 github 的 changelog 中更新;
然后,确认所访问的组件线上地址是正确的:

https://mipcache.bdstatic.com/static/v1/{组件名}/{组件名}.js


其他问题

1. MIP 页面如何使用cookie?

MIP 页面暂时不支持cookie,所有的cookie会被清除,后期MIP项目组会提供cookie的统一解决方案。

2. 我的网站使用了302跳转, mip-cache会抓取302跳转后的页面么?

会,但mip-cache只会根踪一次302跳转,抓取重定向后的页面。如果网站使用了多次302跳转,mip-cache会抓取失败,导致触发cache降级逻辑,在用户访问时直接打开mip页,不使用异步极速框架,有损用户体验。如有多次302的需求,请通过邮件与MIP项目组联系。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

精彩阅读

排行榜

用SEO技术用心服务创业者
周一至周五 9:00-18:00
意见反馈:wb@seo168.com

扫一扫关注我们

Powered by 168网络营销学院 X3.3© 2001-2018 www.seo168.com.