提高網站速度的6種網站前端優化方法

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

最近有幾個同事開通了個人博客，但卻抱怨說因為的買的虛擬空間，所以個人博客網站打開速度很慢。 對於這種現象，按照一般的情況來看，一個網站的訪問打開速度的快與慢，全是看這個網站使用的空間配置，要是這個空間主機的配置不錯，那麼你的網站存取速度就會很快;相反，要是你的空間主機的配置很爛，那麼你的網站存取速度就會很慢。 其實拋去空間主機的配置因素不談，我們站長或者seo人員也可以從網頁製作方面著手，從而從現有的資源上提高網站的存取速度。 如果你還不知道如何才能優化網站來提高網站的存取速度，那就看一下馬海祥博客為你總結出來的六個小技巧吧，希望對你能有所説明!

1、利用瀏覽器緩存你的 js 和 CSS 檔：

在網站根目錄 .htaccess 中加入以下代碼

ExpiresActive on

ExpiresDefault 「access plus 1 year」

這段代碼的意思是對 jpg|gif|png|css|js 發送 header 緩存頭，進行一年的緩存、在瀏覽器不使用 ctrl+F5 強制刷新時，會一直緩存到時間時間結束， 唯一遺憾的是如果你更改了js或者css檔必須把以前的路徑或者檔案名更改，可以這樣 base.js?ver=(x) 這種方式下次瀏覽器就會自動讀取並緩存。

2、把你的 .js 庫檔位址替換成 Google CDN的位址：

隨著 jquery 和 mootools 等js庫的使用需要載入的.js檔越來越多也越來越大，通常傳統的網站是上傳到網站本身的目錄。 但對於一個接近70多KB的jquery.js體積確實不利於網站回應速度的提升，此時就應該使用Google API 。

例如：把你的 HTTP://www.***.cn/jquery.x.x.js 替換為 HTTP://ajax.googleapis.com/ajax/libs/jquery/1.4.4/ jquery.min.js，其意義在於當一個使用者訪問過使用 google api 的網站之後，再次訪問其他調用了該api位址的網站就不需要再次載入該檔了。 從而達到提速的目的。

不單是jquery庫，其他諸如mootools yui 也可以使用這種方式。

3、精簡和優化你的 js 和 CSS：

雖然有了緩存和gzip保駕護航，但是對於 js 和 css 的優化卻也是必須的。 我們寫的javascript腳本和 css 代碼都是經過縮進和換行的，適合人類閱讀，但是瀏覽器執行這些腳本不並需要這些無意義的空格和換行。 所以我們應該去除這一些空格換行，甚至縮短 javascript 和 css 裡面的變數。 諸如此類的優化工具有 YUI Compressor 和 Closure Compiler 。 這兩個工具都是基於 java 的，使用應該安裝jdk並且設置 JAVA_HOME 。 (對於非程式師的網站管理員而言確實有點困難)

此工具可以不用在本地安裝jdk，直接上傳 js 和 css 檔進行壓縮，可選擇是採用 YUI Compressor 或 Closure Compiler 。

4、GZIP 壓縮你的 JS 和 CSS 檔：

壓縮js和css可以通過伺服器動態腳本進行也可以更簡單的使用apache伺服器可以在網站根目錄 .htaccess 中加入以下代碼

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

Header append Vary Accept-Encoding

這段代碼的意思是調用伺服器的壓縮模組對以上檔輸出之前進行GZIP壓縮，gzip的壓縮之後所有檔都應該能減少30%以上的體積。 特別是對於大量使用js的博客有了gzip保駕護航之後速度能提高不少。

5、使用css sprites合併圖片

一個網站經常使用小圖示和小圖片進行美化，但是很遺憾這些小圖片佔用了大量的HTTP請求，因此可以採用sprites的方式把所有的圖片合併成一張圖片 ，可以通過相關工具線上合併，也可以在ps中合併。

6、優化你網站圖片：

大量使用的圖片和圖示雖然可以給網站帶來美輪美奐的效果，圖文混編更是一種非常絢麗的博文展現方法。 可圖片的體積確實不是很給力，jpg是一種失真壓縮格式，而png雖然是無損的，但缺憾是體積頗大。 為了減少圖片體積達到最快的下載速度，每一張圖片上傳前應該優化一下體積。

本文為馬海祥博客原創文章，如想轉載，請注明原文網址摘自于HTTP://www.mahaixiang.cn/wyzz/207.html，注明出處;否則，禁止轉載;謝謝配合!