网站优化-首屏时间

2,418 views

Published on

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,418
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

网站优化-首屏时间

  1. 1. 网站性能优化 分享一<br />— 关于首屏时间<br />
  2. 2. 这是为神马<br />都不是浮云<br />老齐:团购导航打开好慢!老周:游戏浏览器好慢!有白屏!XX童鞋:360导航打开需要10秒XXVP:能否再快一点 再优化一些<br />
  3. 3. 这究竟是为什么呢,我在公司没感觉到慢啊。<br />
  4. 4. 首先考虑,什么是慢???<br />通常用户所感知的慢<br />是指网站载入时空白时间长。<br />
  5. 5. 我感觉不出慢的原因可能有:<br />公司网络太好了 是XX光纤<br />伟大的帝都离机房特别近<br />我感知的都是缓存!<br />的确不慢,是对方的网络环境较差<br />RPWT 木有感知<br />幸好,我们有无线网卡。换上无线网卡来测试看看<br />
  6. 6. 果然真是慢! 白屏时间长!首屏时间长!<br />看一下QQ TAOBAO的国内性能指数<br />http://www.networkbench.com/?_m=ranklist_v3<br />
  7. 7. 评测网站性能指标NO.1<br />首屏时间:指网站在浏览器第一屏区域被充满所需时间,反映了用户在打开网站第一时间的感觉性能。<br />通常一个网站,如果首屏时间在5秒以内是比较优秀的,10秒以内是可以接受的,10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。<br />
  8. 8. 首屏时间影响因素<br />a. 页面落在首屏部分的页面结构,包括页面内容大小、图片大小、JS外链文件及CSS外链文件、调用第三方内容、层次结构等都会直接影响首屏时间。<br />b. 网络因素,评定的指标有:DNS解析时间,建立连接时间,SSL握手时间,发出请求时间,重定向时间,第一个包时间,剩余包时间,内容下载时间。<br />c. 其他因素,比如Javascript脚本运行时间。<br />
  9. 9. 我们优化的目标:减少首屏时间<br />那么,怎么分析造成首屏时间过长的具体原因呢?<br />
  10. 10. 发现影响首屏时间的相关问题 <br />HTTP数据包嗅探<br />记录HTTP请求形成的瀑布图<br />分析HTTP请求间的顺序<br />分析单个请求的内容和时间线 (域名解析,建立连接,发送请求,等待响应,接收数据)<br />单机工具:<br />HTTPWatch<br /> Firebug<br />联网工具:<br /> www.webpagetest.org<br />
  11. 11. 分析HTTP瀑布图<br />单个域名HTTP1.1请求并发数<br />IE6,7 为2个,IE8 为6个, Firefox 3+为6个<br />分析工具: WebPagetest IE7<br />分析案例 <br />tuan.360.cn <br />game.360.cn/?/ge/<br />hao.360.cn<br />
  12. 12. Tuan.360.cn (chicago IE7 DSL)<br />http://www.webpagetest.org/result/110303_5T_34S0/1/details/<br />1 IE7同一个域名最多2个并发请求<br />2 do.min.js的执行阻塞其他下载<br />3 Jquery的并行请求不阻塞其他下载<br />4 页面请求没有Keep-live<br />
  13. 13. game.360.cn/?/ge/ (chicago IE7 DSL)<br />http://www.webpagetest.org/result/110303_AV_34V9/<br />
  14. 14. Hao.360.cn (chicago IE7 DSL)<br />http://www.webpagetest.org/result/110303_06_34WK/<br />1 页面请求有KEEP-ALIVE<br />
  15. 15. 当我们无法改变用户的网络环境时<br />DNS lookup 域名解析耗时<br />加强DNS服务器的规划与部署<br />建立连接<br />WEB服务的规划与部署,使用CDN,开启keep-alive<br />等待响应<br />减小服务端执行耗时,使用chunked<br />发送请求 接收数据<br />这个和用户所在的网络环境极其相关<br />在HTTP响应头及内容中做优化工作<br />
  16. 16. 为了让浏览器尽早渲染的一些经验<br />减少<head>内的CSS的请求,1个最佳<br />生产环境的CSS避免使用@import<br />首屏的页面结构不要过于复杂,CSS不要使用expression,selector注意优化<br />首屏中避免JS的请求<br />延迟首屏交互代码的执行<br />服务端进行请求可缓存的相关设置<br />服务端启用GZIP压缩<br />避免使用IFRAME <br />
  17. 17. 更深入的改进点<br />静态文件放置在CDN <br />静态文件采用独立域名,cookie-free Domain<br /> img.qihoo.com  s.qhimg.com<br />图像优化 (大题目)<br />信息量的大页面使用 chunked<br />公司级的缓存策略(需要代码级公用)<br />结构的表现采用平稳过渡,即使背景图片没有下载完成,依然可以有配色区分内容。<br />
  18. 18. 讨论时间 <br />下次优化分享:图像优化<br />
  19. 19. Thanks All<br />irideas@gmail.com<br />2011.3.3<br />

×