写点什么

移动网页加速器(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 生态的生产、运营和变现等环节都更有效率。

2016 年 12 月 30 日 05:071340
用户头像

发布了 58 篇内容, 共 37.7 次阅读, 收获喜欢 12 次。

关注

评论

发布
暂无评论
发现更多内容

开发霸总:我要让所有人知道,这个扫码组件,被你承包了

蚂蚁集团移动开发平台 mPaaS

支付宝 uniapp mPaaS

Serverless 架构就不要服务器了?

华为云开发者社区

云计算 Serverless 架构

田哥:面试被问== 与equals 的区别,该怎么回答?

田维常

面试

Istio 中的智能 DNS 代理功能

Jimmy Song

开源 云原生 Service Mesh istio 服务网格

第九周作业

Geek_4c1353

极客大学架构师训练营

阿里云原生中间件首次实现自研、开源、商用“三位一体”,技术飞轮效应显现

阿里巴巴云原生

阿里云 云原生 中间件

“人上人”大专学历,通过系统的六个学习步骤,艰难4面终砍offer,“跳进”字节跳动

Java架构追梦

Java 架构 字节跳动 面试 微服务

vivo 调用链 Agent 原理及实践

vivo互联网技术

Java 架构 调用链

第9周学习总结

饭桶

第九周总结

从基础设施到云原生应用,全方位解读阿里云原生新锐开源项目

阿里巴巴云原生

阿里云 云原生 开源项目

软件测试系统学习流程和常见面试题

测试人生路

软件测试

讲武德,你们要的高性能日志工具 Log4j2,来了

沉默王二

Java log4j

《Elasticsearch服务器开发》.pdf

田维常

elasticsearch

架构师训练营 - 第 9 周课后作业(1 期)

Pudding

LeetCode069-x的平方根-easy

书旅

go 数据结构 算法

智能灯串开发资料全开源!为这个冬天装点烂漫“星空”

智能物联实验室

人工智能 物联网 智能硬件 智能家居

0到1产品需求整理分析模型参考

燕陈华

产品设计 产品需求

华为云MVP付健权:从机械工程师到AI开发者的华丽转身

华为云开发者社区

AI 转型 工程师

Java程序员说:世界上有三个伟大的发明【火、轮子、kafka】

Java架构师迁哥

展现非凡领跑力,京东会展云斩获“十大云原生行业落地典范”奖项

京东智联云开发者

云计算 AI 云原生

第九周作业

记一次HEX和RGB互换算法的思考及应用

徐小夕

Java 面试 算法 前端

架构训练营 - 第9周课后作业 - 学习总结

Pudding

云原生趋势下的迁移与容灾思考

阿里巴巴云原生

云原生 迁移 容灾

详解企业管理系统工作流配置

Marilyn

敏捷开发 工作流 软件架构

Minikube-运行在笔记本上的Kubernetes集群

网管

学习 Kubernetes k8s minikube k8s入门

鹿鼎记 · 韦小宝,丽春院、天地会、入皇宫等五个场景的恶搞版多线程锁学习!

小傅哥

Java 程序员 小傅哥 多线程

5G革命:如何让「数据」实现最大性能?

VoltDB

数据库 数据分析 5G 工业互联网

第九周课后练习

饭桶

排序与二分

落曦

InfoQ 极客传媒开发者生态共创计划线上发布会

InfoQ 极客传媒开发者生态共创计划线上发布会

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