了解MIP（Mobile Instant Pages）

 
什么是mip？
mip是百度在2016年提出的移动网页加速器项目。可以简单理解为是一个规范。
 
mip能做什么？
mip能帮助站长和网站开发者快速搭建移动端页面。
 
mip怎么实现加速的？
mip不只是CDN加速，mip从前端渲染和页面网络传输两方面进行优化，杜绝页面渲染中的阻塞问题，提升页面展现速度。
 
页面渲染耗时主要分为三类：DNS解析耗时、网络传输耗时、浏览器渲染重绘耗时。mip加速的基本原理就是减少各个步骤的耗时：
  • 为减少DNS解析，MIP-Cache将静态文件以相对路径存储在百度CDN中；
  • 为减少网络传输耗时，MIP-JS控制静态资源的按需加载，MIP-Cache系统优先从CDN读取文件；
    • MIP-JS是MIP的运行环境，包括基本类引入（AMD），内置组件加载（mip-img），外置组件管理（组件css插入）以及组件布局管理（解决布局兼容性问题）
    • MIP-JS优点：
      • 使用精简的基础类，尽量减少网络传输时间
      • 内置优秀的组件，在不阻塞浏览器渲染的前提下提供最好的交互体验
      • 提供组件布局管理，预先为组件设定宽高，避免组件加载后的浏览器重布局
  • 为减少浏览器渲染重绘耗时，MIP-HTML对<img>、<video>等造成浏览器重绘的标签进行了封装控制。
    • img标签替换成mip-img，利用懒加载和按需加载提高页面的渲染速度
    • 自定义交互组件，如轮播、表单、分享等，依赖自身的脚本和MIP-JS就能运行，无需引入第三方库。减少页面发送的网络请求和传输时间，加快了页面的传输和渲染。
 
MIP和CDN区别？
  • MIP要求站点必须按照MIP标准进行修改或者重新制作，CDN只会站点提供节点加速服务，无需修改。
  • MIP服务器基本上是在用百度移动端的快照缓存服务器。而CDN提供的节点是无法和百度服务器想媲美的。
  • MIP地址使用是百度缓存服务器域名，可以提升一定安全性，而CDN还是自己的域名。
  • MIP只针对移动页面进行加速，不影响PC端，而CDN则可以支持不同用户端。
  • MIP是一项长久免费的开源计划，而大部分CDN是需要付费使用的。
 
补充：
CDN（Content Delivery Network）加速原理：简单说就是在不同地点建立内容缓存节点，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容。
 
MIP-Cache可以理解为一套CDN缓存系统。MIP-Cache给通过MIP规范和MIP校验的MIP页面提供静态文件（图片、外链css等）的缓存服务，在缓存静态文件的同时，HTML页面本身会被改写，引用图片的地址会被改成MIP-Cache中的图片地址。这样就可以避免从不同域名下读取静态文件，使用同源策略减少DNS解析时间，能够加速加载速度。
 
MIP-Cache更新和校验策略：
MIP-Cache会定期重新抓取MIP页并进行校验，满足页面更新需求。
在MIP-Cache中：
  • 页面的缓存时间是最短52分钟~最长5天（具体时间由该页面用户点击量和站点本身稳定性决定）
  • 图片缓存时间为10天
  • MIP-JS组件文件的缓存时间为10分钟
  • MIP-Cache快速更新机制，MIP-Cache开放了单独清理的接口，具体参考 MIP-cache 清理，生效时间大概5min
     
注意： MIP-Cache目前限制100s只可以更新10条，如果MIP站点是https协议，那么$api应该是$api = 'http://mipcache.bdstatic.com/update-ping/c/s/';
 
移动站应该尝试百度mip的五个原因
  1. 加速移动端页面
  2. 提升到达率和用户体验，更少的流失率
  3. 百度搜索提权，更大的用户量
    • 百度的自然结果是根据用户点击和页面质量排名的。《百度搜索Mobile Friendly标准》的页面可读性包含了：页面加载速度体验、页面结构、页面浏览体验。
  4. 开发简单，迁移成本低
  5. 已有组件兼容性好，也可个性化定制新组件
 
用百度MIP快速搭建体验友好的移动页面
1、Doctype改造：将<!DOCTYPE ****>改为<!DOCTYPE html>
 
2、<html>标签改造：<html xmlns='http://www.w3c.org/1999/xhtml'>或<html lang='en'>改为<html mip>，注意全部小写
 
3、Head部分改造：
  • <head>标签必须完全小写
  • 页面的编码必须是utf-8，修改声明为<meta charset="utf-8">
  • 页面中加入<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>
  • 页面中加入MIP专用样式文件<link rel='stylesheet' type='text/css' href='https://mipcache.dbstatic.com/static/v1/mip.css'>
  • 告诉搜索引擎改页面对应的标准html页面地址，如果存在则标识<link rel='canonical' href='http://www.baidu.com'>其中href值修改为与当前mip页面相对应的标准页面（移动页）url地址。如果只有mip页面没有对应的标准页面就将href修改为当前mip页面地址就行了。
 
4、body内改造：
  • 首先body标签必须小写；
  • 将img、style、frame、form、input、textarea、select、option标签替换成对应的mip组件标签；
  • 引用MIP-JS运行环境：<script src='https://mipcache.dbstatic.com/static/v1/mip.js'></script>放在页面的尾部。
 
5、使用MIP Cache注意事项
  • 一般cache图片、脚本、样式，做完上述4步后，修改资源地址为相对地址或合法绝对地址（以校验工具为准）；
  • cache的内容需要更新要通过MIP数据提交中的更新数据接口，把更新的url链接推送过去，等待百度更新。
 
6、其他组件使用
官方文档包含了目前支持的所有组件，以百度统计为例：
查找原有百度统计工具查看统计js代码（全局查找关键字var_hmt关键字）获取token（hm.js？之后的编码），在页面底部，所有script前放入代码：
<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11（网站统计token值）"></mip-stats-baidu>
最后去除原来的百度统计代码。
 
canonical标签
百度MIP规范要求必须添加标签canonical，不然MIP校验工具会报错。
 
1、canonical标签有什么用？
canonical标签用于关联原页面和MIP页面，保证MIP页面继承原页面的权重，在爬虫抓取MIP页后，会根据canonical标签得到对应的MIP页面和原页面的关系，在移动搜索时优先展现MIP页面。
canonical标签不写或者写错都会导致MIP页面不能和原页面产生联系，导致权重丢失，MIP页面不展示。
 
2、原页面指什么页面？
原页面是相对于MIP页面来讲的，如果在m.a.com/1.html的基础上，mip改造后得到mip.a.com/1.html，那么m.a.com/1.html就是mip.a.com/1.html的原页面。
 
3、标签的正确写法
canonical标签添加在MIP页面的<head>标签中，href指向原页面地址。
在mip.a.com/1.html页面（MIP页面）：
<link rel='canonical' href='http://m.a.com/1.html'>
 
补充：
href指向原则：href指向百度移动搜索导流最多的页面。
不同情况下href指向：
  • 如果同样的内容既存在对应的pc页面，也存在移动页面，那么href指向百度移动搜索流量大的页面。
  • 如果是动态页面，原页面已经存在canonical标签，则href指向与原页面指向一致。
  • 如果原页面有多个版式，href指向流量最大的页面。
  • 如果没有对应的原页面url（如新建的mip站），或者直接在当前url进行MIP改造并直接生效 ，则href指向mip页面本身。
 
使用规则：
  • <link rel="miphtml">在H5页使用，指向对应内容的MIP页，方便搜索引擎发现对应的MIP页。
  • <link rel="canonical">在 MIP 页中使用, 指向内容对应的 H5 页面。
  • 若没有 H5 页，则指向内容对应的 PC 页。
  • 若直接在原链接修改 MIP，则canonical指向当前 URL。
 
注意事项：
  • MIP页面与原始页面的主体内容应该大致相同。如果内容相差较大，被搜索引擎判定主体内容不一致的话，会认为canonical标签无效。
  • 原页面与MIP页面的url的对应关系应该尽量简单、直接。原网页出现的文档名或者文档id，在MIP页面命名时候也要出现。简单直接的对应关系有利于搜索引擎分析mip页面与原页面的关系，加快MIP页面被收录和展现的速度。
     如原页面url为：https://m.baidu.com/123.html
          
 
MIP广告
目前，百度网盟广告以及百度全网推荐已经接入MIP。使用mip-ad广告组件，能够在内容秒开的基础上，同时加载广告内容。避免页面展现初期因广告加载慢导致广告位空白的问题，提升广告的曝光率。
 
版本升级
只需要替换线上引用的MIP文件为v1版本，就可以完成升级。升级带来的好处就是减少未来的开发和维护版本。
 
MIP-CLI
1、MIP-CLI工具安装与环境部署
   MIP-CLI：mip开发工具，用于MIP页面和组件的开发和校验。
  • 确保安装了node（v>=4.x）和git，然后输入npm install -g mip-cli，安装好后输入mip -v查看mip版本号。
  • 安装mip-extension-optimizer，它是mip组件编译工具，用于将mip-extension中的特定组件源码编译成js文件。输入npm i -g mip-extension-optimizer
  • 创建开发文件结构
     打开https://github.com/Missup/mip-extensions，fork一份mip-extensions项目代码，进入自己的mip-extensions项目页面，克隆到本地文件夹（自己新建一个目录mip-project），建议目录结构如下：
     
     其中html文件夹用来存放我们后续开发的mip页面。
 
2、MIP-CLI工具调试MIP网页
  • 初始化mip配置，在html目录下输入mip init将创建mip.config文件。
  • 新建一个mip页面，在html目录下输入mip add index.html将新建一个index.html文件，这个页面就是一个基础的MIP页面。当然，在新建页面的时候可以同时载入mip组件js脚本，如mip add index.html mip-share
  • 编写mip页面代码，注意符合mip网页规范，mip校验规则地址：https://www.mipengine.org/doc/2-tech/2-validate-mip.html
  • 校验MIP网页：mip validate index.html，线上校验器地址：https://www.mipengine.org/validator/validate
  • 调试MIP网页：在html项目目录输入mip server，访问http://127.0.0.1:8000进入调试页面
    • mip server默认监听8000和35730端口，如果端口冲突可在mip.config中修改启动端口，也可以使用mip server -f命令强制关闭当前占用端口的node进程（windows下无效）。
 
3、MIP-CLI工具调试组件
  • 在mip-extensions仓库中创建新的组件
    • 在mip-extensions目录中创建组件：mip addelement mip-alert
    • 开发组件mip-alert.js用于定义组件，mip-alert.less用于定义组件样式，README.md用于说明组件用法，package.json用于记录组件版本及开发者信息
  • 预览调试组件
    • 在mip-extensions目录下启动mip server来预览组件，预览页面访问的是README.md文件中的示例。如果代码已经提交到mip-extensions-platform中，需要将组件文件夹复制到mip-extension中预览
    • 打开调试网页http://127.0.0.1:8000/会列出当前仓库中的组件，点击进入mip-alert组件预览
      • 如果页面不能预览，将mip-extensions文件夹下的mip.config文件删除
      • 预览mip-extension-platform中的组件，需要将组件文件夹复制到mip-extension仓库中，在mip-extension文件夹内使用mip server预览
  • 在MIP页引用自己编写的MIP组件
    • 修改mip.config：进入mip-project/html文件夹下，修改mip.config文件的字段extensionsDir为../mip-extensions
    • 在html目录下创建mip-alert.html文件，并添加mip-alert组件：mip add mip-alert.html mip-alert；在body中引入<mip-alert alert-text='我是alert内容'>点击触发alert</mip-alert>
    • 在html目录下启动mip server：访问http://127.0.0.1:8000进入mip-alert.html页面
    • 组件提交到github仓库时需要进行校验：mip validateelement mip-demo，通过校验后提交到仓库，等待审核。
 
4、MIP组件平台使用说明，平台地址： https://www.mipengine.org/platform/
  • 使用百度账号登录组件平台；
  • mip组件编写和测试，然后从组件平台上传组件，需要改下README.md中所需脚本的地址为https://mipcache.bdstatic.com/extensions/platform/v1/mip-__/mip-__.js，注意地址需要包含‘platform’，eg：
  • 点击上传组件按钮，上传MIP组件zip压缩包。组件通过校验后可以提交审核。
  • 组件审核会在一个工作日内，提交审核后组件会被锁定，不能再上传或者修改。只有等待管理员通过审核或者打回后才能继续修改。
  • 组件上线后在本地可以引入上线后的组件进行验证。
  • 如果修改已经上线的组件，在修改代码后，还需要修改package.json文件中的版本号，然后再次提交即可。
 
MIP和AMP的关系
  • AMP是一个开源性项目，MIP是这个开源项目的参与者
  • MIP维持AMP的目标，MIP在中国国内有一些特殊情况的考虑，所以做了单独的实现。
  • 一个站长开发了MIP如何迁移到AMP？目前MIP某些组件无法实现百分百功能转换。
  • MIP-Cache已经对部分AMP页面做了支持。
  • 百度同时支持AMP和MIP的索引和打开
 
有了AMP，为什么还要做MIP？
AMP在中国的落地不是很理想，amp.js在中国不能访问，AMP缓存在中国没有服务，AMP不允许网页弹层，不符合我们的使用习惯。
 
关于流量和计费问题：
  • 开发MIP后，搜索流量是导流到MIP还是原页面？
    • 导流到MIP页面，需要在MIP页面中做好和原页面的对应关系
  • MIP移动网页加速器做了之后是只针对移动百度展示还是说对我们其他的正常用户一样显示？
    • MIP页面是可以独立运行的，可以在浏览器中通过url直接访问，不依赖百度结果页。由于MIP页速度较快，体验更优，会在百度移动结果页有更高的权重。
  • 搜索结果打开的是百度域名，用户分享是否也是百度链接？使用百度域名是否不利于网站的品牌传播同时也会影响流量统计，如何解决？
    • 如果用户通过组件分享，分享的标题、图片和内容都是原页面的内容，具体分享内容可以在使用组件时定义。不会影响流量和品牌传播。如果用户直接从浏览器复制链接分享，那么被分享的页面是MIP Shell链接（MIP页面链接），url中能看出原页面的URL。统计代码再页面加载完成后都会生效，不会受到分享影响。
  • 搜索结果打开的是百度域名，是否影响广告计费？
    • 从搜索结果点出的MIP页面，页面上的任何内容（包括但不限于广告、在线咨询、统计等组件）均视为在原站点上投放和使用。
 
什么网站适合加入MIP？
MIP已经可以完美支持资讯、图片、企业、小说、论坛等信息流类型的网站。复杂页面暂不建议MIP改造。
网站加载速度慢，打开速度时间长；用户体验差，跳出率较高的网站建议MIP改造。
 
常见问题汇总：
1、MIP对什么样的内容有较好的效果？
内容浏览类的站点支持比较全面
 
2、MIP页面发生错误会怎么样?
MIP有回退机制，访问出问题后会直接回到原来的h5页面，不会影响权重。
 
3、代码适配站点如何使用MIP？
如果后端根据UA判断是否为移动端页面，并返回页面，那么将返回的页面MIP化即可。如果是前端判断浏览器宽度或UA，再请求后端返回相应的页面，则需要改变这套流程，使用后端判断，或者直接改为响应式页面。
 
4、是否必须是HTTPS？
MIP改造本身不需要支持HTTPS，但是如果页面需要与服务端进行交互，比如发送统计，提交表单，获取数据，需要支持HTTPS。
 
5、gbk编码的网站如何使用MIP？
只能更改成utf-8。
 
6、对于自适应站点，MIP对页面的改造怎么弄？
如果自使用站点是css的Media Query实现的，那么不需要做什么特殊改造；
如果是通过js计算实现的，则需要去除原有JS逻辑，改引用mip-js的方式实现。如果组件不在mip-js组件列表，需要反馈给mip，然后等待它们实现。。。。
 
7、MIP规范中写道不能用link标签引入样式，是不是样式都要写到HTML页面里，并且只能出现一次style标签？
MIP规范不建议外链样式表，是为了节省网络加载时间，加速MIP页面。开发时，样式表可以作为单独的文件维护，上线前通过一次编译(fis3,grunt,gulp)实现文件内联，将css作为style标签插入html，达到MIP要求。
 
8、MIP框架是否可以和react等框架结合使用？
MIP与其他框架（除zepto和jquery）及其组件不能结合使用。
 
9、MIP页是否支持自定义cookie？实现登录、统计、广告等功能。
cookie可以使用<mip-access>组件实现，使用方法详见http://www.cnblogs.com/mipengine/p/mip-access.html
 
10、与服务端异步交互请求如何发出？
与服务端的交互请求需要自行封装组件，在组件中可以用fetch自行实现。
// get
fetch(location.href).then(function (res) {
    return res.text();
}).then(function (text) {
    fetchElement.innerHTML = 'fetch: ' + (text.search('mip-test') !== -1);
});
 
// jsonp
var fetchJsonp = require('fetch-jsonp');
fetchJsonp('xxx', {
    jsonpCallback: 'cb'
}).then(function (res) {
    return res.json();
}).then(function (data) {
    console.log(data);
});
 
11、MIP化后对其他搜索引擎抓取收录以及SEO的影响？
在原页面MIP化后，不会影响其他搜索引擎的抓取记录，也不会影响页面权重。新增MIP页面可以通过robots.txt文件禁用其他搜索引擎的抓取，从而保证原页面权重。MIP相关内容可以这么写（假设目录是/mip/）：
// 这段代码意思可能是允许百度引擎抓取所有文件
User-agent: Baiduspider
（这里不用写关于mip的内容）
 
// 下面这段意思是禁止谷歌引擎抓取mip目录下的文件
User-agent: Googlebot
Disallow: /mip/

 

MIP页面效果精选

链接中带有闪电标的页面都使用了MIP技术，可以作为开发参考。 
请使用手机或移动端模拟器查看页面效果。

 

 
posted @ 2018-09-05 17:25  卡布kaka  阅读(1106)  评论(0)  编辑  收藏  举报