提高網頁載入速度最簡單的5種方式

原文連結：http://techolics.com

網頁的載入速度是評估網站品質一個重要指標。原因在於大多數使用者能夠容忍的網頁載入時間只有幾秒，如果超出了訪客的忍受範圍他們會毫不留情地關掉你的網頁，所以網頁載入速度會極大地影響網站的流量和訪問。以下總結了幾種可以明顯提高網站載入速度的初步簡單技巧方式，如果你的網站存在載入速度慢的問題不妨與此為參考對網頁做些初步最佳化。

網頁載入提速之 - 最佳化網頁圖片檔案

你的網頁一定有圖片，載入一個網頁往往圖片的總尺寸是最大的，特別是那些顏色豐富的背景圖片和大副廣告圖片。所以一般要在同等圖片品質的情況下要儘可能地減小圖片尺寸。在Photoshop中我們可以用儲存為Web圖片的選項試一下。圖片也有幾種常用的檔案格式。如JPEG一般是用來儲存照片或全彩色圖片的，比如照片、螢幕等。GIF圖片格式的顏色要比JPEG少，適合做小圖，如製作按鈕、Logo等，另外GIF支援動態效果。PNG跟GIF比較相似，但它的尺寸較大，支援的顏色也比GIF要多，並且PNG支援背景透明。我們可以試試使用一種不同的格式儲存圖片試下，如將PNG和JPEG換成GIF試試。

網頁載入提速之 - 圖片使用height和width屬性

你會給每個圖片加上height和width屬性嗎？這兩個屬性可以讓瀏覽器在載入圖片之前就知道圖片的長和寬，並預留出指定的長寬待圖片載入後顯示。如果沒有這兩個屬性，瀏覽器還需要在讀取圖片成功後再處理一次頁面配置樣式，這無疑減慢了網頁載入速度。所以在固定圖片大小的情況下最好都使用上長和寬屬性。

網頁載入提速之 - CSS檔案壓縮瘦身

DIV+CSS是現在流利的網頁布局方式，DIV定義了元素，CSS控制顯示效果。所以往往我們會把CSS寫到另外一個或多個外部連結CSS檔案中，並且CSS檔案代碼也有很多行。我們可以使用一些CSS壓縮公用程式來刪除CSS檔案中不必要的多餘內容，如重複定義樣式、空格等來瘦身。可以嘗試使用一下CleanCSS工具來壓縮你的CSS檔案。

網頁載入提速之 - 目錄位址後加上斜杠（/）

如訪客點擊訪問這樣一個目錄位址：http://www.techolics.com/tools，去開啟這個目錄下的index.html文檔。當伺服器收到請求後它需要消耗一些時間來分析這是一個檔案還是一個目錄。但是如果我們在最後加上一個斜杠（/），伺服器就知道你是在訪問一個目錄位址，然後就直接載入預設文件index.html或index.php就行了。這樣伺服器就不用花時間來分析這個地址，也起到了一定加速的作用。

網頁載入提速之 - 整合CSS、JS檔案減少HTTP請求次數

現在的網頁都有多個圖片、CSS外部檔案連結、Javascript外部指令碼連結。所以當訪問一個網頁時瀏覽器需要多次向伺服器請求這些檔案。在請求和載入之間會產生不少的時間差。特別是一些網頁上有多個小圖片、表徵圖按鈕的網頁，有多少圖片，瀏覽器就需要請求多少將這些小檔案，多將請求這些小圖片檔案將明顯影響網頁的載入速度。所以我們應該儘可能將小圖片拼合一個PNG大圖片上，然後通過座標來顯示表徵圖。一次請求一個大圖片比多次請求小圖片速度要快不少。同樣，最好將CSS和Javascript儘可能地整合到一個檔案中都有助於加快網頁載入速度。

寫在最後，這裡只提到了一些簡單的初級皮毛，因為這些是最容易做的最佳化方式。下一步我們還需要考慮網頁代碼（php或aspx）是否最佳化高效、伺服器的響應速度、伺服器頻寬是否夠用等等更深層的因素。但如果將上面幾點做到位，相信網頁加速速度會提高不少。所以如果你有更多經驗請在討論區留言分享給大家吧。