DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 提高網頁加載速度的初步簡單技巧方式
提高網頁加載速度的初步簡單技巧方式
編輯:前端技巧     
網頁的加載速度是評估網站質量一個重要指標。原因在於大多數用戶能夠容忍的網頁加載時間只有幾秒,如果超出了訪客的忍受范圍他們會毫不留情地關掉你的網 頁,所以網頁載入速度會極大地影響網站的流量和訪問。以下總結了幾種可以明顯提高網站加載速度的初步簡單技巧方式,如果你的網站存在載入速度慢的問題不妨 與此為參考對網頁做些初步優化。

網頁加載提速之 – 優化網頁圖片文件
你的網頁一定有圖片,加載一個網頁往往圖片的總尺寸是最大的,特別是那些顏色豐富的背景圖片和大副廣告圖片。所以一般要在同等圖片質量的情況下要盡可能地 減小圖片尺寸。在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.jb51.net/web,去打開這個目錄下的index.html文檔。當服務 器收到請求後它需要消耗一些時間來分析這是一個文件還是一個目錄。但是如果我們在最後加上一個斜槓(/),服務器就知道你是在訪問一個目錄地址,然後就直 接加載默認文檔index.html或index.php就行了。這樣服務器就不用花時間來分析這個地址,也起到了一定加速的作用。

網頁加載提速之 – 整合CSS、JS文件減少HTTP請求次數
現在的網頁都有多個圖片、CSS外部文件鏈接、Javascript外部腳本鏈接。所以當訪問一個網頁時浏覽器需要多次向服務器請求這些文件。在請求和加 載之間會產生不少的時間差。特別是一些網頁上有多個小圖片、圖標按鈕的網頁,有多少圖片,浏覽器就需要請求多少將這些小文件,多將請求這些小圖片文件將明 顯影響網頁的加載速度。所以我們應該盡可能將小圖片拼合一個PNG大圖片上,然後通過坐標來顯示圖標。一次請求一個大圖片比多次請求小圖片速度要快不少。 同樣,最好將CSS和Javascript盡可能地整合到一個文件中都有助於加快網頁載入速度。

寫在最後,這裡只提到了一些簡單的初級皮毛,因為這些是最容易做的優化方式。下一步我們還需要考慮網頁代碼(php或aspx)是否優化高效、服務器的響 應速度、服務器帶寬是否夠用等等更深層的因素。但如果將上面幾點做到位,相信網頁加速速度會提高不少
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved