【案例1】人才網站首頁加載速度的優化全過程

應朋友之托,對大南寧人才網(0771rc.net)首頁加載速度進行優化。

先借工具查查有哪些需要優化。

有哪些工具呢?

google的page speed就是我常用的工具之一。覺得蠻好用,推薦一下。

安裝

1.安裝FIREFOX

2.安裝FIREFOX FIREBUG

3.安裝page speed

正式開刀

1.打開FIREFOX,輸入南寧人才網URL地址 0771rc.net

2.打開FIREFOX-》TOOL-》FIREBUG

3.在FILEBUG窗口,切換到PAGE SPEED選項卡,點擊performance開始分析

4.一會就分析完瞭,有用的東西立馬呈現在我們面前

結果分析

1.學會看符號,這裡有三種:嘆號,立三角,對勾。

嘆號表示完全沒優化的,級別很高。

立三角表示已經有優化,但還有可提高。

對勾表示已經優化過瞭,也就是OK瞭。

以上符號理解是通俗的理解,我覺得隻要懂這個意思就行瞭。

針對優化

1.Enable gzip compression

使用gzip壓縮

下面一句話還會告訴你使用這個優化選項可以讓你節約多少時間成本。

Compressing the following resources with gzip could reduce their transfer size by about two thirds(~101.8kb)。

2.Leverage browser caching

讓瀏覽器緩存文件

這個選項下面會列出需要設置緩存過期時間的文件列表,隻有設置緩存過期時間之後,瀏覽器才會緩存列表中的這些文件。

3.Parallelize downloads across hostnames

負載平衡文件的下載主機來源

這個選項如果你有多個服務器就可以把文件分散在各個服務器上瞭。也就是把壓力分攤瞭。

後面同樣會跟著一個列表。

4.Minify javascript

縮小JS文件

後面會緊跟一句話告訴你有多大的JS文件,縮小後可以節省多少

There is 11.6kb worth of javascript.minifying could save 2.4kb(20.6% reduction)

5.Specify image dimensions

指定圖像的尺寸

這個很多程序員都忽略掉瞭。以為隻要頁面效果達到瞭就OK,都沒太在意設置第張圖片的尺寸。

為什麼要設置尺寸?

其實呢,如果沒設置尺寸,瀏覽器解析時,都要計算圖片的尺寸。

設置瞭尺寸,自然就省瞭這一步。像在大南寧人才網這種人才網站上,圖片廣告隻會

越來越多,如果圖片不指定尺寸,帶來的效果差異還是很大的。

6.remove unused css

移除沒用到的CSS

這個在網站發佈時應該檢查有沒有沒用到的CSS文件,JS文件。

嘆號和立三角的優化建議就以上這些瞭。針對這些優化就可將頁面呈現速度再次提高。

現在打開大南寧人才網的首頁隻要不到0.01秒

希望對各位從事WEB開發的朋友有所幫助。

後面還會推出一個系列的【案例】文章。

做更好的WEB體驗。