Web前端是龐大的，包括HTML、CSS、Javascript、Image、Flash等等各種各樣的資源。前端優化是複雜的，針對方方面面的資源都有不同的方式。那麼，前端優化的目的是什麼？
1. 從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應得更及時，能夠給用戶提供更爲友好的體驗。
2. 從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所佔帶寬，能夠節省可觀的資源。
總之，恰當的優化不僅能夠改善站點的用戶體驗並且能夠節省相當的資源利用。
前端優化的途徑有很多，按粒度大致可以分爲兩類，第一類是頁面級別的優化，例如HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等；第二類則是代碼級別的優化，例如Javascript中的DOM操作優化、CSS選擇符優化、圖片優化以及HTML結構優化等等。
在前端領域中，對Javascript和CSS的優化一直是大家關注的焦點，相應的壓縮優化工具也非常豐富，相對而言對HTML優化的關注則顯得有些冷淡。在整個前端的構成中，HTML是必不可少的一部分，而且是真正的展示“前端”。
對於各種優化途徑，如果一定要我給一個分類的話，我會用顏色來區分。對於那些在各種頁面中都適用而且無害的方法，我將它們歸爲綠色。相對而言，只有在某些具體的情況下才適用或者有違標準的方法歸爲橙色。
綠色方法
1. 使用相對URL
對於頁面中的各種URL，例如鏈接、外鏈CSS的href、外鏈Javascript的src、圖片src、iframe src等，如果能夠確定它們與當前頁面是處於同一域名下的話，則可以使用相對URL，這樣每一個URL都能夠節省至少一個域名的長度。
2. 刪除HTTP或HTTPS
絕對URL都以HTTP或HTTPS等協議頭開始，如果能確定URL的協議與當前頁面URL的協議是一致的，或者說該URL在多種協議下均是可用的，則可以考慮刪除這個協議頭。這樣做雖然有些非主流，但事實證明是可行的，而且也有理論依據(見http://www.ietf.org/rfc/rfc2396.txt 第5.2節描述)。Nexus One的這個頁面中有些資源URL就刪除了協議頭，雖然並不是出於節省資源的目的，但至少證明刪除協議頭是可行的。
對於CSS，如果刪除協議頭在IE7、IE8下會造成CSS下載兩次，這個是需要注意的問題。
3. 刪除註釋
與CSS、Javascript一樣，也可以通過刪除HTML中的註釋來實現優化。然而，這一點對於HTML來說卻要複雜一些，因爲在HTML中存在某些特殊作用的註釋是不能刪除的。
(a). IE條件註釋
<!--[if expression]> HTML <![endif]—>
諸如這樣的語法，只有符合expression的瀏覽器才能識別其中的內容。
(b). CDATA註釋
<script type="text/javascript"> /* <![CDATA[ */ // content of your Javascript goes here /* ]]> */ </script>
CDATA本身是XHTML中才需要的，在CDATA中的內容不需要對特殊字符進行轉義，不過爲了兼容老版本的瀏覽器，需要加上註釋，以免出錯。不過，對於這個註釋，如果你的頁面並沒有真正的使用XHTML標準則可以大膽的刪除掉。使用XHTML標準不是簡單的聲明DTD就可以辦到的，除此之外還需要服務器能夠派application/xhtml+xml這樣的內容格式，另外還需要瀏覽器支持，目前IE並不支持XHTML格式。因此，目前你的頁面可能是按照XHTML規範來寫的，也能通過HTML驗證，但想要兼容IE則一定還是以HTML方式來展示的。這樣一來，很多爲了遵循標準而增加的內容則可以刪除，具體的在後文的橙色部分詳述。
(c). 自定義註釋
產品中自定義的一些具有特定功能的註釋，例如統計。
4. 壓縮空白符
在HTML中的大多數標籤中，多個空白符都會被壓縮成一個來顯示，於是可以通過刪除多餘的空白符來減小HTML體積。不過需要注意的是並不是所有的空白符都可以這樣做，例如pre、textarea中的空白符是按原樣顯示的，標籤屬性中的屬性值也是按原樣顯示的，例如title、value等。
5. 壓縮inline css & Javascript
不管inline還是external，都需要壓縮，這是減小體積的最直接的方式。
6. CSS&Javascript儘量外鏈
外鏈CSS和Javascript，不僅僅是減小HTML本身的體積，而且還可以充分利用瀏覽器的緩存機制，所以當CSS、Javascript的代碼量超過一定體積時，儘量外鏈。除此之外，儘量避免在頁面中使用onmouseover=”xxxx”的方式來註冊事件，既不利於維護也容易產生不必要的冗餘代碼。
7. 刪除元素默認屬性
在HTML規範中，很多HTML元素的屬性是有默認值的，對於這些默認值可以抹去不寫，下面是不完全統計。
| 標籤 | 屬性 | 默認值 |
| style | media | screen |
| link | media | screen |
| form | method | get |
| form | ||
| input | type | text |
橙色方法
橙色方法是指那些有違標準，或者會導致頁面出現無法預料的問題的一類方法，算是一類非常規的方法，因此也僅僅適用於一些非常規的頁面，例如搜索引擎首頁。
1. 刪除或替換<!DOCYTYPE>
DOCTYPE對於頁面展現非常重要，瀏覽器會根據具體的DOCTYPE來決定如何顯示頁面，除非你對刪除DOCTYPE後的頁面展示十分有把握，否則不要輕易刪除。另外一種可行的方式是採用HTML5中的寫法，即<!doctype html>，大多數瀏覽器能夠將這種doctype寫法解析爲標準或準標準(Almost Standard)模式，不過依然會造成一些問題，具體見這裏。目前百度、Google都是這麼做的。
2. 刪除標籤屬性值的引號
引號不是必須的，刪之。此處也需要考慮一些特殊情況，例如屬性值中包含引號等。
（提醒：不符合XHTML規範）
3. 省略某些屬性值
例如disabled、checked、multiple等的值都可以省略。
（提醒：不符合XHTML規範）
4. 刪除可選的閉合標籤
例如body、p、tr等標籤是允許沒有閉合標籤的，具體的參考此處。
（提醒：不符合XHTML規範）
5. 刪除自動閉合標籤的”/”
（提醒：不符合XHTML規範）
總結
1. 綠色規則中的很多都是在寫碼過程中就可以注意和遵循的，如果能把這個優化融入到編碼中，效果應該更好。
2. 橙色規則由於違背某些規範，只適用於某些特定的頁面，使用時務必謹慎。
3. HTML優化及壓縮的發展滯後於前端其他資源，不過目前也已經引起大家越來越多的關注。以下是我總結的一套符合SEO規範的HTML優化方式：
1）H標籤的使用，值得注意的是，不論任何頁面，h1標籤只能出現一次，它是當前頁面的主標題，權重最高，對蜘蛛的吸引力是最強的。再往下就是h2、h3、h4、h5、h6這些副標題了，所強調的重點也是遞減的，當然，它們的出現頻率沒有明確限制。
2）strong標籤的使用，strong標籤對關鍵詞的強調作用僅次於H標籤，個人實際佈局中會比較在文章內容裏出現，用於加粗段落標題或是重點關鍵詞。
3）<title>網站SEO標題</title>、<meta name=”description” content=”網站描述” />和<meta name=”keywords” content=”網站關鍵詞” />，這是SEO的重點。很好理解，比如我們利用搜索引擎搜索某個關鍵詞，返回的搜索結果中，都是以標題、描述和變色關鍵詞形式出現的。關於網站關鍵詞，許多SEOer還是有爭議，認爲已經越來越不被搜索引擎重視了。不過，個人覺得，不要偷懶，加上總是沒有壞處。需要注意一點，不論是網站標題還是描述、關鍵詞，都不要堆砌，搞實在點的，否則網站容易被搜索引擎懲罰甚至網站被K，那隻能自己去哭吧。
4）<a href=”鏈接地址” title=”鏈接說明”>鏈接關鍵詞</a>，站內豐富的超鏈接會方便蜘蛛爬行，體現網站的深度和廣度，這點在SEO中至關重要。“鏈接地址”特別是欄目的鏈接地址，最佳的出現形式應該是http://你的域名/固定鏈接/。現在，鏈接的理想結構是以“/”結尾，可以參考小拼SEM博客的鏈接形式。“鏈接說明”，一般都是鏈接的關鍵詞或是關鍵詞相關說明文字，這點可能很多人容易忽視，建議還是寫好鏈接說明，尤其是做外部鏈接的時候，這麼做效果還是很不錯的，對網站關鍵詞的搜索引擎排名很有幫助。
5）<img src=”圖片鏈接地址” alt=”圖片說明” />，這是針對網頁中圖片的，當然也可以寫成<img src=”圖片鏈接地址” title=”圖片說明” />。關於圖片說明是用alt還是title，之後的文章會和大家探討的。不過，這個圖片說明是肯定要加的，方便搜索引擎知道這張圖片描述的內容，也有利於在圖片搜索結果中獲得一個好的排名。
6）<div id=”copyright”>版權部分加上網站名稱和鏈接</div>，網站底部版權部分的權重越來越高了，在版權部分加上網站名稱和鏈接或是強調一些關鍵詞是很有必要的，不要落個頭重腳輕的感覺，讓搜索引擎感覺很不舒服。
7）HTML優化要富於邏輯，重點明確，層次分明，也是符合SEO精神的。我們甚至可以這樣理解HTML優化，其實它就是一篇好的作文，從標題到中心思想，然後是圍繞中心展開詳細闡述，這裏要做到重點突出、層次分明，最後纔到結尾，需要點題，做到首尾呼應。
工具
HTML優化工具目前比較理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML壓縮功能，不過目前只有四個簡單的策略，尚處於實驗性階段。隨着大家對前端性能越來越高的關注度，HTML優化及壓縮方面也一定會有所發展的。