免費轉換器

HTML 壓縮工具

在瀏覽器中即時壓縮和最小化HTML程式碼。刪除注釋、合併空白,縮小檔案大小。免費且私密。

將HTML檔案拖曳到此處

支援.html和.htm檔案。或在上方貼上您的HTML。

關於此工具

HTML 縮小會從網頁來源移除不必要的字元(標籤之間的空格、註解、冗餘引號、可選的結束標籤),以減少檔案大小而不改變頁面的呈現方式。每頁節省的費用不大(通常為 10-30%),但在許多請求中會增加,特別是對於靜態網站或沒有動態壓縮的頁面。

此縮小器刪除區塊級元素之間的空格,折疊不重要文字內的空格,刪除 HTML 註解(IE 條件註解除外),刪除 HTML5 規範允許的冗餘屬性引號,並在規範允許的情況下省略可選的結束標記(</p>、</li>)。結果在每個瀏覽器中呈現與來源相同。

縮小在伺服器層級與 gzip 或 Brotli 壓縮配合使用時最有用。壓縮已經消除了縮小所帶來的大部分節省,但兩者結合起來仍然擊敗了單獨的壓縮——特別是對於頻寬成本很重要的高流量站點。

為什麼要縮小 HTML

較小的 HTML 載入速度更快,尤其是在較慢的連線和行動網路上。頁面權重直接影響核心 Web 生命-當伺服器傳回較少的 HTML 進行解析時,最大內容繪製和首字節時間都會得到改善。對於 SEO 排名取決於 Core Web Vitals 分數的網站,縮小是一個可衡量的改進。

縮小的 HTML 還可以大規模降低頻寬成本。一個網站每天提供 100 萬個頁面,每頁節省 10 KB,每天可節省 10 GB 的出站流量。由按資料傳輸計費的 CDN 提供服務的靜態站點的影響複合。

使用方法

貼上 HTML,取得縮小版本。

  1. 新增 HTML 輸入: 將 HTML 原始碼貼到輸入區域或拖放 .html 檔案。縮小器接受任何有效的 HTML5 標記。
  2. 選擇選項: 預設刪除註釋並折疊空格;如果您需要保留特定元素(例如,保留文件註釋),您可以停用單獨的轉換。
  3. 縮小: 壓縮器遍歷 HTML 令牌流,套用每個啟用的轉換。輸出是功能相同的 HTML,但尺寸較小。
  4. 複製或下載: 使用結果作為提供的 HTML。部署前確認頁面在目標瀏覽器中正確呈現。

常見用例

技術細節

壓縮器逐一處理 HTML 令牌。區塊級元素(<div>、<p>、<ul>)之間的空白將被刪除,因為它不會影響渲染。內嵌上下文(<span>、<a>、文字內容)內的空白會被保留,因為它會影響渲染。

預設情況下,註解會被刪除,但條件註解 (<!--[if IE]>) 會被保留。在 HTML5 解析器允許的情況下刪除屬性引號 — 不含空格或特殊字元的單字屬性值可以省略引號。

根據 HTML5 規範,可選的結束標記被省略:</p>、</li>、</td>,並且當後面跟著暗示其結束的同級標記時,其他一些標記可以被省略。這是不常見的,但瀏覽器解析的有效 HTML5 是相同的。

最佳實踐

常見問題

HTML 縮小會刪除什麼?
標籤之間不必要的空格、HTML 註解 (<!-- -->)、可選的結束標籤 (</li>、</p>、</td>)、預設屬性值(輸入上的 type="text")和布林屬性值(disabled="disabled" → 停用)。
縮小會破壞我的頁面嗎?
很少,但如果您的 CSS 依賴內聯元素之間的空格或 JavaScript 使用innerHTML 比較,則有可能。始終測試縮小的輸出。該工具預設使用保守設定。
如果我使用像 Next.js 這樣的框架,我應該縮小 HTML 嗎?
大多數現代框架(Next.js、Nuxt、Angular)都會在生產版本中自動縮小 HTML。該工具對於靜態 HTML 檔案、電子郵件範本和沒有建置系統的專案非常有用。
這也會縮小內嵌 CSS 和 JavaScript 嗎?
該工具專注於 HTML 結構。內嵌 <style> 和 <script> 內容按原樣保留。對於這些,請使用專用的 CSS 和 JavaScript 縮小器以獲得最佳結果。
可選的結束標籤可以安全移除嗎?
根據 HTML5 規範,是的,儘管結果更難閱讀。為了清楚起見,一些團隊禁用了這種轉換,並接受了輕微的尺寸損失。
我的 HTML 是否上傳到伺服器?
不會。壓縮器在您的瀏覽器中運作。
這與 html-minifier-terser 相比如何?
html-minifier-terser 是規範的 Node.js HTML 壓縮器,會產生稍微更激進的結果。該工具涵蓋了瀏覽器端使用的相同轉換,無需建置設定。
我應該始終縮小還是有選擇地縮小?
始終用於生產。絕不用於版本控制中的原始程式碼;原始程式碼中可讀的 HTML 對於維護至關重要。