編寫快速載入的 HTML 頁面
最佳化後的網頁不僅能為訪客提供更快的響應速度，還能減少您的網路伺服器和網際網路連線的負載。這對於高流量網站或因突發新聞等異常情況導致流量激增的網站至關重要。本文介紹瞭如何根據常識和實驗來提高頁面載入時間。
最佳化頁面載入效能不僅適用於窄帶撥號或移動裝置訪客檢視的內容。它對於寬頻內容同樣重要，即使是連線速度最快的訪客也能帶來顯著的改進。
提示
減少頁面權重
頁面權重是影響頁面載入效能最重要的因素。
透過消除不必要的空白和註釋（通常稱為最小化），以及將內聯指令碼和 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），這當然無法完成，並且不會發送該標頭。
因此，特別是對於動態生成的頁面，對這個主題進行一些研究是有益的。它可能有點複雜，但它會為通常無法快取的頁面節省大量頁面請求。
更多資訊
最佳化頁面元件的順序
首先下載頁面內容，以及初始顯示可能需要的任何 CSS 或 JavaScript，以便使用者在頁面載入過程中獲得最快的感知響應。此內容通常是文字，因此可以在傳輸過程中受益於文字壓縮，從而為使用者提供更快的響應。
任何需要頁面完成載入才能使用的動態功能都應最初停用，然後在頁面載入後才啟用。這將導致 JavaScript 在頁面內容之後載入，從而改善頁面載入的整體外觀。
減少內聯指令碼的數量
內聯指令碼對於頁面載入而言可能代價高昂，因為解析器必須假設內聯指令碼在解析過程中可能會修改頁面結構。減少內聯指令碼的使用，特別是減少使用 document.write() 輸出內容，可以提高整體頁面載入速度。使用DOM API 來操作頁面內容，而不是 document.write()。
使用現代 CSS 和有效的標記
使用現代 CSS 可以減少標記量，可以減少佈局方面對（間隔）影像的需求，並且通常可以替換樣式化文字影像——它們的“成本”遠高於等效的文字和 CSS。
使用有效標記還有其他優點。首先，瀏覽器在解析 HTML 時無需執行錯誤修正（這與是否允許使用者輸入中的格式變化然後程式化地“修正”或規範化它；或者相反，強制執行嚴格、零容忍的輸入格式的哲學問題無關）。
此外，有效標記允許自由使用其他可以 預處理 您的網頁的工具。例如，HTML Tidy 可以刪除空白和可選的結束標籤；但是，它會拒絕在具有嚴重標記錯誤的頁面上執行。
分塊您的內容
用於佈局的表格是遺留方法，不應再使用。應改用利用浮動、定位、彈性盒或網格的佈局。
表格仍然被認為是有效的標記，但應僅用於顯示錶格資料。為了幫助瀏覽器更快地渲染您的頁面，您應該避免巢狀表格。
與其深度巢狀表格，如
<table>
<table>
<table>
…
</table>
</table>
</table>
不如使用非巢狀表格或 div，如
<table>
…
</table>
<table>
…
</table>
<table>
…
</table>
最小化和壓縮 SVG 資產
大多數繪圖應用程式生成的 SVG 通常包含可以刪除的不必要元資料。配置您的伺服器，對 SVG 資產應用 gzip 壓縮。
最小化和壓縮您的影像
大影像會導致您的頁面載入時間更長。考慮在將影像新增到頁面之前壓縮它們，可以使用影像處理工具（例如 Photoshop）內建的壓縮功能，或使用專門的工具（例如 Compress JPEG 或 Tiny PNG）。
為影像和表格指定尺寸
如果瀏覽器能夠立即確定影像和表格的高度和/或寬度，它將能夠在不重新排版內容的情況下顯示網頁。這不僅加快了頁面的顯示速度，而且防止了頁面載入完成時佈局出現煩人的變化。因此，應儘可能為影像指定 height 和 width。
表格應使用 CSS 選擇器：屬性組合
table-layout: fixed;
並應使用 <col> 和 <colgroup> 元素指定列寬。
對影像使用延遲載入
預設情況下，影像是急切載入的；也就是說，影像在 HTML 中處理後立即獲取並渲染。所有急切載入的影像都在視窗的 load 事件傳送之前渲染。切換到影像的延遲載入會告訴瀏覽器推遲載入影像，直到它們即將被需要以繪製可視視口。
要將影像標記為延遲載入，請將其 loading 屬性指定為值 lazy。設定此項後，影像只會在需要時載入。
<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 最佳實踐，則無需更改您的程式碼。
示例頁面結構
另見
- 書籍：《加速您的網站》作者 Andy King
- 透過 web.dev 學習效能 (2023)
- 用於分析和最佳化效能的工具：Google PageSpeed Tools 和 PageSpeed Insights