網站優化

網站性能最佳慣例和規則

網站優化的原則是什麼呢？這裏推薦雅虎的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並緩存

 

測試網頁性能工具

⑴Page Speed：

是開源 Firefox/Firebug 插件。網站管理員和網絡開發人員可使用 Page Speed 來評估他們網頁的性能，並得到有關如何改進性能的建議。

⑵yslow：

YSlow能夠對網站的頁面進行分析，並告訴你爲了提升網站性能，如何基於某些規則而進行優化。

安裝方法：

安裝：yslow直接在firefox組件查找，安裝便可

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

使用方法：

1）

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

· 高優先級。這些建議表明了最大的潛在的性能贏得。你應該首先解決這些項目。

· 中等優先級。這些建議可能表明較小的勝或更多的工做來實現。您應該解決這些項目的將來。

· 工做罰款或低優先級。若是顯示建議，做爲與「+」號表示，他們極可能表明未成年人勝。您應該只關注這些項目後，你處理的優先級較高的的。

· 只有信息的消息。不管這些項目不適用此頁或有一個問題，在運行測試。

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

2）

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