Roadtrainning.com网站前端性能分析ROADTRAINNING•网站:•论坛:主题Part1网站性能的意义Part2外部性能分析工具介绍Part3知名互联网网站当前现状Part4改进建议、意见收集、反馈速度VS功能?•速度与功能,哪个更重要?–网站最基本的东西是什么?–内容再丰富的网站,如果慢到无法访问也是毫无意义的;–SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭;–UE设计的再人性化的网站,如果用户连看都看不到也是空谈网站速度与收入•n500ms20%(google)•n400ms5%~9%(yahoo!)•n100ms1%(amazon)•500msslower=20%dropintraffic(Google)•100msslower=1%dropinsales(Amazon)网站速度与收入•网站性能与收入–Amazon:every100msincreaseinloadtimeofAmazon.comdecreasedsalesby1%.–Google:achangeina10-resultpageloadingin0.4secondstoa30-resultpageloadingin0.9secondsdecreasedtrafficandadrevenuesby20%网站速度与用户流失VisitorLossvsPageLoadTimeWeb性能优化法则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!--Yslow–雅虎的页面优化34法则,Yslow选取了能量化的22条•Google--PageSpeed–功能同Yslow–•2.改进建议。4.1工具评估结果-中文站•1.YahooYslow结果4.1工具评估结果-中文站•2.GooglePageSpeed4.1工具评估结果-国际站•YahooYslow—国际站首页4.1工具评估结果-国际站•Google-PageSpeed4.1工具评估结果-offerdetial4.1工具评估结果•国际站offerdetail4.2改进建议•1.针对中文站首页–首页大小建议500KB以内–页面元素建议70个以内–首页域名数量建议控制在5个以内–图片,CSS,JS的过期时间问题。–CSS、JS的数量问题,尽可能的整合,减少请求次数。4.2改进建议•Offerdetail–CSS,JS的数量众多,建议css,js的数量控制在5个以内–页面元素众多。仅仅一个detail页面,其元素个数都赶上首页了,建议严格控制页面元素。参考优化对比问答时间评分规则•*MakeFewerHTTPRequests•*UseaContentDeliveryNetwork•*AddanExpiresHeader•*GzipComponents•*PutCSSattheTop•*MoveScriptstotheBottom•*AvoidCSSExpressions•*MakeJavaScriptandCSSExternal•*ReduceDNSLookups•*MinifyJavaScript•*AvoidRedirects•*RemoveDuplicateScripts•*ConfigureETags•*MakeAjaxCacheable整个流程优化切入谢谢!