百度新首页性能优化

新首页性能优化新首页性能优化

李成银

2011-12-22

性能的重要性性能的重要性

百度的首页

互联网用户的入口

传统首页非常快 (560ms)

性能对产品的影响

性能对产品的影响性能对产品的影响

性能优化的前提性能优化的前提

监控

性能监控平台 (http://fe.baidu.com/wpo)

性能监控平台性能监控平台

通过 JS 在页面埋点，收集页面在 head 、 tti

、 dom 、 load 等时段的时间情况 发送到 og 平台，运算后在性能监控平台进行

多维度的展现 包括：平均时间、时间段、浏览器、省份、运

营商、耗时、趋势等

性能监控平台性能监控平台

性能监控平台性能监控平台

性能监控平台性能监控平台

优化的目标优化的目标

优化手段优化手段

常规优化手段

增强型优化手段

基于用户行为分析的优化手段

常规优化手段常规优化手段

静态资源外链、合并、压缩 背景图片优化

- Png 使用 pngcrush

- Gif 使用 gifsicle

- Jpeg 使用 jpegtran

静态资源上 CDN

- 可以提速 20% 左右

常规优化手段常规优化手段

静态资源设置强缓存 - 命中强缓存 82.4%

- 命中弱缓存 3.4%

- 未命中缓存 14.2%

使用 css sprites

….

结果结果Tti 时间放在 script 之后

Tti 时间放在 script 之前

结论结论

性能的主要瓶颈在网络传输

增强型优化手段增强型优化手段

支持 Smarty 的 HTML 压缩

图片延时加载

tangram 最优定制

CSS 极限压缩

支持支持 SmartySmarty 的的 HTMLHTML 压缩压缩

Fl - 支持模版语法的 html/css/js 检测，美化，压缩等工具 - https://github.com/welefen/fl

上线前编译时进行 - 不影响开发方式

gzip 后减少 5%

支持支持 SmartySmarty 的的 HTMLHTML 压缩压缩

图片延时加载图片延时加载1 、导航 icon

2 、 app 的 icon

3 、 feed 用户头像

4 、 feed 中图片

TangramTangram 最优定制最优定制

• 开发时使用全部的 tangram

• 上线前通过最优定制工具分析 JS 代码中用到的 tangram 方法

• 将这些方法打包，替换全部的 tangram

• YUI 压缩后由 76k -> 29K, 减小 62%

• Gzip 后由 25K -> 9.8K, 减小 61%

TangramTangram 最优定制最优定制

http://fe.baidu.com/welefen/tangram-codesearch/codesearch.html

CSSCSS 极限压缩极限压缩

• CSS 文件下载过程中页面空白

• CSS 文件大小直接影响页面白页的时间

• CSS 中的 class 名字一般都是语义话，比较长

• 同时 HTML 和 JS 中引用的地方也要将长名字写一份

CSSCSS 极限压缩极限压缩

• 通过工具分析 HTML 里用到的 CSS

• JS 使用 data-class=“cls1 cls2” 的方式

• 建立压缩字典

• 压缩 HTML 和 CSS 对应的 class

• 同时可以去除冗余的 css

CSSCSS 极限压缩极限压缩

CSSCSS 极限压缩带来的问题极限压缩带来的问题

• 对于无跨模块引用 css 的有效

• 目前很多 css 在 js 里用到，之前没有使用data-class 的方式，所以该功能暂时没有开启

• 不过去除了冗余的 css 达 2K 多 (gzip 前 )

基于用户行为的分析优化基于用户行为的分析优化

鼠标移动行为

鼠标点击行为

交互行为

数据分析的加载方式

鼠标移动行为鼠标移动行为

鼠标移动行为

- 用户鼠标移动到模块内，加载模块扩展的 js 和 css

鼠标点击行为鼠标点击行为

交互行为 交互行为 – – 编辑模式编辑模式

数据分析的加载方法数据分析的加载方法

• Feed 在首屏占有 feed 的用户只有 13%

• 首次只加载发送 feed ajax 请求的 js

• 用户滚屏到 feed 时并行加载异步数据、 JS文件、 CSS 文件

优化历程优化历程

当前状态当前状态

当前状态当前状态

更多的优化更多的优化

• 用户网速测试

更多的优化更多的优化

• 监控平台支持 abtest 模式性能监控• 考虑对慢网速的用户将外链的 css 放在搜

索框后面• 考虑继续拆解 JS 基础库，减少初始化加载

文件大小• 考虑使用 performance api 拿到更多的性能

数据• …

优化优化

性能优化，永无止境

Q&AQ&A

Q&A