一個好的頁面不僅要給訪客提供一個更有效的站點，同時也需要降低你的伺服器壓力和網路請求。對於那些高訪問量的站點來說尤為關鍵。

頁面載入效能的優化不僅是針對那些頻寬有限的撥號上網使用者需要看的內容，對於網速快的訪客來說，效能的提升同樣是一種良好的使用者體驗。

​​​​1.減小頁面的大小

在頁面載入中，頁面的大小至今扮演著非常重要的因素。減小頁面的大小可以通過排除不必要空格，註釋，動態內嵌指令碼，和放入外部檔案的 CSS 等在頁面結構中很小的改變都能夠提高下載效能。

2.最小化檔案數量

減少一個頁面引用的檔案數量可以降低在下載一個頁面的過程中需要的HTTP請求數量。

根據其快取設定，瀏覽器可能會為每個 CSS/JavaScript/image 檔案傳送一個 If-Modified-Since 請求給網路伺服器，以查詢這些檔案自上次載入後是否有被修改。

通過減少連結至網頁的檔案數量，你可以減少傳送這些請求以及接收它們迴應的時間。

在查詢引用檔案是否被修改上花費太多時間會延遲網頁的初始化顯示，因為在渲染頁面之前瀏覽器必須確認每個 CSS 或 JavaScript 檔案的修改時間。

3.減少域名查詢

每個獨立的域名都會消耗DNS查詢的時間，頁面載入時間會隨著獨立域名數量、CSS連結數量、JavaScript還有圖片資源的數量增加而增加。

這條可能算不上實用，但總之，在你的頁面中儘量少的使用來自不同域名的資源連結。

4.快取重用的內容

確保任何內容可以被快取，並且擁有一個合理的有效期。

特別要注意 Last-Modified header 部分，它會讓頁面高效的快取。 自上次修改之後，這部分 header 指示將資訊傳遞給使用者代理（要載入這些資訊的檔案）。大部分網頁伺服器會自動追加 Last-Modified

所以，特別是動態產生的頁面，花點時間研究一下這個課題會是有益的。或許有些什麼關聯，無論怎樣，這麼做在那些不能被快取的網頁中都會節省很多的頁面請求。

5.高效的排列頁面元件

在頁面最初顯示時，會首先下載頁面內容以及所需的CSS和JavaScript，這樣在頁面載入時使用者可以最快獲得外觀的反饋。由於內容通常都是文字text，有利於在傳輸過程中壓縮，因此給使用者以更快的響應。

頁面中任何具有動態特性的資源需要在頁面被完全載入後才可以使用，所以最好在初始化時關閉動態特性（disable dynamic features ），等頁面載入完後再開啟它。這樣JavaScript就會在網頁內容之後才載入，有助於提升頁面載入的整體表現。

6.減少內聯指令碼數量

內聯指令碼在頁面載入過程中消耗很多資源，因為解析器認為內聯指令碼會改變頁面結構。通常，儘量少的使用內聯指令碼和減少用document.write()來輸出內容，在一定情況下可以加速整體頁面的載入。現在瀏覽器中一般使用現代的 W3C DOM 方法操作頁面內容，優於使用document.write()的傳統方法。

7.使用現代CSS和合法標記

使用現代CSS減少標記（markup）的用量，可以減少對（spacer）圖片的需求。在佈局方面，圖片通常可以用風格化的文字（text）來替代，這樣會“節省”許多資源。

使用合法標記還有其它優點。首先，瀏覽器在解釋HTML時無需做錯誤校正（除了一些哲理性的問題，例如，是允許使用者輸入格式不一致，而後再用程式“校準”或統一化呢？ 還是加強約束規則，限制使用者輸入的格式？）。

再者，合法標記可以讓那些給你的網站做預處理的工具功能最大化。例如，HTML Tidy 可以移除空白（whitespace）和可選的末尾標記（ending tags）；然而，在有嚴重的錯誤標記的網頁中這些工具便無法工作。

8.給內容分塊

用 <div> 替代基於TABLE的佈局或者將TABLE拆分為更小的TABLE，這樣不必下載完整的網頁內容就可以顯示一小部分的TABLE。

9.指定影象和表格大小

如果瀏覽器可以即時決定你的照片（images）和表格（tables）寬高，它在展示網頁時就不必進行內容重新排版。這不僅可以加速網頁的顯示，還能在網頁完成載入的過程中防止惱人的佈局改變。因此，圖片的 height 和 width 應儘可能確定下來。

表格可以使用 CSS 選擇器：綜合性能：

table-layout: fixed;

10.合理的選擇user-agent

為使頁面設計得到極大提升，應確保在工程中指定一個合理的user-agent。不要奢求你的內容在所有瀏覽器中都完美的展現，特別是在那些低版本的瀏覽器中。

理想情況下，你的頁面執行的最小環境要基於現代瀏覽器，這個瀏覽器起碼要支援一些相關的標準（如 html5 標準）。可以是最近版本的火狐，IE，谷歌Chrome，Opera還有Safari。

需要注意一下，這篇文章當中的許多tips都是些技術性常識，可以不必擔心瀏覽器的支援需求而應用到任何user-agent和網頁中去。

11.如果可能，使用async和defer

確保 JavaScript 指令碼相容 async 和 defer，任何時候都要儘可能使用 async，特別是當你有較多的 script 標籤（script tags）時。

這樣在載入 JavaScript 的哦過程中頁面就不會重新繪製，否則，瀏覽器在不具有這些特性的 script 標籤後就不會重繪任何東西。

注意：這些特性在頁面第一次載入時會有所幫助，你可以這樣用但不能指靠它在所有的瀏覽器中起作用。如果你遵循指南（guidelines）寫出了非常優秀的 JavaScript 程式碼，也不必要再去修改它了。