優化網站加載速度

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

一、合併Js文件和CSS

將JS代碼和CSS樣式分別合併到一個共享的文件，這樣不只能簡化代碼，並且在執行JS文件的時候，若是JS文件比較多，就須要進行屢次「Get」請求，延長加載速度，將JS文件合併在一塊兒後，天然就減小了Get請求次數，提升了加載速度。

二、Sprites圖片技術

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

三、壓縮文本和圖片

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

四、圖片格式優化

不恰當的圖像格式是一種極爲常見的減慢加載速度的罪魁禍首。正確的圖片格式可讓圖片縮小數倍，若是保存爲最佳格式。能夠節省大量帶寬，減小處理時間時間，大大加快頁面加載速度，這是一種很常見的作法。即：不一樣格式的圖片佔的大小不一樣。

五、使用 Progressive JPEGs

ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名爲「高級JPEG」。在建立高級JPEG文件時，數據是這樣安排的：在裝入 圖像時，開始只顯示一個模糊的圖像，隨着數據的裝入，圖像逐步變得清晰。它至關於交織的GIF格式的圖片。高級JPEG主要是考慮到使用調制解調器的慢速 網絡而設計的，快速網絡的使用者一般不會體會到它和正常JPEG格式圖片的區別。對於網速比較慢的用戶，這無疑有很好的體驗。

六、精簡代碼

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

七、延遲加載和執行非必要腳本

網頁中有不少腳本是在頁面徹底加載完前都不須要執行的，能夠延遲加載和執行非必要腳本。這些腳本能夠在onload事件以後執行，避免對網頁上重要內容的呈 現形成影響。這些腳本多是你本身網頁的腳本，每每更多的是一些第三方腳本，這樣的有不少，好比評論、廣告、智能推薦、百度雲圖、分享等等，這些徹底能夠等主體內容加載完後再執行。

八、使用AJAX

AJAX即「Asynchronous Javascript +XML「，是指一種建立交互式網頁應用的網頁開發技術。經過在後臺與服務器進行少許數據交換，AJAX可使網頁實現異步更新。這意味着能夠在不從新加 載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁(不使用AJAX)若是須要更新內容，必須重載整個網頁面。

九、用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刷新，就能夠看到修改後的頁面。

十、內容分發網絡（CDN）

內容分發網絡（CDN）是位於不一樣地理位置的服務器組成的網絡。每一個服務器都擁有全部網站的文件副本。要是有網站訪問者請求文件和網頁時，就能夠直接從就近的網站服務器發送過來（也能夠是從負載最小的服務器）。

11.儘可能減小HTTP請求

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

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