最佳化網站設計（二十二）：避免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的方式解析響應中的內容。這無疑會增加很多處理的時間，而因為該檔案不存在，所以這些都是無用功。

看得到的影響：如果使用者請求的某個頁面不存在，那麼他將收到明確的回應

• 預設情況下，他將收到一個標準的錯誤頁面（請注意：不少使用者會被這個頁面嚇到）

          

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

          

 

 

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

既然瞭解了404錯誤發生的情境，那麼相應的，我們可以通過一些措施來儘可能避免它的發生：

1. 為網站提供favicon.ico。
2. 在發布網站前的測試工作中，運行Link checker工具，確保所有連結都是能夠訪問到的。這個工具是W3C發布的，完全免費，你值得擁有。
3. 為了避免使用者收藏絕對位址（customer.aspx)，給後期更新帶來隱患。可以考慮在設計階段採用 Url Rewriting  或者 Routing 等技術來實現更加友好和靈活的地址（例如/Customer)，以後如果商務邏輯有變化，只需要修改一下路由規則即可。

• 如果條件允許的話, 不如直接使用 ASP.NET MVC （內建使用Routing組件）

第三條措施,同樣可以儘可能地減少使用者手工輸入地址出錯的機會。

 

 

如何提供自訂的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>