高效能建站之前端最佳化篇

高效能建站之前端最佳化篇

2011-10-25 17:50 by PHP淮北, 560 visits, 收藏, 編輯

前言：

這算是對前端最佳化的總結吧，之前零零星星總結和學習，這次做一個完整的總結。

測試網頁效能工具 ⑴Page Speed：

Google開發的工具，網站管理員和網路開發人員可以使用 Page Speed 來評估他們網頁的效能，並獲得有關如何改進效能的建議。

⑵yslow：

YSlow可以對網站的頁面進行分析，並告訴你為了提高網站效能，如何基於某些規則而進行最佳化。

安裝方法：

安裝：yslow直接在firefox組件尋找，安裝即可

Page Speed安裝，使用Firefox點開http://code.google.com/speed/page-speed/download.html，點擊下載，Firefox會自動安裝

使用方法：

1）pagespeed的使用

這裡是如何解釋的顏色代碼分數：

· 高優先順序。這些建議代表了最大的潛在的效能贏得。你應該首先解決這些項目。

· 中等優先順序。這些建議可能代表較小的勝或更多的工作來實現。您應該解決這些項目的未來。

· 工作罰款或低優先順序。如果顯示建議，作為與“+”號表示，他們很可能代表未成年人勝。您應該只關注這些項目後，你處理的優先順序較高的的。

· 只有資訊的訊息。無論這些項目不適用此頁或有一個問題，在運行測試。

關於它的使用更詳細的資料參考：http://code.google.com/intl/zh-CN/speed/page-speed/docs/using_firefox.html

2）Yslow的使用

視圖顯示了等級為網頁的成績單。整個字母等級為頁面顯示在頂部隨著全面數值的表現。這個頁面是基於22可分級的高效能網頁的規則(見效能規則)。這些規則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級，A 級為最高。更詳細的使用方法參考：http://www.yslow.net/show.php?tid=123

網站效能最佳慣例和規則

網站最佳化的原則是什麼呢？這裡推薦雅虎的23條網站最佳化軍規

雅虎的卓越效能團隊已經確定了23個軍規：

1. 減少HTTP請求次數 
合并圖片、CSS、JS，改進首次訪問使用者等待時間。 
2. 使用CDN 
就近緩衝==>智能路由==>負載平衡==>WSA全站動態加速 
3. 避免空的src和href 
當link標籤的href屬性為空白、script標籤的src屬性為空白的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。測試 
4. 為檔案頭指定Expires 
使內容具有緩衝性。避免了接下來的頁面訪問中不必要的HTTP請求。 
5. 使用gzip壓縮內容 
壓縮任何一個文本類型的響應，包括XML和JSON，都是值得的。舊文章 
6. 把CSS放到頂部 
7. 把JS放到底部 
防止js載入對之後資源造成阻塞。 
8. 避免使用CSS運算式 
9. 將CSS和JS放到外部檔案中 
目的是緩衝，但有時候為了減少請求，也會直接寫到頁面裡，需根據PV和IP的比例權衡。 
10. 權衡DNS尋找次數 
減少主機名稱可以節省回應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。 
IE瀏覽器在同一時刻只能從同一網域名稱下載兩個檔案。當在一個頁面顯示多張圖片時，IE
使用者的圖片下載速度就會受到影響。所以新浪會搞N個次層網域來放圖片。 
11. 精簡CSS和JS 
12. 避免跳轉 
同域：注意避免反斜線 “/” 的跳轉； 
跨域：使用Alias或者mod_rewirte建立CNAME（儲存網域名稱與網域名稱之間關係的DNS記錄） 
13. 重複資料刪除的JS和CSS 
重複呼叫指令碼，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管指令碼是否可緩衝，它們都存在重複運算JavaScript的問題。 
14. 配置ETags 
它用來判斷瀏覽器緩衝裡的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個檔案在1秒內修改了10次，Etag可以綜合Inode(檔案的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器叢集使用，可取後兩個參數。使用ETags減少Web應用頻寬和負載 
15. 可快取的AJAX 
“非同步”並不意味著“即時”：Ajax並不能保證使用者不會在等待非同步JavaScript和XML響應上花費時間。 
16. 使用GET來完成AJAX請求 
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先傳送檔案頭，然後才發送資料。因此使用GET擷取資料時更加有意義。 
17. 減少DOM元素數量 
是否存在一個是更貼切的標籤可以使用？人生不僅僅是DIV+CSS 
18. 避免404 
有些網站把404錯誤響應頁面改為“你是不是要找***”，這雖然改進了使用者體驗但是同樣也會浪費伺服器資源（如資料庫等）。最糟糕的情況是指向外部 JavaScript的連結出現問題並返回404代碼。首先，這種載入會破壞並行載入；其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當作JavaScript代碼來執行。 
19. 減少Cookie的大小 
20. 使用無cookie的域 
比片 CSS 等，Yahoo! 的靜態檔案都在 yimg.com 上，用戶端請求靜態檔案的時候，減少了 Cookie 的反覆傳輸對主網域名稱 (yahoo.com) 的影響。 
21. 不要使用濾鏡 
png24的在IE6半透明那種東西，別亂使，淡定的切成PNG8+jpg 
22. 不要在HTML中縮放圖片 
23. 縮小favicon.ico並緩衝

比較牛逼和權威的解釋資料

關於這個些規定，前人對的最權威最詳細的解釋Best
Practices for Speeding Up Your Web Site和Web
Performance Best Practices

百度的泛體驗中心也有一篇針對其中載入部分的最佳化文章：http://www.baiduux.com/blog/2011/02/15/browser-loading/

**************************************上面三篇文章看完基本上頁面最佳化就沒有什麼痛點了。

解決問題

通過上面的工具測試，可以檢查出網頁前端的以小額問題，而針對問題就需要你一個個解決，下面是我解決我網站存在問題的一個記錄，大家可以權作參考《網站最佳化--讓你的網頁飛起來》

 

另外一些問題

上面的全部做完是否就可以上線了呢？這裡還有一些小問題需要注意：

• 用了Google分析等統計工具了嗎？（國內可以使用百度統計或cnzz統計）

你應該跟蹤每個頁面的訪問情況，哪些受歡迎，哪些掙得錢多，下面是我使用百度統計的一個頁面熱力圖：通過熱力點可以分析出使用者習慣點擊頁面那些地方！

• 有網站地圖（sitemap.xml）檔案嗎？

搜尋引擎可以發現網站所有頁面，但網站地圖可以給搜尋引擎指路，並告訴它們頁面的權重，下面是部落格園的網站地圖

。

在多個瀏覽器下測試過嗎？

你可以通過browsershots.org檢查你的網站是否在所有瀏覽器下都順眼。

 

這裡有一篇文章總結的小問題很好，大家可以看一下：網站上線之前需要檢查的13個問題

 

網站即時監控

國外使用者可以使用Siteuptime.com/Pingdom.com，國內使用者可以使用監控寶，下面是我的監控：

現在監控寶又支援伺服器效能的監控和webserver的監控以及使用者體驗的跟蹤，如下面：

 

 

支援多種監控和多種類型，每15分鐘監控一次.即時協助你監控自己的網站。

總結

關於網頁前端最佳化總結包括：網頁效能測試工具，前端最佳化原則，解決辦法，13個需要注意的小問題，最後就是網站的即時監控，保證你的網站正常！

Technorati 標籤: 頁面最佳化
YSLOW pagespeed 監控寶 前端最佳化

本文基於署名-非商業性使用
3.0許可協議發布，歡迎轉載，演繹，但是必須保留本文的署名PHP淮北（包含連結），且不得用於商業目的。如您有任何疑問或者授權方面的協商，請與我聯絡。