基于網頁分析工具:
1.阿裡測
2.百度應用性能檢測中心
2.web pagetest
3.pingdom tools
4.gtmetrix
基于浏覽器分析工具:
1.chrome自帶工具f12
2.firefox插件:yslow(yahoo工具)
3.page speed(google)
(以下以分析部落格園網站為例)
首頁:
一、性能打分
a)首位元組時間
名額解釋:浏覽器開始收到伺服器響應資料的時間(背景處理時間+重定向時間)
評估方法:達标時間=dns解析時間+建立連接配接時間+ssl認證時間+100ms. 比達标時間每慢10ms減1分.
b)使用長連接配接(keep alive)
名額解釋: 伺服器開啟長連接配接後針對同一域名的多個頁面元素将會複用同一下載下傳連接配接(socket)
評估方法:伺服器是否傳回了"connection: keep-alive"http響應頭,或者浏覽器通過同一連接配接下載下傳了多個對象
c)開啟gzip壓縮
名額解釋:僅檢查文本類型("text/*","*javascript*")
評估方法:伺服器是否傳回了"transfer-encoding: gzip"響應頭。假如全部壓縮就是滿分,否則:得分=滿分x(100%-全部gzip後節省的比例%)
d)圖檔壓縮
評估方法:
對于gif - 略過
對于png - 必須是8位或更低
對于jpeg - 對比使用photoshop品質選擇50後的圖檔,尺寸超出10%以内及格,10%-50%警告,50%以上不達标
得分=滿分x(100%-圖檔重新壓縮後可以節省的比例%)
e)設定靜态内容緩存時間
名額解釋:css,js,圖檔資源都應該明确的指定一個緩存時間
評估标準:如果有靜态檔案的過期時間設定小于30天,将會得到警告
f)合并css和js檔案
名額解釋:合并js和css檔案可以減少連接配接數
評估方法:每多一個css檔案減5分,每多一個js檔案減10分
g)壓縮js
名額解釋:除了開啟gzip,使用js壓縮工具可以進行代碼級的壓縮
評估方法:js檔案會通過jsmin壓縮.如果原始檔案gzip過,jsmin處理過的檔案也會gzip後再進行對比.如果能節省>5kb或者%10的尺寸,評估失敗.如果能節省>1kb同樣會收到警告.
h)合理使用cookie
名額解釋:cookie越小越好,而且對于靜态檔案需要避免設定cookie
評估方法:隻要對靜态檔案域設定了cookie,評估失敗. 對于其他請求,cookie尺寸過大會得到警告.
二、詳情分析
i)首次探測(首次探測會清空dns緩存和浏覽器緩存),重複探測(保留首次探測的緩存,進行再次探測)。
j)頁面加載時間:從頁面開始加載到頁面onload事件觸發的時間。
k)首位元組時間:從開始加載到收到伺服器傳回資料的第一位元組的時間。
l)開始渲染時間:從開始加載到浏覽器開始渲染第一個html元素的時間。
m)speed index:
n)元素個數:頁面中包含的所有dom節點個數
o)頁面加載(包括加載時間,請求數,下載下傳總計):從頁面開始加載到onload事件觸發這個時間段内的統計資料,一般來說onload觸發代表着直接通過html引用的css,js,圖檔資源已經完全加載完畢。
p)完全加載:随着ajax應用的流行,很多資源都會通過js腳步異步加載,是以onload事件并不意味着完全加載,onload之後js可能依然在異步加載資源。完全加載的定義是:頁面onload後2秒内不再有網絡請求時刻。
q)元素瀑布圖:通過元素瀑布圖可以很直覺得到以下資訊。
i.資源的加載順序。
ii.每個資源的排隊延遲,加載過程。
iii.加載過程中cpu和貸款的變化曲線。
iv.統計出出錯請求、大圖檔請求、onload之後的請求、開始渲染之前的請求、首位元組較慢的請求及dns解析較慢的請求個數。
r)連接配接視圖展現了頁面加載過程中建立的(keep-alive)連接配接,以及通過每個連接配接所加載的資源。
三、元素分布
s)資源類型統計:css,html,image,js,other(請求數,大小)
t)資源域名統計:請求域名個數及次數
四、視圖分析
将整個網頁生成的過程以膠片視圖、視訊、截屏的形式展現出來,并提供詳細的狀态欄加載日志。
yslow:
火狐插件(自行安裝)
評分等級名額:
1.確定少量的http請求(合并js,css圖檔等)
2.使用内容分發cdn
3.設定過期的http header.設定expires header可以将腳本, 樣式表, 圖檔, flash等緩存在浏覽器的cache中。
4.使用gzip壓縮
5.将css放置html頭部
6.将javascript放置底部
7.avoid css expressions
8.使用外部引用javascript與css
9.減少dns解析
10.壓縮javascript和css
11.避免url重定向。url redirects are made using http status codes 301 and 302. they tell the browser to go to another location.
12.删除重複javascript和css
13.設定etags
<b></b>
<b>最新内容請見作者的github頁:http://qaseven.github.io/</b>
<b> </b>