優化網站設計（二十二）：避免404錯誤

前言

網站設計的優化是一個很大的話題,有一些通用的原則,也有針對不同開發平台的一些建議。這方面的研究一直沒有停止過，我在不同的場合也分享過這樣的話題。

作為通用的原則，雅虎的工程師團隊曾經給出過35個最佳實踐。這個列表請參考 Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html，同時，他們還發布了一個相應的測試工具Yslow http://developer.yahoo.com/yslow/

我強烈推薦所有的網站開發人員都應該學習這些最佳實踐，並結合自己的實際項目情況進行應用。 接下來的一段時間，我將結合ASP.NET這個開發平台，針對這些原則，通過一個系列文章的形式，做些講解和演繹，以幫助大家更好地理解這些原則，並且更好地使用他們。

准備工作

為了跟隨我進行后續的學習，你需要准備如下的開發環境和工具

1. Google Chrome 或者firefox ，並且安裝 Yslow這個擴展組件.請注意，這個組件是雅虎提供的，但目前沒有針對IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你應該對這些瀏覽器的開發人員工具有所了解，你可以通過按下F12鍵調出這個工具。
2. Visaul Studio 2010 SP1 或更高版本，推薦使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要對ASP.NET的開發基本流程和核心技術有相當的了解，本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇我和大家討論的是第二十二條原則：Avoid 404s （避免404錯誤）。

等等！404錯誤也能避免嗎？能嗎？不能嗎？這個問題要從404錯誤的原因說起。

什么情況下會發生404錯誤？

404 意味着Not Found，意思是說未找到資源。既然如此，那么至少會有兩種原因導致404錯誤：

1. 該資源按理說是要有，但我們沒有提供。用戶按照正常的方式來請求，所以資源找不到。
2. 該資源本來就不存在，用戶按照不正常的方式來請求，當然還是找不到。

 

先來看第一種情況吧。

1. 例如每個網站其實默認都應該有一個favicon.ico文件（規定是放在網站的根目錄下面），它用來在瀏覽器中為網站顯示一個小圖標。這個文件是由瀏覽器自動請求的，如果找不到，則自然會報告404錯誤。

2. 還有一種可能性就是，用戶之前訪問過你的網站，當時某個頁面是存在的（例如Customer.aspx），而且為了訪問方便，他將這個頁面收藏起來（恭喜你，有人收藏你的網頁表明你的網頁對他很有用）。但是在某個時候，你的網站由於某些考慮，例如功能合並或者重組等，對Customer.aspx做了改動，並且重新命名為了Service.aspx。試想一下，如果原先那個用戶使用收藏夾里面記錄的地址來訪問，那么是不是會發生404錯誤呢？

3. 又或者，你在網頁中定義的鏈接地址，由於疏忽，在發布之前沒有檢查，導致原來應該鏈接到service.aspx的鏈接，寫成了servies.aspx，用戶在點擊鏈接的時候，同樣會收到404錯誤。

 

以上三種場景都屬於本來應該提供資源，但是我們卻沒有提供，所以由於此類問題導致的404錯誤，我們是應該（同時也可以）避免的。

但另外一些情形就可能不容易完全避免了，例如用戶就是輸入了錯誤的地址（天知道，他們可能是真的誤操作，也可能是故意輸錯的），因為該資源本來就不存在，所以當然應該是返回404錯誤。

1. 誤操作：用戶本來想輸入 Customer.aspx，但卻輸成了Customer.asp
2. 故意輸錯：用戶本來就不想好好用你的網站，所以他故意亂輸入了一些地址。

 

 

404錯誤會有什么影響？

1. 看不到的影響：有時候，404錯誤發生了，用戶可能根本沒有感覺到。
• 例如請求favicon.ico文件，或者請求了某個不存在的腳本文件、樣式表、圖片文件，頁面還是會按照正常的方式進行呈現。
• 丟失的腳本文件、樣式表、圖片文件，會導致頁面的某些行為、界面效果出現異常（也可能不是很明顯）
• 最大的問題可能是性能方面的影響。尤其是如果請求一個不存在的腳本文件，因為瀏覽器在請求腳本文件的時候，即便是返回404，它也會嘗試去按照Javascript的方式解析響應中的內容。這無疑會增加很多處理的時間，而因為該文件不存在，所以這些都是無用功。
2. 看得到的影響：如果用戶請求的某個頁面不存在，那么他將收到明確的回應
• 默認情況下，他將收到一個標准的錯誤頁面（請注意：不少用戶會被這個頁面嚇到）

          

• 如果網站比較注重用戶體驗，會對404錯誤頁面進行自定義，例如下面幾個例子

          

 

 

應該如何盡可能避免404錯誤的發生

既然了解了404錯誤發生的場景，那么相應的，我們可以通過一些措施來盡可能避免它的發生：

1. 為網站提供favicon.ico。
2. 在發布網站前的測試工作中，運行Link checker工具，確保所有鏈接都是能夠訪問到的。這個工具是W3C發布的，完全免費，你值得擁有。
3. 為了避免用戶收藏絕對地址（customer.aspx)，給后期更新帶來隱患。可以考慮在設計階段采用 Url Rewriting  或者 Routing 等技術來實現更加友好和靈活的地址（例如/Customer)，以后如果業務邏輯有變化，只需要修改一下路由規則即可。
• 如果條件允許的話, 不如直接使用 ASP.NET MVC （內置使用Routing組件）
4. 第三條措施,同樣可以盡可能地減少用戶手工輸入地址出錯的機會。

 

 

如何提供自定義的404錯誤頁面

我們知道，404錯誤是無法完全避免的。而默認情況下，IIS 服務會提供標准的錯誤頁面（但是，這些頁面可能不是那么友好）

所以，為了讓你的網站能在出現這種錯誤的時候，給用戶相對較好一些的用戶體驗，我建議你應該設計自定義的404錯誤頁面。

 

看看下面列出的一些設計，相信能給你一些靈感：

1. http://www.webdesignerdepot.com/2009/07/50-creative-and-inspiring-404-pages/
2. http://blog.karachicorner.com/2012/06/30-best-404-web-page-designs/

【備注】與上面這些設計者不同的一點,我個人認為這個錯誤頁面無需特意突出404 , 因為其實普通用戶是不知道404 具體什么意思的. Keep it simple 。

 

然后，可以在網站的web.config中進行如下的配置

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <system.web>
    <compilation debug="false"
                 targetFramework="4.0" />

 <customErrors mode="On"> <error statusCode="404" redirect="my404.html"/> </customErrors>
  </system.web>

</configuration>