BT

移动网页加速器(MIP):着眼于构建开放技术标准的开源项目

作者 木环 发布于 2016年12月30日 | 欲知区块链、VR、TensorFlow等潮流技术和框架,请锁定QCon北京站!
在当今互联网时代,Web页面加速速度不仅关乎用户体验,而且还影响用户的留存率。
据数据显示:站点首屏超过5s,平均流量下降25%。
 
为了提升移动端网页性能,Facebook率先推出Instant Articles,增加20%点击,增加30%分享,减少70%放弃;谷歌开启Accelerated Mobile Pages(AMP),并声称第三方页面速度会提升20%到80%;百度于2015年开始了Mobile Instant Page(MIP)。其中,AMP和MIP均为开源项目。
 
12月22日,百度在北京举办了VIP大讲堂年终巨献,会上对百度MIP网页加速器进行了技术解读。会后,InfoQ对百度搜索的主任架构师谭待先生和高级技术经理高磊先生进行了专访。
 

缘起

事实上,在影响移动网页体验的因素中,速度是一个关键点,但速度的价值却普遍被忽略。据谭待先生介绍,百度曾就用户行为做了一番分析,发现网站开发人员之所以没有意识到速度的重要性,有一个原因在于看不到流量、收入等与网页速度的相关性数据。
 
因此,提升速度,不仅是后端要做优化,前端和网络同样需要付出努力。将已经经过验证的最佳使用方法总结成文字,于普通人而言依然有一定的实现困难性;而将这些经验以框架形式作为解决方案(MIP)展现出来,则是更简单的方式。在这一背景下,百度MIP网页加速器应运而生。
 

MIP技术概览

MIP究竟是种怎样的技术?
 
MIP是在HTML基础上进行了规范限定,通过合理优化的JavaScript使用,再辅以高速缓存技术。与此对应的即为MIP三个组成部分:MIP HTML、MIP JS和MIP Cache。
 
作为一套技术标准,MIP对HTML的标签进行了使用方法的限定。除了将HTML固有标签封装成MIP自有标签外(如img、video、iframe封装成mip-img、mip-video、mip-iframe),还禁止使用了frame、frameset、form等标签。对于保留的标签,MIP进行了一些资源加载与渲染的数据处理。比如,优化加载逻辑(主题和对用户特别优化的内容的优先加载,其他元素如广告再后续同步处理),延时呈现(只有当真正需要使用某个资源时才进行加载),提前计算布局(对图片、视频或漂浮元素进行事先占位)。
 
MIP禁止使用某一些HTML原生标签,因为它们会影响资源的加载和渲染顺序,并直接影响页面的加载速度。作为替代,MIP会通过定制化解决方案表现达到同等功效,而这些修改化使用都符合Web Component标准规范。
 
在谭待看来,虽然JavaScript、AJAX技术本身没有问题,但是在MIP中要避免直接使用。这是因为写出高效的JavaScript程序并不容易,加载时机和顺序难以保证。大部分开发者的使用呈现对用户体验并不友好。MIP沉淀了一些最佳实践成果,以期用更加简便的方式提供给开发者。
 
但是谭待先生和高磊先生都在澄清一点:MIP的速度并非主要来自于CDN和预取,据估计,在MIP速度的提升中,来自MIP Cache模块的不足30%,而70%以上要归功于MIP HTML和MIP JS两个模块。
 

MIP支持自定义组件

在使用MIP构建页面的过程中,开发者既可以采用MIP规范的HTML和已有的通用组件,也可以进行自定义组件。在MIP的规范中,除了定义MIP HTML和MIP Cache的应用规范,还定义了MIP的扩展组件规范。而针对自定义组件的开发者,其所提交的组件则会经由百度进行code review等审核。
 
据称,MIP于2016年8月正式对外公开,截止目前已经衍生出了110个组件,其中96个为第三方站点提供的MIP组件。
 

新浪爱问的实践 

新浪爱问技术总监李千分享了MIP改造经验,新浪爱问在改造前每天PV量约为9千万以上,从最开始接触到全面大批量上线MIP历时两个月,最终加载速度得到了很大提高,页面打开速度提升2倍。具体而言,体现在两点:
  1. DNS解析耗时少:通过使用MIP封装的精简组件,省去体积庞大的JS库引用,减少静态文件、JS缓存在百度CDN页面的体积。
  2. 页面渲染耗时少:使用MIP全组件,该组件采用懒加载技术,避免渲染阻塞问题。
 
据数据统计,MIP改造后页面达到率获得了提升,网站流量增加18%,广告部分收入提高12%。此外,李千认为MIP还具有低学习成本、开发成本和维护成本的优势。
 
据百度透露,经过针对国内主流站点的测试表明,MIP可以提升页面30%-80%的加载速度,以及5%-30%的PV访问量。
 

内部研发,背后的故事

谭待和高磊还分享了百度MIP项目研发背后的故事。他们指出,MIP于2015年夏天开始调研,2015年10月出品并最早应用于一个百度自有的产品。之后,在2016年年中开始讨论对外产品的技术方案,并于2016年年终进行了大范围Web尝试。百度称截至目前,已经有超过2800个站点、9.1亿个移动一面参与MIP化改造。
 
目前MIP团队有50人,其中20人为前端研发人员。百度称该项目将会一直以开源项目形式发展下去。百度坦诚希望原来越多的人使用MIP开源项目,并参与核心代码的提交。
 
百度称一直保持与Google AMP团队的交流,因为MIP和AMP同为开源项目,不仅具有相同的技术思路,而且在协议层面和规范层面也非常相似。基于共同的出发点,双方将来会继续深化合作,使得开发者只需开发一次,在AMP和MIP两种环境中便可同时使用。此外,百度预计于明年和Google共同落地Progessive Web APP(PWA),在MIP提升阅读浏览体验的基础上,继续优化动态的互动呈现。
 
百度承诺,MIP会始终遵守W3C规范 ;百度的愿景是支持完全开放、生效于所有平台的Web加速项目,从而促进Web环境发展。
 

当标准遇上搜索

作为搜索引擎巨头,百度需要考虑用户体验和站长利益双方面因素。谭待坦言,在MIP项目中也遇到一些技术坑,如组件兼容性的问题,而国内网站页面需要支持不同格式的广告播放,为此,百度需要和不同的广告联盟讨论。
 
此外,谭待称采用MIP的网页内容会在搜索引擎排序中进行优待处理。除了搜索算法的持续迭代,搜索系统本身也会发生变化,其中Spider 3.0 就参与到URL发现、收录和索引——在提交MIP之后,由Spider进行抓取,进入统一内容池处理。百度称目前每天每天有数亿个MIP页面从百度点出。
 
百度称希望进行生态赋能,通过技术和机制让web生态的生产、运营和变现等环节都更有效率。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论
提供反馈
错误报告
商务合作
内容合作
Marketing
InfoQ.com及所有内容,版权所有 © 2006-2016 C4Media Inc. InfoQ.com 服务器由 Contegix提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司 京ICP备09022563号-7 隐私政策
BT

我们发现您在使用ad blocker。

我们理解您使用ad blocker的初衷,但为了保证InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。