提升電子商務(wù)網(wǎng)站用戶體驗(yàn)快與準(zhǔn)-潘銳

1、網(wǎng)址Jun 2011 (Brief Version)Jun 2011 (Brief Version)By 潘銳潘銳-Tommy提高電商網(wǎng)站用戶體驗(yàn)：“快”與“準(zhǔn)”Jun 2011 (Brief Version)提升用戶體驗(yàn)：快！用戶訪問(wèn)一個(gè)網(wǎng)站時(shí)，如果等待網(wǎng)頁(yè)（Landing Page）打開(kāi)的時(shí)間超過(guò)8秒，會(huì)有超過(guò)30%的用戶放棄等待。 8秒定律：網(wǎng)站首頁(yè)網(wǎng)站首頁(yè)頁(yè)面大小頁(yè)面大小頁(yè)面尺寸頁(yè)面尺寸頁(yè)面完全頁(yè)面完全打開(kāi)時(shí)間打開(kāi)時(shí)間首屏完全首屏完全打開(kāi)時(shí)間打開(kāi)時(shí)間凡客誠(chéng)品凡客誠(chéng)品0.36MB4.5屏屏（1114x3515）2.88秒秒0.64秒秒淘寶網(wǎng)淘寶網(wǎng)0.92MB4.2屏屏（1030 x324

2、7）7.36秒秒1.75秒秒京東商城京東商城1.06MB4屏屏（1230 x3107）8.48秒秒2.12秒秒夢(mèng)芭莎夢(mèng)芭莎3.42MB34屏屏（1010 x26248）27.36秒秒0.80秒秒說(shuō)明：頁(yè)面打開(kāi)時(shí)間以說(shuō)明：頁(yè)面打開(kāi)時(shí)間以1Mbps下載速率來(lái)估算下載速率來(lái)估算 頁(yè)面取樣時(shí)間：頁(yè)面取樣時(shí)間：2011年年8月月23日日提升用戶體驗(yàn)：快！要盡量將網(wǎng)頁(yè)（Landing Page）的體積控制在1.5MB以內(nèi)，頁(yè)面完全呈現(xiàn)耗時(shí)控制在5秒以內(nèi)。 結(jié)論：提升用戶體驗(yàn)：快！But how？提升用戶體驗(yàn)：快！ 壓縮大圖片文件 盡量采用矢量圖的素材與動(dòng)畫(huà)（如廣告banner flash動(dòng)畫(huà)） 1.立竿見(jiàn)

3、影的提速：圖片減肥提升用戶體驗(yàn)：快！2.優(yōu)化線路方案方案實(shí)施成本實(shí)施成本效果效果智能智能DNS雙線雙線中中可解決電信、網(wǎng)通線路用戶可解決電信、網(wǎng)通線路用戶的網(wǎng)絡(luò)訪問(wèn)速度問(wèn)題的網(wǎng)絡(luò)訪問(wèn)速度問(wèn)題BGP（多線）（多線）較高較高單單IP即可實(shí)現(xiàn)多線路快速訪即可實(shí)現(xiàn)多線路快速訪問(wèn)問(wèn)CDN中中提高訪問(wèn)速度，減少源服務(wù)提高訪問(wèn)速度，減少源服務(wù)器帶寬占用，但僅對(duì)靜態(tài)頁(yè)器帶寬占用，但僅對(duì)靜態(tài)頁(yè)面有效。面有效。BGP+CDN高高最佳方案，可將圖片等靜態(tài)最佳方案，可將圖片等靜態(tài)文件用文件用CDN發(fā)布發(fā)布提升用戶體驗(yàn)：快！3.優(yōu)化網(wǎng)站(web server)運(yùn)行環(huán)境 Linux+Nginx(+Mysql+PHP)Li

4、nux: 文件系統(tǒng)相比NTFS的讀寫(xiě)效率高很多；相比windows的安全性高；開(kāi)源軟件資源豐富Nginx：最高性能的web server（處理并發(fā)連接數(shù)最高），優(yōu)于apache、IISMysql：性價(jià)比最高，運(yùn)用普及，高性能開(kāi)源數(shù)據(jù)庫(kù)PHP：跨平臺(tái)、高性能、開(kāi)發(fā)效率高提升用戶體驗(yàn)：快！4.提升服務(wù)器效率與性能 采用內(nèi)存緩存加速響應(yīng)速度 推薦：Memcache 采用動(dòng)態(tài)負(fù)載均衡系統(tǒng)增加系統(tǒng)的伸縮性與魯棒性推薦：LVS提升用戶體驗(yàn)：快！提升用戶體驗(yàn)：快！LVS拓?fù)鋱D大型站點(diǎn)案例：大型站點(diǎn)案例：騰訊、百度、騰訊、百度、新浪、網(wǎng)易、新浪、網(wǎng)易、攜程、優(yōu)酷、攜程、優(yōu)酷、等。等。5.及時(shí)擴(kuò)容 平均帶寬占用

5、達(dá)到理論上限的70%，需要立即考慮帶寬擴(kuò)容。 存儲(chǔ)設(shè)備需監(jiān)控空間使用速度，80%預(yù)警。提升用戶體驗(yàn)：快！用戶訪問(wèn)一個(gè)網(wǎng)站時(shí)，停留在網(wǎng)頁(yè)上視覺(jué)焦點(diǎn)的位置符合類(lèi)似F型密度分布，即用戶更多注意的是更靠頁(yè)面上部與左側(cè)的內(nèi)容。F型分布定律：提升用戶體驗(yàn)：準(zhǔn)！提升用戶體驗(yàn)：準(zhǔn)！左圖為某電商網(wǎng)站改版前的首頁(yè)焦點(diǎn)熱圖，發(fā)現(xiàn)的問(wèn)題：1.左上角黃金位置：用戶登陸信息框2.分類(lèi)導(dǎo)航區(qū)置于1.5屏以下3.用戶的實(shí)際（鼠標(biāo)）行為焦點(diǎn)不符合F型分布：說(shuō)明該網(wǎng)頁(yè)內(nèi)容布局結(jié)構(gòu)對(duì)新訪客的易用性差提升用戶體驗(yàn)：準(zhǔn)！電商網(wǎng)站要將對(duì)用戶導(dǎo)購(gòu)作用更大的內(nèi)容，放置在頁(yè)面（Landing Page）更加靠頂部與左側(cè)的位置。 結(jié)論：提升用戶體驗(yàn)：準(zhǔn)！提升用戶體驗(yàn)：準(zhǔn)！1.合理首頁(yè)的布局示意圖：推薦參考首頁(yè)布局提升用戶體驗(yàn)：準(zhǔn)！2.SEM、推廣專(zhuān)題landing page的布局：（略）推薦參考nala頁(yè)面用圖說(shuō)話：能用圖來(lái)表達(dá)就不要用文字。圖片包括：對(duì)比圖、細(xì)節(jié)圖、原理圖、實(shí)驗(yàn)圖、測(cè)試圖、注解圖等。3.購(gòu)物中的關(guān)聯(lián)推薦提升用戶體驗(yàn)：準(zhǔn)！A.基于產(chǎn)品分析基于產(chǎn)品分析向上營(yíng)銷(xiāo)向上營(yíng)銷(xiāo)是基于同類(lèi)產(chǎn)品線的升級(jí)或優(yōu)化產(chǎn)品的推薦。交叉營(yíng)銷(xiāo)交叉營(yíng)銷(xiāo)是基于相似但不同類(lèi)的產(chǎn)品的推薦。 提升用戶體驗(yàn)：準(zhǔn)！B.基于用戶行為分析基于用戶行為分析（data mining）支持度 = (G/U) x100%置信度 =