• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 營銷推廣 >> seo優(yōu)化 >> Web 前端優(yōu)化最佳實踐之內(nèi)容篇

Web 前端優(yōu)化最佳實踐之內(nèi)容篇

• 作者：創(chuàng)新互聯(lián) 文章來源：網(wǎng)絡(luò)推廣部 點擊數(shù)： 更新時間：2008-08-02
• Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的貢獻(xiàn)。廣為人知的優(yōu)化規(guī)則也由 13 條到 14 條，再到 20 條，乃至現(xiàn)在的 34 條–真是與時俱進(jìn)啊。最新的 34 條也針對不同的角度做了分類。
  面向內(nèi)容的優(yōu)化規(guī)則目前有 10 條。
  
  1. 盡量減少 HTTP 請求 (Make Fewer HTTP Requests)
  作為第一條，可能也是最重要的一條。根據(jù) Yahoo! 研究團(tuán)隊的數(shù)據(jù)分析，有很大一部分用戶訪問會因為這一條而取得最大受益。有幾種常見的方法能切實減少 HTTP 請求：
  •1) 合并文件，比如把多個 CSS 文件合成一個；
  •2) CSS Sprites 利用 CSS background 相關(guān)元素進(jìn)行背景圖絕對定位；參見：CSS Sprites: Image Slicing’s Kiss of Death
  •3) 圖像地圖
  •4) 內(nèi)聯(lián)圖象 使用 data: URL scheme 在實際的頁面嵌入圖像數(shù)據(jù).
  
  2. 減少 DNS 查找 (Reduce DNS Lookups)
  必須明確的一點，DNS 查找的開銷是很大的。另外，我倒是覺得這是 Yahoo! 所有站點的通病，Yahoo！主站點可能還不夠明顯，一些分站點，存在明顯的類似問題。對于國內(nèi)站點來說，如果過多的使用了站外的 Widget ，也很容易引起過多的 DNS 查找問題。
  
  3. 避免重定向 (Avoid Redirects)
  不是絕對的避免，盡量減少。另外，應(yīng)該注意一些不必要的重定向。比如對 Web 站點子目錄的后面添加個 / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 與 http://www.dbanotes.net/arch/ 二者之間是有差異的。如果是 Apache 服務(wù)器，通過配置 Alias 或mod_rewrite 或是 DirectorySlash 能夠消除這個問題。
  
  4. 使得 Ajax 可緩存 (Make Ajax Cacheable)
  響應(yīng)時間對 Ajax 來說至關(guān)重要，否則用戶體驗絕對好不到哪里去。提高響應(yīng)時間的有效手段就是 Cache 。其它的一些優(yōu)化規(guī)則對這一條也是有效的。
  
  5. 延遲載入組件 (Post-load Components)
  
  6. 預(yù)載入組件 (Preload Components)
  上面兩條嚴(yán)格說來，都是屬于異步這個思想靈活運用的事兒。
  
  7. 減少 DOM 元素數(shù)量 (Reduce the Number of DOM Elements)
  
  8. 切分組件到多個域 (Split Components Across Domains)
  主要的目的是提高頁面組件并行下載能力。但不要跨太多域名，否則就和第二條有些沖突了。
  
  9. 最小化 iframe 的數(shù)量 (Minimize the Number of iframes)
  熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。針對前端優(yōu)化來說 iframe 有其好處，也有其弊端，一分為二看問題吧。
  
  10. 杜絕 http 404 錯誤 (No 404s)
  對頁面鏈接的充分測試加上對 Web 服務(wù)器 error 日志的不斷跟蹤能有效減少 404 錯誤，亦能提升用戶體驗。值得一提的是，CSS 與 Java Script 引起的 404 錯誤因為定位稍稍”難”一點而往往容易被忽略。
  

  這是內(nèi)容篇的 10 條。應(yīng)該說具體引導(dǎo)性的內(nèi)容還不夠詳細(xì)。逐漸會根據(jù)自己的理解補充上來。

  
  成都創(chuàng)新互聯(lián)網(wǎng)站設(shè)計：Web前端優(yōu)化專題
  1.Web 前端優(yōu)化最佳實踐之 內(nèi)容篇
  2.Web 前端優(yōu)化最佳實踐之 Server 篇
  3.Web 前端優(yōu)化最佳實踐之 Cookie 篇
  4.Web 前端優(yōu)化最佳實踐之 CSS 篇
  5.Web 前端優(yōu)化最佳實踐之 JavaScript 篇
  6.Web 前端優(yōu)化最佳實踐之 圖象篇
  7.Web 前端優(yōu)化最佳實踐之 Mobile(iPhone) 篇
• 什么樣的網(wǎng)站才有利于優(yōu)化？ :上一篇
  到底哪些是網(wǎng)站創(chuàng)業(yè)的網(wǎng)站交易文章 :下一篇