提高網頁的效率 Use YSlow to know why your web Slow_經驗交流

內容再豐富的網站，如果慢到無法訪問也是毫無意義的； SEO做的再好的網站，如果搜尋蜘蛛抓不到也是白搭(頁面效率和搜尋蜘蛛之間的關係，需要進一步的確認，此為和上篇保持統一)； UE設計的再人性化的網站，如果使用者連看都看不到也是空談。

所以網頁的效率絕對是最值得關注的方面。雖然我們在 《如何提高網頁的效率（上篇）——提高網頁效率的14條準則》提到了如何提高網頁效率的14條準則，但是如何知道我們現在的網頁的效率到底如何？到底處於怎樣一個層級？又有哪些方面做的不夠好，需要改進呢？也許，你會說，問一下使用者不就知道了嗎？但是相比感性比例佔據太大的使用者感受而言，理性的工具和資料更具有說服力。本篇就將向你介紹一款評測網頁效率的工具——YSlow（why slow，這個名字起的太好了）。


yslow
YSlow是由Yahoo開發人員團隊發布的一款基於Firebug的外掛程式。而Firebug 又是一款基於FireFox的外掛程式。所以說YSlow是一款基於FireFox外掛程式的外掛程式。雖然有點繞，但是最終說明的問題是：

很遺憾，微軟的IE系列瀏覽器不能使用YSlow。
YSlow只能使用在FireFox瀏覽器上。
如果要想使用YSlow，那麼你必須先安裝FireFox。
如果要想使用YSlow，那麼你就要安裝FireFox上的Firebug外掛程式。

這看上去好像有點令人沮喪，但是事實上它並不像想象中的那麼麻煩，只要按照下面的步驟你將能很快的使用YSlow：

到http://www.php.cn/ 下載最新版的FireFox，並安裝它。當然如果你已經安裝了FireFox可以跳過此步。
到http://www.php.cn/ 下載最新版的Firebug，並安裝它。當然如果你已經安裝了Firebug可以跳過此步。
到http://www.php.cn/ 下載最新版的YSlow，並安裝它。當然如果你已經安裝了YSlow可以跳過此步。

圖2：在菜單中先開啟Firebug外掛程式

這時候開啟FireFox，你將在【工具】菜單中看到【firebug】（2）。開啟firebug，然後在firebug中點擊YSlow菜單，便看進入YSlow的主介面（3）。

圖3：在菜單中先開啟Firebug外掛程式(點擊小圖查看完整大圖)

點擊【Performace】菜單

YSlow便開始分析此頁的效率，並從13個最影響網頁效率的方面給出評估（4）。

圖4：YSlow給出的本頁面效率評估

可以看出來，YSlow評估的依據就是我們在 《如何提高網頁的效率（上篇）——提高網頁效率的14條準則》中提到的前面13條。前面藍色的字母表示這一條準則的得分。A最高。點擊右面的三角形可以得到更多的資訊和建議，有些資訊裡面還有“放大鏡” 表徵圖，點擊也將展示更為詳細的資訊和建議。（5所示）

圖5：YSlow可以給出每條準則的詳細評估資訊和建議

點擊【Stats】菜單

這個視圖會告訴你頁面的總體統計資訊。包括頁面大小、css樣式表大小、指令檔大小、總體圖片大小、flash檔案大小和css中用到的圖片檔案大小。還會告訴你，哪些東西被緩衝了，緩衝了多少等等。

圖6：【Stats】視圖資訊

點擊【Components】菜單

這個視圖是一個頁面所有組件的資訊列表。從中我們可以得知每個組件的各種詳細資料。如：類型、URL、Expires資料、狀態、大小、讀取時間、ETag資訊等等。通過對這個列表的分析，我們就可以知道到底是什麼東西最耗費我們的資源，從而有針對性的進行最佳化。

圖7：【Components】視圖資訊，點擊“放大鏡”表徵圖我們可以知道更詳細的資訊（點擊小圖查看完整大圖）

點擊【Tools】菜單

【Tools】菜單包含4個子功能表，就是4個工具 + 生產力。【JSLine】工具會產生JSLine報表，報表是對本網頁中JS指令碼的分析報告，包含錯誤和建議。【ALL JS】工具，將產生本頁面所有指令碼代碼便於閱讀和列印的報表頁面。【ALL CSS】工具，將產生本頁面 所有CSS樣式表代碼便於閱讀和列印的報表頁面。【Printable View】將【Performance】和【Stats】視圖中的資訊產生一份更適合閱讀和列印的報表頁面。

圖8：【Tools】菜單，包含了4個子功能表

點擊【Help】菜單

【Help】主要是些常用的協助途徑的入口。從這裡你可以很方面的訪問YSlow的官方網路和部落格。如果你還對YSlow的使用有什麼疑惑的話，那麼在這裡你將獲得滿意的解答。

圖8：【Help】菜單是些常用的協助入口

後記

“工欲善其事，必先厲其器！”好的工具的確能很大的提高我們的工作效率。但是“阿鬥”就算手裡拿著“方天畫戟”，估計也沒有幾個人怕他。好的工具是一方面，但是更重要的還是提高我們自身的知識水平。就如同這款YSlow，如果沒有 《如何提高網頁的效率（上篇）——提高網頁效率的14條準則》中的理論知識，工具提供的資訊我們看到的可能只是表面，就算看懂了資料，我們也很難知道對應的手段和措施。壯漢拿厲斧，這樣伐木才能又快又輕鬆。

