編寫快速載入 HTML 頁面的小貼士

這些小貼士基於通用知識和實驗。

最佳化的網頁不僅為您的訪問者提供更快的響應網站，還能減少 Web 伺服器和網際網路連線的負載。這對高流量網站或由於突發事件（例如突發新聞報道）而出現流量激增的網站至關重要。

最佳化頁面載入效能不僅適用於窄帶撥號或移動裝置訪問者瀏覽的內容。這對寬頻內容同樣重要，即使對於擁有最快連線的訪問者，也能帶來顯著的改進。

小貼士

減輕頁面重量

頁面重量是影響頁面載入效能的最重要因素。

透過消除不必要的空格和註釋（通常稱為最小化），以及將內聯指令碼和 CSS 移動到外部檔案，可以減輕頁面重量，從而在無需對頁面結構進行大量更改的情況下提高下載效能。

諸如 HTML Tidy 之類的工具可以自動從有效的 HTML 原始碼中刪除前導空格和額外的空行。其他工具可以“壓縮” JavaScript，方法是重新格式化原始碼或透過混淆原始碼並將較長的識別符號替換為較短的版本。

最小化檔案數量

減少網頁中引用的檔案數量，可以減少下載頁面所需的 HTTP 連線次數，從而縮短髮送請求和接收響應的時間。

根據瀏覽器的快取設定，它可能會為每個引用的檔案傳送一個帶有 If-Modified-Since 標頭的請求，詢問該檔案是否自上次下載後已修改。花費太多時間查詢引用的檔案的上次修改時間會導致網頁的初始顯示延遲，因為瀏覽器必須在渲染頁面之前檢查每個檔案的修改時間。

如果您在 CSS 中大量使用背景影像，可以透過將影像合併成一張稱為影像精靈的影像來減少所需的 HTTP 查詢次數。然後，您只需在每次需要背景影像時應用相同的影像，並相應地調整 x/y 座標即可。此技巧最適合尺寸有限的元素，並不適用於所有背景影像的使用場景。但是，更少的 HTTP 請求和單影像快取有助於縮短頁面載入時間。

使用內容分發網路 (CDN)

對於本文而言，CDN 是一種縮短伺服器與訪問者之間物理距離的方法。隨著伺服器源和訪問者之間距離的增加，載入時間也會增加。假設您的網站伺服器位於美國，而訪問者來自印度；與美國訪問者相比，印度訪問者的頁面載入時間將長得多。

CDN 是一組地理分散式伺服器，這些伺服器協同工作，縮短使用者與您網站之間的距離。CDN 會儲存您網站的快取版本，並透過最靠近使用者的網路節點向訪問者提供這些版本，從而減少 延遲。

進一步閱讀

減少域名查詢

由於每個獨立的域名都會在 DNS 查詢中花費時間，因此頁面載入時間會隨著 CSS 連結和 JavaScript 以及影像 src 中出現的獨立域名數量的增加而增加。

這可能並不總是可行的；但是，您應該始終注意僅在頁面中使用必要的最小數量的獨立域名。

快取重複使用的內容

確保所有可以快取的內容都已快取，並設定適當的過期時間。

尤其要注意 Last-Modified 標頭。它允許高效地快取頁面；透過此標頭，可以向用戶代理傳達有關其想要載入的檔案的資訊，例如上次修改時間。大多數 Web 伺服器會根據檔案系統中儲存的上次修改日期，自動將 Last-Modified 標頭附加到靜態頁面（例如 .html、.css）。對於動態頁面（例如 .php、.aspx），當然無法這樣做，並且不會發送該標頭。

因此，對於動態生成的頁面，對此主題進行一些研究將大有裨益。這可能有點複雜，但它會在通常不可快取的頁面上節省大量頁面請求。

更多資訊

  1. HTTP 條件獲取用於 RSS 駭客
  2. HTTP 304：未修改
  3. 維基百科上的 HTTP ETag
  4. HTTP 中的快取

以最佳順序排列頁面元件

首先下載頁面內容，以及初始顯示可能需要的任何 CSS 或 JavaScript，以便使用者在頁面載入期間獲得最快的明顯響應。此內容通常是文字，因此可以在傳輸過程中從文字壓縮中獲益，從而為使用者提供更快的響應。

任何需要頁面完全載入後才能使用的動態功能，都應該先停用，然後僅在頁面載入完畢後啟用。這會導致 JavaScript 在頁面內容之後載入，從而改善頁面的整體載入外觀。

減少內聯指令碼的數量

內聯指令碼可能會導致頁面載入速度變慢，因為解析器必須假設內聯指令碼可能會在解析過程中修改頁面結構。通常減少內聯指令碼的使用，尤其減少 document.write() 用於輸出內容的使用，可以提高頁面的整體載入速度。使用 DOM API 操作頁面內容，而不是 document.write()。

使用現代 CSS 和有效的標記

使用現代 CSS 可以減少標記量，可以減少對（間隔）影像的需求（在佈局方面），並且通常可以替換帶有樣式化的文字的影像——這些影像的“成本”遠高於等效的文字和 CSS。

使用有效的標記還有其他優勢。首先，瀏覽器在解析 HTML 時無需執行錯誤更正（這與是否允許使用者輸入格式變化，然後以程式設計方式“更正”或規範化它；或者是否應該強制執行嚴格的、不容忍的輸入格式這一哲學問題無關）。

此外，有效的標記允許自由使用可以預處理您的網頁的其他工具。例如，HTML Tidy 可以刪除空格和可選的結束標籤；但是，它會拒絕在標記錯誤嚴重的頁面上執行。

將內容分塊

用於佈局的表格是一種遺留方法，現在應該不再使用。應該使用利用 浮動、定位、Flexbox 或 網格 的佈局。

表格仍然被視為有效的標記，但應該用於顯示錶格資料。為了幫助瀏覽器更快地渲染您的頁面，您應該避免巢狀表格。

而不是像以下程式碼一樣深度巢狀表格

html
<table>
  <table>
    <table>
      …
    </table>
  </table>
</table>

應該使用非巢狀表格或 div，如以下程式碼所示

html
<table>
  …
</table>
<table>
  …
</table>
<table>
  …
</table>

另請參閱：CSS 彈性盒子佈局 和 CSS 網格佈局 規範。

最小化和壓縮 SVG 資源

大多數繪圖應用程式生成的 SVG 通常包含不必要的元資料，可以將其刪除。配置您的伺服器，對 SVG 資源應用 gzip 壓縮。

最小化和壓縮您的影像

大型影像會導致頁面載入時間更長。請考慮在將影像新增到頁面之前壓縮您的影像，使用 Photoshop 等影像處理工具中的內建壓縮功能，或使用專用的工具，如 Compress Jpeg 或 Tiny PNG。

為影像和表格指定尺寸

如果瀏覽器可以立即確定影像和表格的高度和/或寬度，它將能夠在無需重新排列內容的情況下顯示網頁。這不僅加快了頁面的顯示速度，還防止了頁面載入完成後頁面佈局出現惱人的變化。因此，在可能的情況下，應該為影像指定 height 和 width。

表格應該使用 CSS 選擇器：屬性組合

css
table-layout: fixed;

並且應該使用 <col> 和 <colgroup> 元素指定列的寬度。

對影像使用延遲載入

預設情況下，影像以急切方式載入；也就是說，影像會在 HTML 中處理後立即獲取並渲染。所有急切載入的影像都在視窗的 load 事件傳送之前渲染。切換到影像延遲載入會告訴瀏覽器等到需要繪製 視覺視窗 時再載入影像。

要對影像進行延遲載入，請將其 loading 屬性指定為 lazy。設定後，影像只會在需要時載入。

html
<img src="./images/footerlogo.jpg" loading="lazy" alt="MDN logo" />

請注意，延遲載入的影像可能在觸發 load 事件時不可用。您可以透過檢查其布林值 complete 屬性的值是否為 true 來確定給定影像是否已載入。

明智地選擇您的使用者代理需求

為了在頁面設計中獲得最大的改進，請確保為專案指定合理的使用者代理需求。不要要求您的內容在所有瀏覽器中都以畫素完美的方式顯示，尤其是在低版本瀏覽器中。

理想情況下，您的基本最低要求應基於對支援相關標準的現代瀏覽器的考慮。這可能包括 Firefox、Google Chrome、Opera 和 Safari 的最新版本。

但是請注意，本文中列出的許多技巧都是適用於任何使用者代理的常識技術，並且可以應用於任何網頁，而與瀏覽器支援需求無關。

如果可能，使用 async 和 defer

使 JavaScript 指令碼與 async 和 defer 屬性相容，並在可能的情況下使用 async，尤其是在您有多個指令碼元素時。

這樣，頁面可以在 JavaScript 仍在載入時停止渲染。否則，瀏覽器將不會渲染任何在沒有這些屬性的指令碼元素之後的元素。

注意：雖然這些屬性在頁面首次載入時確實非常有用，但您應該使用它們，但不要假設它們會在所有瀏覽器中都能正常工作。如果您已經遵循所有 JavaScript 最佳實踐，則無需更改您的程式碼。

示例頁面結構

  • <html>
    • <head>
      • <link> 頁面外觀所需的 CSS 檔案。為提高效能，請將檔案數量降至最低，同時將不相關的 CSS 保留在單獨的檔案中以進行維護。
      • <script> 頁面載入期間 **需要** 的函式的 JavaScript 檔案，但任何與互動相關的 JavaScript 只能在頁面載入後執行。為提高效能，請將檔案數量降至最低，同時將不相關的 JavaScript 保留在單獨的檔案中以進行維護。
    • <body> 使用者可見的頁面內容，以小塊的形式（<header>/ <main>/ <table>），可以在不等待整個頁面下載的情況下顯示。
      • <script> 用於執行互動性的任何指令碼。互動指令碼通常只能在頁面完全載入且所有必要的物件都已初始化後才能執行。在頁面內容之前載入這些指令碼沒有必要。這隻會減慢頁面載入的初始外觀。為提高效能，請將檔案數量降至最低，同時將不相關的 JavaScript 保留在單獨的檔案中以進行維護。

另請參閱