[學(xué)習(xí)]網(wǎng)站性能及客戶體驗(yàn)分析

1、Roadtrainning.com網(wǎng)站前端性能分析,,ROAD TRAINNING,網(wǎng)站:www.roadtrainning.com論壇:www.roadtrainning.com/bbs,主題,Part 1 網(wǎng)站性能的意義Part 2 外部性能分析工具介紹Part 3 知名互聯(lián)網(wǎng)網(wǎng)站當(dāng)前現(xiàn)狀Part 4 改進(jìn)建議、意見(jiàn)收集、反饋,速度 VS 功能？,速度與功能，哪個(gè)更重要？網(wǎng)站最基本的東西是什么？ 內(nèi)

2、容再豐富的網(wǎng)站，如果慢到無(wú)法訪問(wèn)也是毫無(wú)意義的；SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭； UE設(shè)計(jì)的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談,網(wǎng)站速度與收入,n500ms20%(google)n400ms5%~9%(yahoo!)n100ms1%(amazon）500 ms slower = 20% drop in traffic (Google)100 ms slower = 1% drop in sale

3、s (Amazon),網(wǎng)站速度與收入,網(wǎng)站性能與收入Amazon: every 100 ms increase in load time of Amazon.com decreased sales by 1% . Google：a change in a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decrease

4、d traffic and ad revenues by 20%,網(wǎng)站速度與用戶流失,Visitor Loss vs Page Load Time,Web性能優(yōu)化法則,,Web性能優(yōu)化法則,,第一部分 外部分析工具介紹,國(guó)內(nèi)性能分析工具—基調(diào)系統(tǒng)介紹,1.1 外部工具 基調(diào)介紹,1. 什么是基調(diào)？2. 基調(diào)能做什么？3. 基調(diào)如何使用？,1.1.1 什么是基調(diào),基調(diào)網(wǎng)絡(luò)成立于2007 年,是國(guó)內(nèi)最大的互聯(lián)網(wǎng)用戶體

5、驗(yàn)監(jiān)測(cè)服務(wù)商?；{(diào)網(wǎng)絡(luò)擁有最大的遍及全國(guó)各地的監(jiān)測(cè)網(wǎng)絡(luò),覆蓋了全國(guó)100 多個(gè)城市的數(shù)據(jù)中心及數(shù)萬(wàn)個(gè)人終端用戶。,1.1.2 基調(diào)能做什么？,通過(guò)基調(diào)監(jiān)測(cè)網(wǎng)絡(luò)可以監(jiān)測(cè)出目標(biāo)網(wǎng)站在不同時(shí)間、不同區(qū)域、不同運(yùn)營(yíng)商的網(wǎng)民訪問(wèn)的速度、可用性等用戶體驗(yàn)數(shù)據(jù)能實(shí)時(shí)生成個(gè)性化的報(bào)表，以供決策者和運(yùn)維管理者及時(shí)掌握網(wǎng)站的性能、可用性等各項(xiàng)表現(xiàn)，進(jìn)而為優(yōu)化調(diào)整提供準(zhǔn)確的決策依據(jù)。,1.1.3 基調(diào)如何使用,登陸： rpc.networkbench

6、.com,1.1.3 基調(diào)如何使用,由故障開(kāi)始。。。,國(guó)際站被攻擊,,ChinaCache CDN故障,,1.1.3 基調(diào)如何使用,登陸后界面,任務(wù)選擇,,性能曲線,,時(shí)間選擇,,第二部分 知名互聯(lián)網(wǎng)網(wǎng)站當(dāng)前現(xiàn)狀,新浪，網(wǎng)易，騰訊，搜狐 競(jìng)爭(zhēng)對(duì)手—B2B，B2C網(wǎng)站B2B對(duì)手：慧聰網(wǎng)，環(huán)球資源網(wǎng)，中國(guó)制造B2C對(duì)手：淘寶，京東，當(dāng)當(dāng)，新蛋,阿里巴巴國(guó)際站,,3.1 門戶網(wǎng)站對(duì)比,第四部分：

7、改進(jìn)建議,1. 頁(yè)面性能評(píng)估工具Yahoo! --Yslow雅虎的頁(yè)面優(yōu)化34法則，Yslow選取了能量化的22條Google --Page Speed功能同Yslowhttp://code.google.com/intl/zh-CN/speed/page-speed/download.html2. 改進(jìn)建議。,4.1 工具評(píng)估結(jié)果-中文站,1. Yahoo Yslow結(jié)果,4.1 工具評(píng)估結(jié)果-中文站,2. Googl

8、e Page Speed,4.1 工具評(píng)估結(jié)果-國(guó)際站,Yahoo Yslow—國(guó)際站首頁(yè),4.1 工具評(píng)估結(jié)果-國(guó)際站,Google-Page Speed,4.1 工具評(píng)估結(jié)果-offer detial,,4.1 工具評(píng)估結(jié)果,國(guó)際站offer detail,4.2 改進(jìn)建議,1. 針對(duì)中文站首頁(yè)首頁(yè)大小 建議500KB以內(nèi)頁(yè)面元素 建議70個(gè)以內(nèi)首頁(yè)域名數(shù)量 建議控制在5個(gè)以內(nèi)圖片，CSS,JS的過(guò)期時(shí)間問(wèn)題。CSS、JS

9、的數(shù)量問(wèn)題，盡可能的整合，減少請(qǐng)求次數(shù)。,4.2 改進(jìn)建議,Offer detailCSS,JS的數(shù)量眾多，建議css，js的數(shù)量控制在5個(gè)以內(nèi)頁(yè)面元素眾多。僅僅一個(gè)detail頁(yè)面，其元素個(gè)數(shù)都趕上首頁(yè)了，建議嚴(yán)格控制頁(yè)面元素。,參考 優(yōu)化對(duì)比,,,問(wèn)答時(shí)間,評(píng)分規(guī)則,* Make Fewer HTTP Requests * Use a Content Delivery Network * Add an Expires

10、Header * Gzip Components * Put CSS at the Top * Move Scripts to the Bottom * Avoid CSS Expressions * Make JavaScript and CSS External * Reduce DNS Lookups * Minify JavaScript* Avoid Redirects * Remove Duplicate