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

  • 木环

2016 年 12 月 30 日

话题:移动语言 & 开发

在当今互联网时代,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 是在 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 规范的 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 生态的生产、运营和变现等环节都更有效率。

移动语言 & 开发