天天看點

優化網站利器——跟着YSlow優化你的網站

前一陣子一直在忙碌一個小型公司網站,說實話這個網站并不大也沒有什麼特色,就是一般的企業門戶網站,但是架設到虛拟主機上以後通路發現還是有很多需要優化的地方,主要參照Yahoo!開發的YSlow來實作網站的優化,浏覽器選擇FireFox。

優化網站利器——跟着YSlow優化你的網站
優化網站利器——跟着YSlow優化你的網站

先貼上開始的YSlow分數,隻有七十幾分,評級為C,顯然不能達到我的要求。檢視YSlow的優化建議,發現幾個分數比較低的選項,我們來分别羅列并且分析:

1. Make fewer HTTP requests

該意見是指“使用更少的HTTP請求”,衆所周知,HTTP請求是用戶端向浏覽器端發起的,目的是告訴伺服器端浏覽器所需的檔案,包括頁面,圖檔,js檔案,css檔案等。但是如果請求太多自然會影響到浏覽器的響應時間,進而帶來不夠友好的使用者體驗。

優化這個選項的方法可以有CSS Sprites整合圖檔(将多張圖檔組合在一張圖檔中,通過定位進行圖檔的截取)、合并CSS檔案、合并JS檔案。資料表明,4個25kb檔案的傳輸速度絕對慢于1個100kb檔案的傳輸速度的,是以盡量減少檔案數量是優化的行之有效的方法。

2. Use a Content Delivery Network (CDN)

該意見是指“使用内容分發網絡”,簡而言之就是使用專門的域名來存儲圖檔、js檔案、css檔案等靜态資料。也可以啟用智能解析,根據使用者的網絡來為使用者提供傳輸服務,比如電信和網通使用者分别使用各自的CDN。對于該項的優化暫時沒有意見,隻是點了插件後面顯示的(Add as CDN)來自動優化。

3. Add Expires headers

該意見是指“添加過期标志”,目的是緩存重複利用的檔案,在下次通路該頁面的時候直接從緩存中讀取相應檔案,而不需要再次通過請求伺服器擷取,這樣做會大大加快網頁的加載速度。

步驟如下:

a) 開啟mod_expires子產品

在httpd.conf檔案中找到#LoadModule expires_module modules/mod_expires.so,去除最

前面的#

b) 寫入過期内容

在httpd.conf中寫入

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 12 month"

ExpiresByType text/html "access plus 12 months"

ExpiresByType text/css "access plus 1 months"

ExpiresByType image/gif "access plus 12 months"

ExpiresByType image/ico "access plus 12 months"

ExpiresByType image/jpeg "access plus 12 months"

ExpiresByType image/jpg "access plus 12 months"

ExpiresByType image/png "access plus 12 months"

ExpiresByType application/x-shockwave-flash "access plus 12 months"

ExpiresByType application/x-javascript  "access plus 12 months"

ExpiresByType video/x-flv "access plus 12 months"

</IfModule>

每一行都應的都是各個元素的過期時間設定,access plus 12months表示該元素12個月後過期,也可以通過A+xxxx秒來表示時間,比如A3600就表示一個小時之後過期。除此之外,也可以遵循“永不過期優化原則”,将過期日期設得盡量長,可以通過一句話搞定:

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 10 years"

</IfModule>

這是很多優化團隊都推薦的方式,我也采取了這個方式,如果你覺得有自己定制的必要,可以通過修改不同的時間參數來設定屬于你自己的過期設定。

4. Compress components with gzip

該意見是指“使用Gzip壓縮元件”:

什麼是Gzip?

Gzip是GNU zip的縮寫,它是一個GNU自由軟體的檔案壓縮程式。現今已經成為Internet上使用非常普遍的一種資料壓縮格式,或者說一種檔案格式。HTTP協定上的GZIP編碼是一種用來改進WEB應用程式性能的技術。大流量的WEB站點常常使用Gzip壓縮技術來讓使用者感受更快的速度。這一般是指WWW伺服器中安裝的一個功能,當有人來通路這個伺服器中的網站時,伺服器中的這個功能就将網頁内容壓縮後傳輸到來訪的電腦浏覽器中顯示出來。一般對純文字内容可壓縮到原大小的40%。開啟Gzip後會在網頁資料傳輸之前,先使用Gzip壓縮後再傳輸給用戶端,用戶端接收之後由浏覽器解壓顯示。這樣就會減小通過網絡傳輸的資料量,提高浏覽的速度。

簡而言之,就是壓縮再傳輸。

如何開啟Gzip?

a) 開啟LoadModule headers_module modules/mod_headers.so 子產品,方法同上面的expires子產品

b) 開啟LoadModule headers_module modules/mod_deflate.so 子產品

c) 在httpd.conf中添加如下代碼

<IfModule mod_deflate.c>  

  SetOutputFilter DEFLATE   

  AddOutputFilterByType DEFLATE text/html text/css image/gif image/jpeg image/png application/xjavascript   

</IfModule> 

//表示篩選這些文檔元素在傳輸的時候進行gzip壓縮

d) 完成

5. Configure entity tags (ETags)

ETags是指“實體标簽”,是一種告訴浏覽器緩存内容是否變化的機制,如果變化就要重新緩存,否則緩存内容不變。但是使用了CDN後會對其檢測産生影響,我選擇不深入研究ETags,而是禁用了它,禁用方法很簡單,在httpd.conf中添加FileETag None

6. 另外的幾個優化意見

除了上面羅列的優化意見外,還有幾個比較容易出問題的,比如:

a) Put CSS at top

b) Put JavaScript at bottom

c) Avoid CSS expressions

d) Minify JavaScript and CSS等

具體優化建議就是:把css樣式放在頁面上方,防止先讀取html頁面再渲染的情況出現;将js腳本内容以及引入都寫在頁面下方</body>之前,在頁面完整讀取後再進行js的載入和編譯執行;避免css 表達式的使用;還有就是通過工具來壓縮js和css代碼,具體的工具可以使用YUI Compressor,工具位址:http://refresh-sf.com/yui/ 

7. 關于伺服器和虛拟主機的差別

上面所述的情況都是針對自己搭建的伺服器而言的,如果你是搭建在虛拟主機上(大多數個人網站部落格都是搭建在虛拟主機上的,因為自己要買個伺服器确實也不是筆小數目)那麼就要看這個虛拟主機提供商是否是apache伺服器,并且是否開啟相應子產品,如果滿足這兩個要求的話,可以在你的網站根目錄下建立.htaccess檔案并且将上面需要寫入httpd.conf的内容都寫在這個檔案中,就可以實作上面的優化功能了,當然,如果沒有開啟對應子產品的話這些都是無法實作的。iis也會有自己的優化設定,具體可以咨詢你的主機服務供應商。

8. 貼上最後優化完畢的分數:97分,A,還是很給力的哈。話說第一項我實在是懶得去改了,就這樣吧。

優化網站利器——跟着YSlow優化你的網站

——————————————————————

以上意見僅供參考,若轉載請注明出處,謝謝。

繼續閱讀