1. 減少HTTP請求數。
(1) 合併JS檔案和CSS檔案。
(2) 合併框架圖片及相對變動較少的圖片或成一張，透過CSS背景切割完成渲染。
(3) 合理使用本機Cache來快取JS/CSS/IMAGE。
2. 減少被要求檔案的大小，減少請求資料所佔用的網路頻寬。
(1) 壓縮JS體積：刪除JS中空白換行、註解、混淆，把長變數換成短變數。
(2) 壓縮CSS體積：刪除CSS註解、寫法盡量用簡寫。
(3) 使用(X)HTML+CSS方式建構網站結構，提供CSS重複使用性，以減少(X)HTML檔案大小。
(4) 使用伺服器端GZIP壓縮JS/CSS文件，縮小傳輸檔案大小。
3. 透過版本化控制客戶端快取。
如何及時更新這些被快取的檔案呢？透過一個簡單的配置，透過修改JS的版本來及時告訴瀏覽器，這些文件必須重新請求了，不要繼續使用瀏覽器快取中的資料了。方案有以下幾個：
(1) 手動改變這些JS的檔案名稱。
(2) 手動改變這些JS的路徑。
(3) 以URL Rewrite方式重定位JS路徑。
(4) 透過一個在高回應伺服器上的JS設定告知頁面，這個頁面該連結哪些JS檔案。
(5) 大版本不變，小版本不斷追加，等待一段時間後統一更新，有效利用快取。
4. 幫頁面減肥。
5. 刪除頁面中一些可有可無的內容。
主要指冗餘的空格、製表符、空白行、雙引號、單引號、註解等。
6. 刪除網頁程式碼中的空語句。
例如：
<span style='font-family:宋体'>你好<span lang=EN-US><o:p></o:p></span></span>
很明顯，在「你好」後邊的那些語句是沒有任何作用的，我們可以刪除它。
7. 刪除HTML的預設屬性。
HTML語言有許多預設屬性，例如對齊、字體、顏色等，但網頁製作軟體會加入這些無用的程式碼。如：align屬性預設是左對齊，所以在左對齊時我們沒必要再寫「align=left」。
8. 最佳化CSS。
例如：使用簡寫的CSS。
又或：
<p class="decorated">1</p>
<p class="decorated">2</p>
<p class="decorated">3</p>
<p class="decorated">4</p>可用p來包含：
<p class="decorated">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>9. Visibility快於Display。
10. 保持同一URL的大小寫一致性。
Internet Explorer的緩衝區也是區別對待大小寫字串的。因此，作為一個Web開發者，一定要記住保持相同連結的URL字串在不同位置的大小寫的一致性。否則，就會在瀏覽器的緩衝區中存放同一位置的不同檔案備份，也增加了下載相同位置內容的請求次數。
11. 讓標記有始有終。
12. 不要將整個頁面內容塞到一個Table中。
因為Table要等裡面的所有內容都加在完畢後才顯示出來，如果某些內容無法訪問，則會拖延整個頁面的訪問速度。正確的做法是，將內容分割到幾個相同格局的Table中去，不要全塞到一個Table裡。
13. 使用iframe嵌套另一個頁面。
如果需要插入廣告代碼，又不想影響速度，那麼使用iframe最適合不過了。不會因為廣告代碼延遲而影響頁面的顯示。
14. 把JavaScript移到HTMl檔案最後。
因為JavaScript在處理的過程中會阻塞後面的頁面顯示，也會使HTML請求被阻止。
15. 友情連結的學問。
(1) 只做文字鏈接，做文字連結是不會延遲網頁速度的。
(2) 將所有連結放到獨立的分頁中區，然後在首頁連結上該頁。
(3) 如果友情連結一定要出現在首頁，那麼請將連結所在的整個Table放到頁面的最下方，因為頁面是從上到下逐行顯示的。
(4) 友情連結的Logo圖片先下載後上傳到自己的網頁空間。
16. 圖片優化。
(1) 減少圖片數：移除不必要的圖片。
(2) 降低影像品質：JPG格式的圖片，降低5%的圖片看起來變化不是很大，但檔案大小變化很明顯。
(3) 使用適當的格式：JPG一般用於展示風景、人物、藝術照的攝影作品，有時也用在電腦截圖上；GIF提供的顏色較少，可用在一些對顏色要求不高的地方，如網站Logo、按鈕、表情等；PNG格式能提供透明背景，一般用於需要背景透明顯示或對影像品質要求較高的網頁上。
17. 網址後加斜線。
當伺服器收到這樣一個位址，需要時間來確定這個位址的檔案類型。如果220是目錄，則不妨在網址後多加一個斜槓，這樣伺服器就一目了然地知道要存取該目錄下的index或default文件，從而節省加在時間。
18. 標示高度和寬度。
如果沒有設置，則瀏覽器一邊下載圖片一邊計算大小，如果圖片很多，則瀏覽器就需要不斷地調整頁面，這不僅影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度後，即使圖片無法顯示，頁面上也會騰出圖片的空位，然後繼續載入後面的內容。從而加載快了，瀏覽體驗也更好了。
以上是關於html頁面優化的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
