MIP改造教程,浅谈MIP接入解决方案!

What Is MIP ?

厦门SEO:https://seo.quxingdong.com/

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

MIP 主要由三部分组织成:

  • MIP-HTML:基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容。
  • MIP-JS:可以保证 MIP-HTML 页面的快速渲染。
  • MIP-Cache:用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。

Ps:不论是技术层面还是应用层面,百度MIP充分借鉴了谷歌AMP,所以在很多技术规范和结果展现上跟谷歌AMP非常的相似。百度MIP被很多开发者看作是国内的AMP。


写在前面:相较于谷歌AMP而言,百度MIP学习门槛相对较低,有完整的中文开发文档和完善的代码校验工具。细节的百度MIP开发规范可以参考官方文档,下面只针对速贸通官网以及一些实际开发常见问题来浅谈一下百度MIP。

MIP 加速原理:

  1. 经过精心设计的 JavaScript
  2. 所有静态资源需要标明尺寸
  3. 不允许任何机制阻止页面渲染
  4. 控制外部资源加载
  5. 封装交互功能
  6. 建议使用 inline 的 CSS
  7. 只允许 GPU 加速的动画
  8. MIP 缓存
  9. 开放且持续更新

九个、跟AMP加速基本一样。


MIP 解决方案:

一、域名:

市面常见解决方案:

mip.******.com (独立域名)

01.用二级域名解析到官网MIP站点;

www.******.com (统一域名)

02.用UA来判断用户终端设备,来展现对应的站点;

03.电脑版、手机版都用MIP框架来开发(百度MIP对电脑版目前是没有优待的!),好处:省了为MIP站点配置单独域名;坏处:由于百度MIP框架是针对移动站点设计的前端框架,所以样式极其单调,不推荐!

www.******.com/mip (目录域名)

04.目录域名的形式在国外针对AMP比较流行这种方案,但是由于国内百度站长平台区别于国外谷歌站长平台,有单独的MIP提交工具。在页面提交上,MIP比AMP有跟多的方式(AMP页面只能默默等收录)。

厦门SEO:https://seo.quxingdong.com/

上面是百度站长平台的MIP页面提交工具截图,从表单预留内容可以看出百度还是比较建议使用“域名/mip”的,注意百度这边不是在URL最后面加“/mip/”!而是紧接着在域名后面加“/mip/”,即“www.******.com”开头的URL统一解析到原站,“www.******.com/mip”开头的URL统一解析到MIP站。

二、网站:

  • 起始标签使用<!doctype html>
  • html标签必须加上mip标记,即: <html mip>
  • 必须包含<head>和 <body>标签
  • 必须在head标签中包含字符集声明: <meta charset=”utf-8″>,字符集统一为utf-8
  • 必须在head标签中包含viewport设置标签: <meta name=”viewport” content=”width=device-width,minimum-scale=1″>,推荐包含initial-scale=1
  • 必须在head标签中包含<link rel=”stylesheet” type=”text/css” href=”https://c.mipcdn.com/static/v1/mip.css”>
  • 必须在body标签中包含<script src=”https://c.mipcdn.com/static/v1/mip.js”></script>
  • 必须在head标签中包含<link rel=”canonical” href=”http(s)://xxx”>

MIP 文档工具:

一、文档:https://www.mipengine.org/doc/00-mip-101.html

二、工具:https://www.mipengine.org/validator/validate

*注意添加百度统计JS顺序:

厦门SEO:https://seo.quxingdong.com/

统计工具:https://www.mipengine.org/examples/mip-extensions/mip-stats-baidu.html

本文由 @屈兴东原创发布厦门SEO —— https://seo.quxingdong.com/。转载需注明出处!

原文链接:https://seo.quxingdong.com/148.html

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Debian社区

你应该选择Cinnamon作为Linux桌面环境的十个理由

Cinnamon属于一套GNOME 3桌面fork,且希望实现GNOME桌面从未能实现的效果。除了对GNOME进行改进与扩展外,它还保留了独特且令人赞赏的特色。...

36850
来自专栏Fundebug

微信小程序开发BUG经验总结

小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家。

33240
来自专栏数据小魔方

think-cell chart系列20——使用建议及附加功能

今天是think-cell chart系列收尾篇——使用建议及附加功能。 由于think-cell chart图表插件是office平台的第三方插件,而且图表...

49940
来自专栏跟着阿笨一起玩NET

WEB免费打印控件推荐

要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1、2W之间,这就麻烦了。

4.6K10
来自专栏软件开发

前端机试面试题

1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。

55830
来自专栏草根博客站长有话说

分享两个著名的 WordPress 本地缓存插件

虽然明月已经放弃使用 WordPress 本地缓存插件很久了(可参考【我为什么放弃了缓存插件?】),但是考虑到很多新手站长们依然在使用着虚拟主机服务器,所以今天...

12360
来自专栏phodal

使用了 Google AMP 网站加速技术后,我的博客快了八倍

一年前,我为我的博客 www.phodal.com 添加了 AMP 的支持。今天偶尔间在搜索结果页看到了 AMP 的标志,打开博客的速度几乎是秒级的。 今天在本...

34750
来自专栏杨龙飞前端

vue重构后台管理系统调研

Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码。

23810
来自专栏java思维导图

简洁概括,程序员的技能树

前端程序员 基础 HTML / CSS JavaScript DOM 中级篇 数据格式(如JSON、XML) RESTful API交互(如jQuery Aja...

38260
来自专栏狮乐园

高级 Angular 组件模式 (1)

Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的an...

10620

扫码关注云+社区

领取腾讯云代金券