新首页性能优化 李成银 2011-12-22
性能的重要性 <ul><li>百度的首页 </li></ul><ul><li>互联网用户的入口 </li></ul><ul><li>传统首页非常快 (560ms) </li></ul><ul><li>性能对产品的影响 </li></ul>
性能对产品的影响
性能优化的前提 <ul><li>监控 </li></ul><ul><ul><li>性能监控平台 (http://fe.baidu.com/wpo) </li></ul></ul>
性能监控平台 <ul><li>通过 JS 在页面埋点,收集页面在 head 、 tti 、 dom 、 load 等时段的时间情况 </li></ul><ul><li>发送到 og 平台,运算后在性能监控平台进行多维度的展现 </li></ul...
性能监控平台
性能监控平台
性能监控平台
优化的目标
优化手段 <ul><li>常规优化手段 </li></ul><ul><li>增强型优化手段 </li></ul><ul><li>基于用户行为分析的优化手段 </li></ul>
常规优化手段 <ul><li>静态资源外链、合并、压缩 </li></ul><ul><li>背景图片优化 </li></ul><ul><ul><li>Png 使用 pngcrush </li></ul></ul><ul><ul><li>Gif ...
常规优化手段 <ul><li>静态资源设置强缓存 </li></ul><ul><li>  -  命中强缓存 82.4% </li></ul><ul><li>  -  命中弱缓存 3.4% </li></ul><ul><li>  -  未命中缓存...
结果 Tti 时间放在 script 之后 Tti 时间放在 script 之前
结论 <ul><li>性能的主要瓶颈在 网络传输 </li></ul>
增强型优化手段 <ul><li>支持 Smarty 的 HTML 压缩 </li></ul><ul><li>图片延时加载 </li></ul><ul><li>tangram 最优定制 </li></ul><ul><li>CSS 极限压缩 </l...
支持 Smarty 的 HTML 压缩 <ul><li>Fl </li></ul><ul><li>  -  支持模版语法的 html/css/js 检测,美化,压缩等工具 </li></ul><ul><li>  - https://github...
支持 Smarty 的 HTML 压缩
图片延时加载 1 、导航 icon 2 、 app 的 icon 3 、 feed 用户头像 4 、 feed 中图片
Tangram 最优定制 <ul><li>开发时使用全部的 tangram </li></ul><ul><li>上线前通过最优定制工具分析 JS 代码中用到的 tangram 方法 </li></ul><ul><li>将这些方法打包,替换全部的...
Tangram 最优定制 http://fe.baidu.com/welefen/tangram-codesearch/codesearch.html
CSS 极限压缩 <ul><li>CSS 文件下载过程中页面空白 </li></ul><ul><li>CSS 文件大小直接影响页面白页的时间 </li></ul><ul><li>CSS 中的 class 名字一般都是语义话,比较长 </li><...
CSS 极限压缩 <ul><li>通过工具分析 HTML 里用到的 CSS </li></ul><ul><li>JS 使用 data-class=“cls1 cls2” 的方式 </li></ul><ul><li>建立压缩字典 </li></u...
CSS 极限压缩
CSS 极限压缩带来的问题 <ul><li>对于无跨模块引用 css 的有效 </li></ul><ul><li>目前很多 css 在 js 里用到,之前没有使用 data-class 的方式,所以该功能暂时没有开启 </li></ul><ul...
基于用户行为的分析优化 <ul><li>鼠标移动行为 </li></ul><ul><li>鼠标点击行为 </li></ul><ul><li>交互行为 </li></ul><ul><li>数据分析的加载方式 </li></ul>
鼠标移动行为 <ul><li>鼠标移动行为 </li></ul><ul><li>-  用户鼠标移动到模块内,加载模块扩展的 js 和 css </li></ul>
鼠标点击行为
交互行为 – 编辑模式
数据分析的加载方法 <ul><li>Feed 在首屏占有 feed 的用户只有 13% </li></ul><ul><li>首次只加载发送 feed ajax 请求的 js </li></ul><ul><li>用户滚屏到 feed 时并行加载异...
优化历程
当前状态
当前状态
更多的优化 <ul><li>用户网速测试 </li></ul>
更多的优化 <ul><li>监控平台支持 abtest 模式性能监控 </li></ul><ul><li>考虑对慢网速的用户将外链的 css 放在搜索框后面 </li></ul><ul><li>考虑继续拆解 JS 基础库,减少初始化加载文件大小...
优化 <ul><li>性能优化,永无止境 </li></ul>
Q&A <ul><li>Q&A </li></ul>
Upcoming SlideShare
Loading in …5
×

百度新首页性能优化

6,136 views
6,013 views

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,136
On SlideShare
0
From Embeds
0
Number of Embeds
4,588
Actions
Shares
0
Downloads
46
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

百度新首页性能优化

  1. 1. 新首页性能优化 李成银 2011-12-22
  2. 2. 性能的重要性 <ul><li>百度的首页 </li></ul><ul><li>互联网用户的入口 </li></ul><ul><li>传统首页非常快 (560ms) </li></ul><ul><li>性能对产品的影响 </li></ul>
  3. 3. 性能对产品的影响
  4. 4. 性能优化的前提 <ul><li>监控 </li></ul><ul><ul><li>性能监控平台 (http://fe.baidu.com/wpo) </li></ul></ul>
  5. 5. 性能监控平台 <ul><li>通过 JS 在页面埋点,收集页面在 head 、 tti 、 dom 、 load 等时段的时间情况 </li></ul><ul><li>发送到 og 平台,运算后在性能监控平台进行多维度的展现 </li></ul><ul><li>包括:平均时间、时间段、浏览器、省份、运营商、耗时、趋势等 </li></ul>
  6. 6. 性能监控平台
  7. 7. 性能监控平台
  8. 8. 性能监控平台
  9. 9. 优化的目标
  10. 10. 优化手段 <ul><li>常规优化手段 </li></ul><ul><li>增强型优化手段 </li></ul><ul><li>基于用户行为分析的优化手段 </li></ul>
  11. 11. 常规优化手段 <ul><li>静态资源外链、合并、压缩 </li></ul><ul><li>背景图片优化 </li></ul><ul><ul><li>Png 使用 pngcrush </li></ul></ul><ul><ul><li>Gif 使用 gifsicle </li></ul></ul><ul><ul><li>Jpeg 使用 jpegtran </li></ul></ul><ul><li>静态资源上 CDN </li></ul><ul><li> - 可以提速 20% 左右 </li></ul>
  12. 12. 常规优化手段 <ul><li>静态资源设置强缓存 </li></ul><ul><li> - 命中强缓存 82.4% </li></ul><ul><li> - 命中弱缓存 3.4% </li></ul><ul><li> - 未命中缓存 14.2% </li></ul><ul><li>使用 css sprites </li></ul><ul><li>… . </li></ul>
  13. 13. 结果 Tti 时间放在 script 之后 Tti 时间放在 script 之前
  14. 14. 结论 <ul><li>性能的主要瓶颈在 网络传输 </li></ul>
  15. 15. 增强型优化手段 <ul><li>支持 Smarty 的 HTML 压缩 </li></ul><ul><li>图片延时加载 </li></ul><ul><li>tangram 最优定制 </li></ul><ul><li>CSS 极限压缩 </li></ul>
  16. 16. 支持 Smarty 的 HTML 压缩 <ul><li>Fl </li></ul><ul><li> - 支持模版语法的 html/css/js 检测,美化,压缩等工具 </li></ul><ul><li> - https://github.com/welefen/fl </li></ul><ul><li>上线前编译时进行 </li></ul><ul><li> - 不影响开发方式 </li></ul><ul><li>gzip 后减少 5% </li></ul>
  17. 17. 支持 Smarty 的 HTML 压缩
  18. 18. 图片延时加载 1 、导航 icon 2 、 app 的 icon 3 、 feed 用户头像 4 、 feed 中图片
  19. 19. Tangram 最优定制 <ul><li>开发时使用全部的 tangram </li></ul><ul><li>上线前通过最优定制工具分析 JS 代码中用到的 tangram 方法 </li></ul><ul><li>将这些方法打包,替换全部的 tangram </li></ul><ul><li>YUI 压缩后由 76k -> 29K, 减小 62% </li></ul><ul><li>Gzip 后由 25K -> 9.8K, 减小 61% </li></ul>
  20. 20. Tangram 最优定制 http://fe.baidu.com/welefen/tangram-codesearch/codesearch.html
  21. 21. CSS 极限压缩 <ul><li>CSS 文件下载过程中页面空白 </li></ul><ul><li>CSS 文件大小直接影响页面白页的时间 </li></ul><ul><li>CSS 中的 class 名字一般都是语义话,比较长 </li></ul><ul><li>同时 HTML 和 JS 中引用的地方也要将长名字写一份 </li></ul>
  22. 22. CSS 极限压缩 <ul><li>通过工具分析 HTML 里用到的 CSS </li></ul><ul><li>JS 使用 data-class=“cls1 cls2” 的方式 </li></ul><ul><li>建立压缩字典 </li></ul><ul><li>压缩 HTML 和 CSS 对应的 class </li></ul><ul><li>同时可以去除冗余的 css </li></ul>
  23. 23. CSS 极限压缩
  24. 24. CSS 极限压缩带来的问题 <ul><li>对于无跨模块引用 css 的有效 </li></ul><ul><li>目前很多 css 在 js 里用到,之前没有使用 data-class 的方式,所以该功能暂时没有开启 </li></ul><ul><li>不过去除了冗余的 css 达 2K 多 (gzip 前 ) </li></ul>
  25. 25. 基于用户行为的分析优化 <ul><li>鼠标移动行为 </li></ul><ul><li>鼠标点击行为 </li></ul><ul><li>交互行为 </li></ul><ul><li>数据分析的加载方式 </li></ul>
  26. 26. 鼠标移动行为 <ul><li>鼠标移动行为 </li></ul><ul><li>- 用户鼠标移动到模块内,加载模块扩展的 js 和 css </li></ul>
  27. 27. 鼠标点击行为
  28. 28. 交互行为 – 编辑模式
  29. 29. 数据分析的加载方法 <ul><li>Feed 在首屏占有 feed 的用户只有 13% </li></ul><ul><li>首次只加载发送 feed ajax 请求的 js </li></ul><ul><li>用户滚屏到 feed 时并行加载异步数据、 JS 文件、 CSS 文件 </li></ul>
  30. 30. 优化历程
  31. 31. 当前状态
  32. 32. 当前状态
  33. 33. 更多的优化 <ul><li>用户网速测试 </li></ul>
  34. 34. 更多的优化 <ul><li>监控平台支持 abtest 模式性能监控 </li></ul><ul><li>考虑对慢网速的用户将外链的 css 放在搜索框后面 </li></ul><ul><li>考虑继续拆解 JS 基础库,减少初始化加载文件大小 </li></ul><ul><li>考虑使用 performance api 拿到更多的性能数据 </li></ul><ul><li>… </li></ul>
  35. 35. 优化 <ul><li>性能优化,永无止境 </li></ul>
  36. 36. Q&A <ul><li>Q&A </li></ul>

×