HTML 壓縮工具
新移除註解並摺疊空白以壓縮 HTML。
Runs entirely in your browser. Nothing is uploaded.
在同一個地方完成 HTML 壓縮與最小化
這款 HTML 壓縮工具會移除瀏覽器在渲染頁面時不需要的所有內容——包括註解、多餘的空白，以及標籤之間的換行與縮排——讓你交付的檔案在物理上更小，但外觀與功能完全不變。貼上你的標記語言或拖入 .html 檔案，壓縮後的結果會立即顯示，並附上精確的節省位元組數與百分比。
它同時也是一款 HTML 格式化工具與 HTML 美化器：一個切換開關即可在壓縮與反壓縮之間切換，同一個工具既能壓縮你的標記語言，也能將已壓縮的頁面還原成乾淨、有縮排的程式碼。所有操作都在你的瀏覽器中執行——無需上傳、無需帳號、無任何限制。
會移除什麼——以及絕對不會碰的部分
當你 壓縮 HTML 時，工具會移除註解（<!-- … -->）、合併連續空白、刪除區塊級標籤之間的間距、壓縮布林屬性（disabled="disabled" 變為 disabled），並可選擇性地刪除多餘的閉合標籤，如 </li> 和 </td>。條件式註解（<!--[if IE]>）一律保留。
最重要的是，它是安全的。<pre>、<textarea>、<script> 和 <style> 的內容在任何處理前都會受到保護，行內元素之間的單一空格——連結、<span>、<strong>——都會保留，讓你的文字不會連在一起。這與 kangax 的 HTMLMinifier（最廣泛使用的 HTML 壓縮函式庫，在 GitHub 上擁有超過 5,000 顆星）採用相同的安全模型。引號屬性值也受到保護，因此含有雙空格的 title 屬性會完整保留。
壓縮或美化——真正的雙向工具
需要閱讀被壓縮成一行的頁面嗎？切換到美化模式以反壓縮 HTML：工具會重新縮排標記語言、將標籤各自放在獨立的行上，讓結構一目了然。可選擇 2 格空白、4 格空白或 Tab 縮排，以符合你的專案風格。
由於壓縮與美化是可逆的，你可以貼上已壓縮的正式環境 HTML、閱讀它、調整它，然後再次壓縮——全程不需要離開頁面或安裝任何東西。PrettyDiff 和 Prettier 等工具也能進行類似的 HTML 格式化，但它們需要 Node.js 或瀏覽器擴充功能。這款工具在任何瀏覽器、任何裝置（包括手機）上都能立即使用，無需任何設定。
查看你節省的位元組數——包含 gzip
統計列會顯示原始大小、輸出大小，以及節省的位元組數和百分比，讓你隨時清楚掌握 HTML 縮小了多少。大小以實際的 UTF-8 位元組計算，而非字元數，因此與你的伺服器實際傳輸的數量一致。
它還會顯示在你的瀏覽器中本機計算的 gzip 估算值。壓縮與 gzip 可以疊加——先壓縮原始碼，再讓主機進行 gzip 壓縮——同時看到兩個數字能清楚呈現合併後的效益。Google 的 PageSpeed Insights 和 web.dev 都建議同時執行這兩個步驟。大多數競爭的 HTML 壓縮工具只顯示壓縮後的位元組數；這款工具同時顯示 gzip 估算值，而那才是真正決定你頁面透過網路載入速度的數字。
安全地壓縮內嵌 CSS 和 JavaScript
真實世界的頁面都帶有行內的樣式和行為。開啟壓縮內嵌 CSS，每個 <style> 區塊都會像專用的 CSS 壓縮工具一樣被壓縮——移除註解與空白，同時保護字串、url() 和 calc()，確保不會有任何問題。
壓縮內嵌 JS 以保守的方式處理 <script> 區塊：它移除註解並合併縮排，但刻意保留換行符號，以防依賴自動分號插入（ASI）的 JavaScript 被破壞。被標記為 JSON、模板或其他非 JavaScript 類型的腳本會被偵測到並保持不變。這種組合方式比依序執行 CSS 壓縮工具和 JS 壓縮工具更優，因為當這些工具分別應用於混合語言的 HTML 檔案時，可能會誤讀上下文。
與 HTMLMinifier.com、Minifier.org 和 Willpeavy 的比較
最熱門的競爭 HTML 壓縮工具——HTMLMinifier.com、Minifier.org 和 Willpeavy.com 的 HTML 壓縮工具——都在伺服器端處理你的 HTML。你貼上的每一段程式碼都會透過網路傳送到第三方伺服器。對於公開的測試 HTML 來說這沒問題；但對於客戶的作品、未發布的頁面，或任何包含驗證 Token、私密內容或表單資料的 HTML 來說，這是真實存在的隱私風險。Minifycode.com 也有相同的限制。
這款工具完全在你的瀏覽器中執行。壓縮你的 HTML 的 JavaScript 在頁面載入時下載一次，之後就在本機執行——沒有伺服器介入，沒有資料傳輸。對於 WordPress 網站，它填補了 WP Rocket、LiteSpeed Cache 和 Autoptimize 等外掛無法觸及的缺口：個別模板片段、自訂區塊，以及繞過外掛自動壓縮的 HTML 電子郵件。在提交模板變更之前用它做快速檢查，或作為不使用建置系統的專案的主要壓縮工具。
Frequently asked questions
什麼是 HTML 最小化（HTML minification）？
HTML 最小化會移除瀏覽器在渲染頁面時不需要的所有字元——包括註解、換行符號、縮排，以及標籤之間的空白——而不改變頁面的外觀或功能。例如，'<ul>\n <li>一</li>\n <li>二</li>\n</ul>'（約 40 個位元組）最小化後變成 '<ul><li>一</li><li>二</li></ul>'（約 30 個位元組）。訪客看到的清單完全相同。每個片段節省的量看起來很小，但真實的 HTML 頁面充滿縮排和 CMS 生成的標記，通常可以縮小 15–25%——與伺服器的 gzip 壓縮結合後效果更佳。
為什麼要壓縮 HTML？
較小的 HTML 意味著更少的位元組需要下載，瀏覽器解析的工作也更少，因此頁面載入更快——這能改善首次內容繪製（FCP）和核心網頁指標（Core Web Vitals）分數，在手機上尤其明顯。Google 的 PageSpeed Insights 將未壓縮的 HTML 標記為標準效能問題，並將其納入改善建議中。對於充滿縮排和開發者註解的手寫頁面或 CMS 生成頁面，效益最大。你每削減一個 KB，就是訪客永遠不需要下載的一個 KB，這在頻寬有限的緩慢行動網路連線上最為重要。
壓縮時會移除哪些內容？
會移除的內容包括：註解（<!-- … -->）、連續的空白、標籤之間的縮排與換行，以及區塊級元素之間的間隔。壓縮工具還會合併布林屬性（例如 'disabled="disabled"' 變成 'disabled'），並可選擇性地刪除多餘的閉合標籤，如 </li> 和 </td>。條件式註解（<!--[if IE]>）一律保留，因為它們對於舊版 IE 定向仍然重要。<pre>、<textarea>、<script> 和 <style> 的內容絕不會被修改——這些元素內的空白具有意義，更改它們會破壞頁面。
壓縮 HTML 值得嗎？
值得，尤其是當 HTML 還沒有經過建置步驟處理的情況下。手寫的頁面、從 CMS 匯出的頁面、在 WordPress 主題中組合的頁面，以及 HTML 電子郵件和行內 <style>/<script> 區塊，都帶著縮排和註解，而壓縮可以免費清除這些。如果像 Vite 或 webpack 這樣的打包工具已經在壓縮你的輸出，那些檔案就不需要再壓縮一次——但大多數真實世界的 HTML 從來沒有經過打包工具處理。Jekyll 和 Hugo 等靜態網站生成器將 HTML 壓縮器作為可選外掛，而 WP Rocket、LiteSpeed Cache 和 Autoptimize 等 WordPress 外掛則會自動為每個頁面渲染進行壓縮。
壓縮後的 HTML 能縮小多少？
以原始文字來說，壓縮通常可節省 10–25%。一個 30 KB 的手寫頁面通常可縮小到約 24 KB，而像 '<ul>\n <li>一</li>\n <li>二</li>\n</ul>'（40 個位元組）這樣的小片段可縮小到 30 個位元組——約小了 25%。一旦你的伺服器對結果進行 gzip 壓縮，合併後的縮減幅度通常為 70–85%。這款工具會並排顯示壓縮後的大小和 gzip 估算值，讓你一次看到兩個數字。gzip 估算是在你的瀏覽器中本機計算的——不是在伺服器上——所以你可以在不上傳任何內容的情況下看到真實的合併節省量。
壓縮 HTML 會破壞頁面嗎？
當安全地進行時不會，而這正是這款工具的運作方式。它永遠不會碰 <pre>、<textarea>、<script> 或 <style> 的內容（這些地方的空白具有意義），並且保留行內元素之間的單一空格——例如連結和 <span>——所以 'a <a href="/x">連結</a> 在此' 永遠不會變成 'a連結在此' 連在一起。有些快速的線上壓縮工具會合併這些空白，從而微妙地改變渲染或版面配置。Kangax 的 HTMLMinifier（最受歡迎的 Node.js HTML 壓縮函式庫）出於同樣的原因採用了類似的預設安全方法。如果壓縮後你發現渲染有任何差異，可以使用美化模式來還原原始結構。
如何反壓縮或美化 HTML？
使用頂部的切換開關切換到美化模式，然後貼上你的壓縮 HTML。工具會重新縮排標記語言並將標籤各自放在獨立的行上，將 '<ul><li>一</li><li>二</li></ul>' 還原成可讀的格式化程式碼。選擇 2 格空白、4 格空白或 Tab 縮排，以符合你的專案風格。這是壓縮的反向操作——適用於：檢查你在正式環境中找到的壓縮頁面、閱讀被建置工具壓扁的 CMS 模板，或者透過清晰排列的完整標籤結構來除錯版面配置問題。
壓縮（minification）和 gzip 壓縮有什麼不同？
壓縮（minification）會縮小原始文字本身——你交付的是物理上更小的 .html 檔案。Gzip 和 Brotli 在傳輸過程中壓縮位元組，瀏覽器到達後會透明地解壓縮。兩者可以疊加使用：先壓縮原始碼，然後讓你的伺服器進行 gzip 壓縮。Google 的 web.dev 建議同時進行這兩個步驟——壓縮可以消除 gzip 無法完全壓縮的位元組，而 gzip 則處理壓縮後剩餘的重複模式。這就是為什麼這款工具同時顯示壓縮後的位元組數和 gzip 估算值，讓你在部署前後都能看到完整的合併效益。
壓縮（minification）和混淆（obfuscation）有什麼不同？
壓縮（minification）在保持 HTML 有效且完全可讀（美化後）的同時使其變小——它只刪除瀏覽器忽略的字元。混淆（obfuscation）則刻意打亂或改寫程式碼，使其難以理解或複製。壓縮 HTML 絕不會重新命名你的 class、ID 或內容，也不會改變意義；它是無損且可逆的，而混淆則不是。如果你想防止他人閱讀你的 HTML 原始碼（無論如何，瀏覽器都會透過「檢視原始碼」功能暴露這些內容），單靠壓縮並沒有幫助——你需要壓縮工具範疇之外的額外技術。
我可以同時壓縮內嵌的 CSS 和 JavaScript 嗎？
可以，一次完成。保持「壓縮內嵌 CSS」開啟，工具就會壓縮每個 <style> 區塊的內容——移除註解和空白，同時保護字串、url() 和 calc()。「壓縮內嵌 JS」以保守的方式處理 <script> 區塊：它移除註解並合併空白，但保留換行符號，以防自動分號插入（ASI）破壞你的程式碼。被標記為 JSON 或模板的腳本保持不變。這種組合方法填補了純 CSS 壓縮工具和純 JS 壓縮工具都無法覆蓋的空缺——將三種語言混合在一起的 HTML 頁面。
在線上壓縮 HTML 安全嗎？
使用這款工具是安全的——因為它使用 JavaScript 100% 在你的瀏覽器中執行。你的 HTML 永遠不會被上傳、記錄或儲存在任何地方，因此即使是未發布的頁面、客戶作品或包含私密資料的標記語言也完全保留在你的裝置上。你可以透過斷開網路連線來驗證：壓縮工具仍然可以離線運作，因為沒有伺服器參與。相比之下，HTMLMinifier.com 和 Minifier.org 都會將你的 HTML 發送到遠端伺服器進行處理。Willpeavy.com 的 HTML 壓縮工具也需要伺服器往返。對於機密專案，在瀏覽器本機處理是唯一安全的選擇。
如何在 WordPress 中壓縮 HTML？
你有兩種選擇。若要一次性處理，複製你渲染後的頁面原始碼（或模板的輸出）並貼到這裡進行壓縮。若要自動處理每個頁面，快取或優化外掛可以即時壓縮 HTML：WP Rocket、W3 Total Cache、LiteSpeed Cache 和 Autoptimize 都包含 HTML 壓縮設定。WP Rocket 和 LiteSpeed Cache 對於擁有大量動態內容的複雜主題最為可靠。這款工具非常適合用於這些外掛不會自動覆蓋的主題片段、自訂區塊和 HTML 電子郵件模板，例如 Elementor 自訂區段或 ACF 欄位模板。
這款工具與 HTMLMinifier.com 或 Minifier.org 相比如何？
HTMLMinifier.com 和 Minifier.org 是熱門的線上 HTML 壓縮工具，但兩者都會將你的 HTML 發送到遠端伺服器進行處理。這意味著你的標記語言——包括任何未發布的頁面、表單中的密碼或私密的客戶作品——都會離開你的裝置。Minifycode.com 是另一款具有相同限制的伺服器端工具。這款工具在瀏覽器本機完成所有操作，因此沒有任何內容被上傳。功能方面，它在同一個介面中新增了雙向美化器、即時 gzip 估算以及內嵌 CSS/JS 壓縮——全程無需頁面重新載入或伺服器往返。
這款 HTML 壓縮工具能在 iPhone 和 Android 上使用嗎？
可以，它完全支援行動裝置——從剪貼簿貼上 HTML，立即看到壓縮結果，然後複製回去。介面會自動適應小螢幕。已在 iOS 的 Safari 和 Android 的 Chrome 上測試過。一個常見的行動裝置使用情境是：在提交變更之前，檢查頁面模板壓縮後能縮小多少——你可以從行動瀏覽器的「檢視原始碼」功能貼上 HTML，當場查看節省量。無需下載 App，無需註冊，行動裝置上也沒有使用限制。頁面載入後，即使沒有網路連線也能使用。
