前端系統分析

前端系統分析

 

一 速度與功能，哪一個更重要
二 網站性能與收入
三 網站速度與用戶流失
四 Web性能優化法則
五 國內性能分析工具—基調系統介紹
六 國際站的優化實踐
七 改進建議
八 評分規則及優化


一  速度與功能，哪一個更重要

1.網站最基本的東西是什麼？

內容再豐富的網站，若是慢到沒法訪問也是毫無心義的；

• SEO作的再好的網站，若是搜索蜘蛛抓不到也是白搭；

• UE設計的再人性化的網站，若是用戶連看都看不到也是空談

2.網站速度與收入

• n500ms20%(google)

• n400ms5%~9%(yahoo!)

• n100ms1%(amazon）

• 500 ms slower = 20% drop intraffic (Google)

• 100 ms slower = 1% drop in sales(Amazon)

二 網站性能與收入

1. Amazon:every 100 ms increase in load time of Amazon.com decreased sales by 1% .

2.Google：achange in a 10-result page loading in 0.4 seconds to a 30-result page loadingin 0.9 seconds decreased traffic and ad revenues by 20%

三 網站速度與用戶流失

四 Web性能優化法則

性能黃金法則

　　只有10%–20%的最終用戶時間花在了下載HTML文檔上，其他的80%~90%的時間花在了下載頁面中的全部組件上
（80%-90%用戶的等待時間是來自於前端的頁面加載）

五 國內性能分析工具—基調系統介紹

 1.什麼時基調：

 

   1） 基調網絡成立於2007年,是國內最大的互聯網用戶體驗監測服務商。

   2）基調網絡擁有最大的遍佈全國各地的監測網絡,覆蓋了全國100多個城市的數據中心及數萬我的終端用戶

2.基調能作什麼？

 

 1）經過基調監測網絡能夠監測出目標網站在不一樣時間、不一樣區域、不一樣運營商的網民訪問的速度、可用性等用戶體驗數據

 2）能實時生成個性化的報表，以供決策者和運維管理者及時掌握網站的性能、可用性等各項表現，進而爲優化調整提供準確的決策依據。

登錄：rpc.networkbench.com

3. 基調如何使用：由故障開始

登錄後界面

知名互聯網網站當前現狀   

   競爭對手—B2B，B2C網站

  B2B對手：慧聰網，環球資源網，中國製造

  B2C對手：淘寶，京東，噹噹，新蛋

六 國際站的優化實踐

七 改進建議

1 . 頁面性能評估工具

Yahoo!--Yslow

– 雅虎的頁面優化34法則，Yslow選取了能量化的23條

2. Google--Page Speed

– 功能同Yslow

1. 針對中文站首頁

– 首頁大小 建議500KB之內

– 頁面元素 建議70個之內

– 首頁域名數量 建議控制在5個之內

– 圖片，CSS,JS的過時時間問題。

–CSS、JS的數量問題，儘量的整合，減小請求次數。

2.Offer detail

– CSS,JS的數量衆多，建議css，js的數量控制在5個之內

頁面元素衆多。僅僅一個detail頁面，其元素個數都遇上首頁了，建議嚴格控制頁面元素

參考 優化對比


八 評分規則及優化

－Make Fewer HTTP Requests

－Use a Content Delivery Network

－Add an Expires 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 Scripts

－ConfigureETags

－Make Ajax Cacheable
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
A.儘可能減小HTTP請求次數
  1.合併JS
  2.合併CSS文件
  3.CSS Sprites
  4.Image 圖片
  5.將圖片編碼成Base64數據嵌入網頁

B.減小阻塞次數、減小阻塞時間
  1.將CSS放在頂部   2.將JS放在底部   3.刪除重複的腳本   4.延遲加載渲染頁面不須要的腳本   5.按需異步下載腳本