應朋友之托,對大南寧人才網(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體驗。
感謝 renwo000 的投稿