當前位置:才華齋>設計>網頁設計>

如何提升網頁載入速度

網頁設計 閱讀(1.31W)

對於那些網速並不理想的使用者來說,網頁載入過慢可能會是一個非常頭疼的問題。那麼如何提升網頁載入速度呢?隨小編一起來探討一下吧!

如何提升網頁載入速度

  一、優化圖片

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

  二、壓縮CSS和JavaScript程式碼

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

  三、避免使用@import

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

  四、減少HTTP請求次數

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

1. 融合檔案

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

2. 使用CSS sprites

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

  五、利用瀏覽器快取

可能你的網站中包含了一些並不常常變化的檔案。例如,圖片,CSS,javascript等等。如果讓瀏覽器來快取檔案的話可以幫助你增加網頁載入速度。通常我們使用Web服務器的配置來達到效果.

比較簡單的方式是更新伺服器的cess檔案。如下是程式碼:

# Enable Expirations

ExpiresActive On

# Default Expiration Time

ExpiresDefault “access plus 1 month”

# Expiration for Images

ExpiresByType image/gif “access plus 1 month”

ExpiresByType image/png “access plus 1 month”

ExpiresByType image/jpg “access plus 1 month”

ExpiresByType image/jpeg “access plus 1 month”

# Expiration for CSS

ExpiresByType text/css “access plus 1 month”

# Expiration for JavaScript

ExpiresByType application/javascript ”access plus 1 month“