網頁加載速度優化的一些技巧

不管你是不是相信,在最近的幾年裏,互聯網網頁的大小已經顯著增大了。由HTTPArchive研究得出的結果表明,目前平均一個頁面的大小是1.25M。對於擁有寬帶的用戶來說,可能並不是一個問題。但是對於那些網速並不理解的用戶來說,可能會是一個非常頭疼的問題。

首先我們看一個頁面內容大小的餅圖:

那麼如何優化你的網頁呢?

優化圖片

這個絕對是顯而易見的,可以看到圖片佔據的頁面內容分量最重。在現代網頁設計中,圖片絕對佔據了大部分的內容。你需要針對你的頁面重新定義圖片大小。這能夠有效地幫助你減少頁面大小。而且,這裏有很多的功能能夠幫助你針對圖片減肥,例如,Smush.itTinyPNG

壓縮CSS和Javascript代碼

有效地壓縮CSS和javascript代碼能夠有效地減少頁面大小,你可以刪除空格優化代碼。當然,壓縮代碼對於代碼閱讀不是非常有用,但是一般作爲產品環境來說,我們通過這種方式可以有效地減少頁面加載時間。

避免使用@import

@import CSS語法允許你加載其它的CSS文件。有時間非常有幫助,但是它並不是和主文件一起下載的,所以可能會增加頁面加載時間。建議使用link標籤,這樣會更加高效。

減少HTTP請求次數

減少HTTP請求次數可以幫助你有效的增加網站加載速度。你可以使用如下方式:

1.  融合文件

將不同的樣式表文章合成一個文件可以減少http請求的次數。同樣對於javascript來說也適用。

2. 使用CSS sprites

使用sprites可以幫助你把多個圖片文件放置到一個文件裏,這樣可以減少圖片下載的次數。

利用瀏覽器緩存

可能你的網站中包含了一些並不常常變化的文件。例如,圖片,CSS,javascript等等。如果讓瀏覽器來緩存文件的話可以幫助你增加網頁加載速度。通常我們使用web服務器的配置來達到效果,如下:

比較簡單的方式是更新服務器的.htaccess文件。

幫助你測試網頁加載速度的工具

1. pagespeed

pagespeed是來自google的一個工具,可以幫助你分析web頁面並且告訴你如何優化來提高效率。當然,你可以作爲chrome的擴展來使用。

2. speed tracer

另外一個來自於google的工具,允許你更深層次的查看頁面性能。

3. YSLOW

一個瀏覽器的擴展,和pagespeed非常類似,擁有頁面評分和等級。並且給你一些相關的推薦和解決方案

4. developer tools

很多瀏覽器例如,chrome和firefox都擁有自己內建的性能優化工具。可以幫助你瞭解頁面加載的情況。

總結

在這篇文章中,我們介紹了相關優化頁面加載的技巧,希望對於大家有所幫助。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章