百度移动网页加速器MIP(Mobile Instant Pages)问题解决方案大全

MIP 推出后,我们收到了一些站长的疑问。现将常见问题整理出来,帮助大家了解 MIP 的知识

MIP (Mobile Instant Pages - 移动网页加速器), 是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。关于MIP的基础知识可以到MIP官网进行了解。为帮助站长和开发者更好地了解MIP,MIP开发团队对大家的疑问进行了整理,帮助大家了解 MIP 的知识。

MIP 主要由三部分组织成:

  • MIP HTML:基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容;

  • MIP JS:可以保证 MIP HTML 页面的快速渲染;

  • MIP Cache:用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。


移动网页加速器MIP的加速原理

slide1.jpg

经过精心设计的 JavaScript

为了去除臃肿的客户端脚本,MIP 文件不允许自定义 JavaScript;对一些强依赖 JavaScript 的功能(如:广告、统计和交互),MIP 提供与 MIP runtime 兼容的封装好的组件来实现。

JavaScript 引用原则:

  • 目前 MIP 不允许用户自定义 JavaScript,需要用 MIP 组件的形式引进来,从而确保安全性和性能表现

  • 可以引用 mip-iframe 来引入实现部分富交互的功能,这样,即使开发时使用最影响性能的 document.write,也不会影响主页面的渲染

  • MIP 组件是开源的,允许开发者自定义功能组件,项目也将持续提供多样的组件,以适应不同的需求

所有静态资源需要标明尺寸

在页面开发时,资源常常不会被设定宽高,特别是使用广告或者通过调用 `document.write() 注入的时候。由于资源大小不能确定,页面经常要进行反复重新的绘制;

现在,MIP 要求将所有的资源(广告、图片、音频和视频)标明尺寸。当资源真正加载时,所有资源大小可以被立即推断出并迅速的用于计算页面布局,加载中的资源将无缝呈现,不必因为页面频繁更新布局而影响到用户的阅读体验。

不允许任何机制阻止页面渲染

开发者的任何自定义脚本,都需要用 MIP 的 tag 反馈给 MIP,例如 mip-ad、mip-iframe 等,这些方式不会阻塞页面的 layout 和渲染。

控制外部资源加载

MIP runtime 会控制外部资源的额加载来确保其高效性,从而使用户想阅读的内容尽快出现在屏幕中。

封装交互功能

MIP 提倡网页能给用户直接简单的体验,但这并不意味着 MIP 限制了页面的生动和有趣。MIP runtime 提供了高度优化的被封装的 JavaScript,开发者无需投入过多精力去实现复杂的交互功能。

建议使用 inline 的 css

css 的加载,会阻止页面的渲染,css 内联可以减少客户端的开销。

只允许 GPU 加速的动画

MIP 只允许用 transforms 和 opacity 来完成动画效果,当动画能在 GPU 上执行时,仅触发渲染层合并。

MIP 缓存

MIP 另一个重要的意义在于能够帮站长加速网页,百度将会把 MIP 网页缓存到百度 CDN 中。只要符合 MIP 标准,都可以使用 MIP 缓存。

开放且持续更新

MIP 是一个开源项目,所有的标准并非一成不变。我们会持续不断进行优化,期待您的共同参与!


MIP 内容声明

从搜索结果页点出的MIP页面,其页面上的任何内容(包括但不限于广告、在线咨询、统计等组件)均视为在原站点上的投放和使用。

MIP (Mobile Instant Pages - 移动网页加速器), 是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。

移动站点可以根据需要使用MIP技术进行开发,从而达到H5移动页面加速效果。

  1. 站点发布的MIP页面,由站点开发人员采用MIP技术自行开发。开发与发布过程完全由站点把控。

  2. 采用MIP技术开发的H5页面,页面中展现的内容和功能,与普通H5页面一样,完全由开发方放置。

  3. 采用MIP技术开发的H5页面,站点流量以及所投放广告等内容的展现与点击等使用情况,完全由开发方进行统计和监控。

  4. 在用户使用搜索引擎时,为了保证MIP页面的加速效果,搜索引擎可能会将MIP页面缓存到离用户更近的CDN服务器。目前,缓存刷新的平均时间为50分钟左右。

因此,无论是从搜索点出的MIP页面还是直接访问的MIP页面,页面开发过程、展现内容、相关监控,均完全由站点开发方进行把控。在这两种情况下的页面上的任何内容(包括但不限于:广告、在线咨询、统计等组件)均视为在原站点上的投放和使用。


MIP 认知类问题

MIP 认知类问题

1.1 MIP 化的收益是什么?具体数据是怎样的?

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

1.2 有没有已上线MIP页可以参考呢?

现在已经有上千家站点完成了MIP改造,点击《MIP页面效果精选》查看示例。

链接中带有闪电标的页面都使用了MIP技术,可以作为开发参考。

请使用手机或移动端模拟器查看页面效果。

1.3 开发 MIP 后,搜索流量是导流到 MIP,还是导流到原页面?

应该导流到 MIP 页面,需要在 MIP 页面中做好和原页面的 对应关系

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

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

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

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

1.6 搜索结果打开是百度的域名,是否会影响广告计费?

从搜索结果页点出的MIP页面,其页面上的任何内容(包括但不限于广告、在线咨询、统计等组件)均视为在原站点上的投放和使用。详情请见MIP 内容声明

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

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

1.8 MIP 可以加什么样的广告?

MIP 既可以加入百度联盟广告,也可以加入第三方广告。

1.9 MIP 是否开源?

MIP 核心代码和组件都是开源的,欢迎交流讨论。

1.10 MIP 对什么样的内容有较好的效果?

目前我们对内容浏览类的站点支持比较全面。后续,随着不断丰富的开放组件,MIP 可以支持更多类型的站点。

1.11 站长构建一个 MIP 的成本有多少?

MIP HTML 是基于 HTML 进行的优化。对于新建站点,按照 MIP 规范开发即可,没有额外成本;如果是已有的页面,需要具体看页面生成方式,模板形式的改造一次性成本。

1.12 MIP 与 Mobile Friendly 是什么关系?

Mobile Friendly 是用于评估个页面在手机端的浏览体验,评估标准包括内容易读性,功能易用性,广告面积等。 而 MIP 是一套解决方案,不仅可以提升移动端浏览体验,还会解决页面加速和安全性的问题。 所以应用了 MIP 的页面能够提升一定的移动友好性,但不一定能达到 Mobile Friendly 的要求。

1.13 加了 MIP 标签后对页面的展示有没有影响?

没有影响。MIP 标签会自带一些样式,但这些样式是可以被覆盖的。所以加了 MIP 标签后网页还可以保持原来的样式。


站点MIP改造前需要哪些准备

站点MIP改造前准备

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

答:都可以,这三种方案改造 MIP 都是可行的。做好 canonical 标签 对应即可。

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

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

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

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

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

MIP 改造本身是不需要支持 HTTPS 的。但如果页面需要与服务端进行交互,比如发送统计,提交表单,获取数据,需要支持 HTTPS。快速进行 HTTPS 化可以通过百度云加速的 HTTPS 方案进行快速部署 HTTPS 环境。

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

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


MIP前端改造,组件使用

MIP前端改造,组件使用

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

MIP 为了确保安全性和性能表现,不允许用户自定义 JavaScript,需要用 MIP 组件的形式引进来;MIP 组件是开源的,开发者可以自行开发组件并提交给 MIP 组件库。可以参照MIP组件开发规范文档来封装组件并提交。

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

MIP 页面中可以展示所有原页面的元素,在前端代码中对于一些标签做替换即可。比如,如果需要使用悬浮元素(position:fixed)需要改用 mip-fixed 组件或 mip-semi-fixed 组件。

3.3 MIP 提供的组件不能满足交互需求怎么办?

在 MIP 官方组件不能满足需求的情况下,如果升级官方组件可以满足,可以 提需求 或自己升级官方组件,MIP 项目组来审核;如果涉及到站点自身业务逻辑,可以自行封装组件并通过 组件审核平台 提交审核组件,审核通过后可以上线。

3.4 网盟反屏蔽广告申请广告位的时候,能否同时生成 MIP 页面的广告代码片段?

暂时还是不支持直接生成的,需要人工的根据转换规则将非 MIP 反屏蔽投放代码转换成 MIP 反屏蔽投放代码。这个转换规则还是比较清晰的,在 MIP 文档 里有说明。

3.5 为什么投放网盟反屏蔽广告,直接打开MIP页广告展现,在MIP预览工具和百度搜索结果页却看不到广告呢?

MIP预览工具和百度搜索结果页是https环境,会相应地引用https反屏蔽脚本。如果反屏蔽域名不支持https,就不能加载脚本了。可以参考反屏蔽广告组件文档的注意事项,通过支持https来解决这个问题。

3.6 对于自适应站点,MIP 对页面的改造要怎么弄?

MIP 改造主要有三步:

  1. 引用 MIP 提供的 JS 和 CSS

  2. 替换部分标签为 mip-html 标签

  3. 去除原有 JS 逻辑,改引用 mip-js 组件。

是否需要特殊改造,由网站对 “响应式” 的实现方式决定:

  • 如果您的自适应站点是用 CSS 的 Media Query 来实现的,那么不需要做特殊的改造,MIP 对 CSS 没有限制。

  • 如果您的自适应是通过 JS 计算实现的,则需要进行相应的改造(见改造第 3 步)。 如果您需要的功能不在我们的组件列表里面,可以通过 github issues 给我们反馈。

3.7 MIP 规范中写到不能用 link 标签对样式表进行加载,是不是我的样式都要写到 HTML 页面里,并且只能出现一次 style 标签?

MIP 规范不建议外链样式表,是为了节省网络加载时间,加速 MIP 页面。 开发时,样式表可以作为单独的文件维护,上线前通过一次编译(fis3,grunt,gulp)实现文件内联,将 css 作为<style>标签插入<html>, 达到 MIP 要求。

3.8 如何保证 MIP 页面代码符合规范,有校验工具么?

代码校验工具地址为:https://www.mipengine.org/validator/validate。在 MIP 官网—常用链接中也可以找到。

3.9 react 能否和 MIP 结合使用?是否会和其他 js 框架(比如angular )结合?

MIP 与其他框架(除zepto和jquery)及其组件不能结合使用。交互功能可以通过引入 MIP组件实现。

3.10 MIP页是否支持自定义cookie? 实现 登录、统计、广告等功能

cookie可以使用<mip-access>组件实现,使用方法见博客《MIP ACCESS细节剖析》

3.11 MIP的统计功能如何实现的?

目前我们提供百度统计天润统计,第三方站长开发的 cnzz 统计,还有 mip-pix 自定义统计。在页面中引入相应的组件就可以实现统计功能。

3.12 与服务端异步交互请求如何发出,如AJAX,官方提供了什么组件?

与服务端的交互请求比较个性化,需要自行封装组件,在组件中可以用 fetch 自行实现。文档请见官网。示例:

fetch(location.href).then(function (res) {
   return res.text();
}).then(function (text) {
   fetchElement.innerHTML = 'fetch: ' + (text.search('mip-test') !== -1);
});

3.13 第三方自定义组件的时候是否限制个数和规范?

暂无个数限制,规范需要通过FECS的规范检查,请保证新提交的组件不重复实现已有功能。未来我们会开放MIP组件平台,方便大家提交组件。

3.14 组件开发后多久可以上线?

组件开发按照 github 的标准,开发自测完成后,提交到 MIP 组件上线平台。1个工作日内可以上线。

3.15 组件之间是否可以交互?

为了组件间的抽象分离,mip不建议做组件间的交互。但是可以通过dom加on属性的形式控制。如mip-lightbox 弹层组件与mip-sidebar 侧边栏组件,点击button按钮可以触发展开收起。

<button on="tap:my-lightbox.open" id="btn-open" role="button" tabindex="0">
   Open lightbox
</button>

<mip-lightbox
   id="my-lightbox"
   layout="nodisplay"
   class="mip-hidden">
   <div class="lightbox">
       <h1>Hello, World!</h1>
       <p> this is the lightbox</p>
   </div>
</mip-lightbox>

如果有遇到新的前端技术问题,可以通过 GitHub issues 与我们交流,提交 issue 可以按照博客文章操作。


百度MIP如何提交生效

4.1 如何提交 MIP 页?MIP 推送 URL 限制是多少?

博客《百度站长平台 MIP 引入工具》中有提交 MIP 页的详细教程。提交上限根据站点而不同,最少的上限是每天 10000 条 URL,上不封顶。

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

在原页面 MIP 化,不会影响其它搜索引擎的抓取收录,也不会影响页面权重。新增 MIP 页可通过 robots.txt 文件禁用其它搜索引擎的抓取,从而保证原页面的权重。MIP相关的内容可以这么写(假设您的目录是/mip/):

User-agent: Baiduspider
(这里不用写关于mip的内容)

User-agent: Googlebot
Disallow: /mip/

4.3 针对拥有 PC、WAP、MIP 三套页面的网站,如何进行移动适配工具和 MIP 工具提交?

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

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

答:MIP 页面都会使用百度搜索结果页异步打开,只需要在百度搜索中搜索链接,并且打开后 URL 上是百度地址。

4.5 MIP 提交几个月时间了,生效量比较少,是什么原因?

答:提交 MIP 页面后,经过收录、校验、和生效三个步骤,才能在结果页看到闪电标。

1)提交 url 后,spider 会去抓取收录; 2)页面收录后,会进行 MIP 校验,如果页面不能通过 前端校验,则说明页面源码不符合 MIP 规范,此时页面 收录 成功,但是并没有 生效。 3)只有页面符合 MIP 规范,并且能通过前端校验,页面才算生效,也就是搜索引擎看到的是带闪电标志的页面。

生效量少的原因也会根据不同站点而不同,请先确认页面是否被收录并且能通过 MIP 校验,可以反馈问题到站长平台,来定位具体原因。

4.6 MIP 页面提交并收录了为什么搜索结果没有 MIP 闪电图标。

这种情况大多数是因为 MIP 页面乱码或者页面源码不能通过 校验 导致。如果还有其他问题,可以从站长平台 反馈入口 反馈问题。

4.7 MIP 页面提交给百度收录后,为什么有些会被转码?

由于广告不符合百度规范。MIP页面跟普通页面性质相同,都是可访问的html页面。百度搜索会将质量较低的页面转码,无论是否是MIP页面都会被转码。如果您的页面被转码,请参考《百度移动搜索落地页体验白皮书——广告篇》 修改页面内广告的投放。

4.8 为什么在搜索生效后,百度统计看不到数据?

  1. 百度统计组件使用:查看浏览器请求,如果有hm.gif请求发出,则说明百度统计组件使用正确。

  2. 百度统计后台使用:如果不添加筛选项,是可以统计到全部页面流量的,包括直接访问MIP页和MIP-Cache页面。MIP-Cache流量URL有mipcdn.com或mipcache.bdstatic.com的特点,筛选可见。注意不能筛选m.baidu.com。

百度搜索相关问题,可以通过百度站长平台的 反馈入口 反馈。


MIPCache

5.1 为什么要使用 MIPCache?

MIP-Cache 是百度提供的,所有从百度搜索结果页打开的页面都是 MIP-Cache 的页面。

1. CDN 加速

CDN (Content Delivery Network) 加速原理,简单来说就是在不同地点建立内容缓存节点。通过负载均衡技术,将用户的请求定向到最合适的缓存服务器上去获取内容。

MIP-Cache 可以理解为一套 CDN 缓存系统。当用户从百度搜索结果页访问 MIP 页面时,请求首先会发到 MIP-Cache CDN 服务器,如果页面存在,则从 CDN 直接返回静态页面;如果页面不存在或过期,则会请求第三方服务器(或站长自己使用的 CDN)。本次返回的符合 MIP 规范的页面会同时加入 MIP-Cache,为下次页面请求做准备。

2. 缓存静态文件,同源策略加速

百度 MIP-Cache 给所有符合 MIP 规范,能通过 MIP 校验的 MIP 页面提供静态文件的缓存服务,静态文件包括图片,外链 CSS 文件(不推荐)等。在缓存静态文件的同时,HTML 页面本身也会被改写,引用图片的地址会被修改为 MIP-Cache 中的图片地址。

缓存静态文件带来最大的好处是避免从不同域名下读取静态文件,使用同源策略减少 DNS 解析时间,能够加速加载速度。

3. 百度搜索的预取加速

页面预取是指在搜索结果页展示后,用户点击某条结果之前,搜索引擎就开始预测用户可能点击的结果,提前加载落地页的内容。在用户真正点击这条结果时,结果的内容已经从远端进入了浏览器缓存,省去了网络加载时间。

搜索预取会请求 MIP-Cache 内容,所有进入 MIP-Cache 的页面都被认为是合法的 MIP 页(原理见下文)。目前 MIP 项目组正在讨论预取的技术方案,请关注博客进展。

附: MIP-Cache 的更新和校验策略

考虑到站长有更新页面的需求,MIP-Cache 会定期重新抓取 MIP 页并进行校验。

在 MIP-Cache 中:

  • 页面的缓存时间为52分钟-5天(由该页面用户点击量和站点本身稳定性决定)。

  • 图片缓存时间为10天。

  • MIP-JS 组件文件的缓存时间为10分钟。

在当前文件过期后,MIP-Cache 会重新抓取资源。如果是 HTML 页面,MIP-Cache 还会对页面文件进行 MIP 规范校验。如果此时页面内容不再符合 MIP 规范,MIP-Cache 就不再缓存这个页面了。这样,所有 MIP-Cache 中的页面都是最新的,并且符合 MIP 规范。

如果要快速清理 MIP-Cache 内容,请参考站长平台 MIP-Cache 说明。注意,对于同一个站点,每100秒最多清理10条。

MIP-Cache 使用方法及 URL 生成规则,请查阅 MIP 官方文档《MIP-Cache 规范》


5.2 如果提交的网址错了,怎么删除错误的网址,另外把页面都改成404对站点排名有没有影响?


可以使用站长平台 mip-cache 的更新接口,删除错误网址。如果还有对应的h5网页的话,对排名没有影响。


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


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


5.4 已经使用 CDN 再用 MIP 的必要性是什么?


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


5.5 页面的 url 没变,但展现内容进行了改版。改版后,新的内容为什么没有同步在百度搜索结果页?


答:MIP Cache 页面没更新导致。具体分两种情况:一是页面没有点击导致页面不被更新(自动更新时间最长 5 天,也就是说最多 5 天,页面也会被更新);二是页面有点击,但是站长服务器封禁了 spider 抓取,这样导致 Cache 抓取不回来新的页面,导致无法更新。目前 MIP Cache 抓取 UA 为 baidumib、mip,理论上讲,除非站长服务不稳定导致多次抓取失败,否则不会带来额外的太大压力。


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


答:目前页面过期时间是 50 分钟左右,详细请见 MIP-Cache 的更新和校验策略


5.7 使用MIP-cache是否增加页面抓取的压力?


会。MIP-cache为了保证页面的时效性,会在cache过期(52分钟-5天)后重新抓取所有页面,网站服务器会受到较高的qps压力。


百度移动网页加速器MIP(Mobile Instant Pages)问题解决方案大全相关百科

    没有找到您想要的百科