最佳化網站載入速度

標籤：

綜合來講：從圖片，js，css和請求數著手。

1、合并Js檔案和CSS

將JS代碼和CSS樣式分別合并到一個共用的檔案，這樣不僅能簡化代碼，而且在執行JS檔案的時候，如果JS檔案比較多，就需要進行多次“Get”請求，延長載入速度，將JS檔案合并在一起後，自然就減少了Get請求次數，提高了載入速度。

2、Sprites圖片技術

Spriting是一種網頁圖片應用處理方式，它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然後利用CSS技術展現出來。這樣一來， 當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網頁的圖片大小，並且利用CSSSprites能很好地減少網頁的 http請求，從而大大的提高頁面的效能。CSSSprites在國內很多人叫css精靈，很早就有了，在很多大型網站都有用到，特別是一些所有頁面都存 在的表徵圖用得比較多，很好的提升載入速度。

3、壓縮文本和圖片

壓縮技術如gzip可以有效減少頁面載入的時間。包括HTML，XML，JSON(JavaScript對象符號)，JavaScript和CSS 等，壓縮率都可以在大小70%左右，這樣就減少了請求這些檔案的下載時間。文本壓縮用得比較多，一般直接在空間開啟就行，而圖片的壓縮就比較隨意，很多都是直接上傳，其實還有很大的壓縮空間。

4、圖片格式最佳化

不恰當的映像格式是一種極為常見的減慢載入速度的罪魁禍首。正確的圖片格式可以讓圖片縮小數倍，如果儲存為最佳格式。可以節省大量頻寬，減少處理時間時間，大大加快頁面載入速度，這是一種很常見的做法。即：不同格式的圖片占的大小不同。

5、使用 Progressive JPEGs

ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名為“進階JPEG”。在建立進階JPEG檔案時，資料是這樣安排的：在裝入 映像時，開始只顯示一個模糊的映像，隨著資料的裝入，映像逐步變得清晰。它相當於交織的GIF格式的圖片。進階JPEG主要是考慮到使用數據機的慢速 網路而設計的，快速網路的使用者通常不會體會到它和正常JPEG格式圖片的區別。對於網速比較慢的使用者，這無疑有很好的體驗。

6、精簡代碼

這個可以說是最直接的一個方法，也是用得比較多的，對網頁代碼進行瘦身，刪除不必要的沉冗代碼，比如不必要的空格、分行符號、注釋等，包括JS代碼中的無用代碼也需要清除。其中對於注釋代碼的清除可能有些人存在誤區，甚至有的在裡面堆砌關鍵詞。

7、消極式載入和執行非必要指令碼

網頁中有很多指令碼是在頁面完全載入完前都不需要執行的，可以消極式載入和執行非必要指令碼。這些指令碼可以在onload事件之後執行，避免對網頁上重要內容的呈 現造成影響。這些指令碼可能是你自己網頁的指令碼，往往更多的是一些第三方指令碼，這樣的有很多，比如評論、廣告、智能推薦、百度雲圖、分享等等，這些完全可以等主體內容載入完後再執行。

8、使用AJAX

AJAX即“Asynchronous Javascript +XML“，是指一種建立互動式網頁應用的網頁開發技術。通過在後台與伺服器進行少量資料交換，AJAX可以使網頁實現非同步更新。這意味著可以在不重新加 載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁(不使用AJAX)如果需要更新內容，必須重載整個網頁面。

9、用apache mod_expires緩衝靜態檔案

編輯Apache的httpd.conf：
#LoadModule expires_module modules/mod_expires.so

將該行前面的”#”字型大小刪除,然後將”httpd.conf”設定檔儲存後,重新啟動Apache來使這個更新生效。

瀏覽器緩衝可以減少HTTP請求，從而反過來提高網站的載入速度。下面就是如何利用瀏覽器緩衝的程式碼範例：

 <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule>

程式修正方法

• 在每次更改靜態內容（css,js等）時，對名稱也變更。附加版本號碼或Build編號。
• <link rel="stylesheet" type="text/css" href="/html/std.css?v=2.5.3.text" />
• <link rel="stylesheet" type="text/css" href="html/std.css?_v=804120090827100441.css" />

雖然在html頁面裡需要添加版本號碼，但是伺服器端實際的css檔案名稱仍然為std.css。添加版本號碼之後，每次更新css或者js使用者不用CTRL+F5重新整理，就可以看到修改後的頁面。

10、內容分髮網絡（CDN）

內容分髮網絡（CDN）是位於不同地理位置的伺服器組成的網路。每個伺服器都擁有所有網站的檔案副本。要是有網站訪問者請求檔案和網頁時，就可以直接從就近的網站伺服器發送過來（也可以是從負載最小的伺服器）。

盡量減少HTTP請求

還有一種簡單的最佳化網頁速度的方法是，減少HTTP請求。當一個網站一下子收到太多的HTTP請求，它的訪客就會有回應時間延遲的體驗，這不僅增加了CPU使用率也增加了頁面的載入時間。那麼，又該如何減少HTTP請求？請見以下步驟。

• 減少網站上的對象數量。
• 最小化網站上的重新導向數量。
• 使用CSS Sprites技術（只要你需要的那部分圖片內容）。
• 結合JavaScripts和CSS。

 

最佳化網站載入速度