Roadtrainning.com网站前端性能分析ROAD TRAINNING网站网站:www.roadtrainning.com论坛:www.roadtrainning.com/bbs主题主题Part 1 网站性能的意义Part 2外部性能分析工具介绍Part 3知名互联网网站当前现状Part 4 改进建议、意见收集、反馈速度VS功能？速度与功能，哪个更重要？ 网站最基本的东西是什么？网站最基本的东西是什么？ 内容再丰富的网站，如果慢到无法访问也是毫无意义的；内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEOSEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭；做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UEUE设计的再人性化的网站，如果用户连看都看不到也是空谈设计的再人性化的网站，如果用户连看都看不到也是空谈网站速度与收入n500ms20%(google)n400ms5%9%(yahoo!)n100ms1%(amazon）500 ms slower = 20% drop in traffic (Google)100 ms slower = 1% drop in sales (Amazon)网站速度与收入网站性能与收入Amazon:every100msincreaseinloadtimeAmazon:every100msincreaseinloadtimeofAmazon.comdecreasedsalesby1%.ofAmazon.comdecreasedsalesby1%.GoogleGoogle：achangeina10-resultpageloadingachangeina10-resultpageloadingin0.4secondstoa30-resultpageloadinginin0.4secondstoa30-resultpageloadingin0.9secondsdecreasedtrafficandadrevenues0.9secondsdecreasedtrafficandadrevenuesby20%by20%网站速度与用户流失Visitor Loss vs Page Load TimeWeb性能优化法则Web性能优化法则第一部分外部分析工具介绍国内性能分析工具基调系统介绍1.1外部工具基调介绍1.什么是基调？2.基调能做什么？3.基调如何使用？1.1.1什么是基调基调网络成立于2007年,是国内最大的互联网用户体验监测服务商。基调网络拥有最大的遍及全国各地的监测网络,覆盖了全国100多个城市的数据中心及数万个人终端用户。1.1.2基调能做什么？通过基调监测网络可以监测出目标网站在不同时间、不同区域、不同运营商的网民访问的速度、可用性等用户体验数据能实时生成个性化的报表，以供决策者和运维管理者及时掌握网站的性能、可用性等各项表现，进而为优化调整提供准确的决策依据。1.1.3基调如何使用登陆：rpc.networkbench.com1.1.3基调如何使用由故障开始。1.1.3基调如何使用登陆后界面第二部分知名互联网网站当前现状新浪，网易，腾讯，搜狐竞争对手B2B，B2C网站B2B对手：慧聪网，环球资源网，中国制造B2C对手：淘宝，京东，当当，新蛋阿里巴巴国际站3.1门户网站对比站点名称站点名称总下载字节数总下载字节数（KB）基础页面下载字基础页面下载字节数（节数（KB）页面对象数页面对象数首屏对象数首屏对象数DNS解析次数解析次数DNS解析总时间解析总时间（秒）（秒）建立连接次数建立连接次数建立连接总时间建立连接总时间（秒）（秒）DOM元素个数元素个数域名数域名数css数数js数数缓存设置缓存设置文本压缩文本压缩新浪1056.993105.98713818302.7227811.198436328726有25/62腾讯400.82148.3477121121.008305.9418731319有8/14网易1159.16496.85216042242.6486117.523429629210有23/38搜狐627.19159.5629629221.6349010.223324422513有17/33阿里巴巴中文站833.41745.24413070151.7214726.15536921618有有15/18阿里巴巴国际站556.94429.801774250.197100.721622525有有7/7第四部分：改进建议1.页面性能评估工具Yahoo!-YslowYahoo!-Yslow 雅虎的页面优化雅虎的页面优化3434法则，法则，YslowYslow选取了能量化的选取了能量化的2222条条Google-PageSpeedGoogle-PageSpeed 功能同功能同YslowYslow http:/code.google.com/intl/zh-CN/speed/page-http:/code.google.com/intl/zh-CN/speed/page-speed/download.htmlspeed/download.html2.改进建议。4.1工具评估结果-中文站1.YahooYslow结果4.1工具评估结果-中文站2.GooglePageSpeed4.1工具评估结果-国际站YahooYslow国际站首页4.1工具评估结果-国际站Google-PageSpeed4.1工具评估结果-offerdetial4.1工具评估结果国际站offerdetail4.2改进建议1.针对中文站首页首页大小首页大小 建议建议500KB500KB以内以内页面元素页面元素 建议建议7070个以内个以内首页域名数量首页域名数量 建议控制在建议控制在5 5个以内个以内图片，图片，CSS,JSCSS,JS的过期时间问题。的过期时间问题。CSSCSS、JSJS的数量问题，尽可能的整合，减少请的数量问题，尽可能的整合，减少请求次数。求次数。4.2改进建议OfferdetailCSS,JSCSS,JS的数量众多，建议的数量众多，建议csscss，js js的数量控制在的数量控制在5 5个以内个以内页面元素众多。仅仅一个页面元素众多。仅仅一个detaildetail页面，其元素个页面，其元素个数都赶上首页了，建议严格控制页面元素。数都赶上首页了，建议严格控制页面元素。参考优化对比问答时间评分规则 *MakeFewerHTTPRequests*MakeFewerHTTPRequests *UseaContentDeliveryNetwork*UseaContentDeliveryNetwork *AddanExpiresHeader*AddanExpiresHeader *GzipComponents*GzipComponents *PutCSSattheTop*PutCSSattheTop *MoveScriptstotheBottom*MoveScriptstotheBottom *AvoidCSSExpressions*AvoidCSSExpressions *MakeJavaScriptandCSSExternal*MakeJavaScriptandCSSExternal *ReduceDNSLookups*ReduceDNSLookups *MinifyJavaScript*MinifyJavaScript *AvoidRedirects*AvoidRedirects *RemoveDuplicateScripts*RemoveDuplicateScripts *ConfigureETags*ConfigureETags *MakeAjaxCacheable*MakeAjaxCacheable整个流程优化切入谢谢！