HTML 壓縮是如何運作的？
壓縮器以一個小型狀態機走訪你的輸入，區分需原樣保留的區域（<pre>、<textarea>、<script>、<style>）與可安全折疊空白和注釋的可編輯區域。
- 保留區塊的 tokenize. 掃描器逐字元讀取輸入，遇到
<pre>、<textarea>、<script>或<style>的開始標籤時切換至保留狀態。這些標籤內的所有內容都以逐位元組方式複製，直到遇到相符的關閉標籤。 - 折疊可編輯空白. 在可編輯區域，掃描器將每段連續的空格、定位字元和換行折疊為單一空格，然後修剪標籤邊界周圍的前後空白。可見文字的重排方式與瀏覽器渲染結果相同。
- 移除注釋. 開啟切換時，
<!-- ... -->區塊會被移除。開啟保留條件注釋切換時，IE 條件注釋（<!--[if IE]> ... <![endif]-->）會保留，因為舊版電子郵件客戶端仍依賴它們。 - 折疊布林屬性.
checked="checked"、disabled="disabled"和required="required"等冗長形式會縮短為純屬性名稱。HTML5 規範將這種簡短形式視為語意上完全相同，因此渲染後的 DOM 保持不變。 - 回報位元組差異. 原始文字與壓縮文字都以
new TextEncoder().encode(...).byteLength測量——這正是 CDN 或 HTTP 伺服器在連線上看到的 UTF-8 位元組數。指標列顯示原始大小、壓縮後大小、節省的位元組數以及節省百分比。
為什麼要壓縮 HTML？
- 更快的頁面載入. 更小的 HTML 更快抵達瀏覽器，parser 也更早完成解析。在行動網路上，位元組節省直接轉化為更快的 First Contentful Paint 和更好的 Lighthouse 效能分數。
- 更低的 CDN 出網費用. CloudFront、Cloudflare 和 Fastly 按每 GB 出網流量計費。每月數百萬次瀏覽中 HTML 減少 20%，在帳單上會累積出真實節省，這還是在任何圖片或腳本優化到位之前。
- 更整潔的 pull-request diff. 提交到 repo 的預建靜態 HTML 在每次範本調整重新排版縮排時都會產生雜訊。dist 資料夾中的壓縮 HTML 產生更緊湊的 PR diff，聚焦於真正的內容變更而非空白干擾。
- 更小的嵌入與程式碼片段. 電子郵件範本、第三方 widget 程式碼片段，以及儲存在 JSON 或 YAML 設定檔中的 HTML，都能受益於同樣的位元組縮減。壓縮後的嵌入讓交易郵件保持在 ESP 大小上限之下，並縮小 widget bundle。
常見應用場景
HTML 壓縮幾乎出現在每個靜態網站或 JAMstack 建置流程的最後一步，以及少數 runtime 情境中，在這些情境下位元組比原始碼可讀性更重要。
- 靜態網站建置步驟：Eleventy、Hugo、Astro 和 Next.js 正式建置在將 HTML 寫入 dist 資料夾前先通過壓縮器，使部署的 bundle 小於原始碼。
- 交易電子郵件：ESP（SendGrid、Postmark、Mailgun）限制 HTML 內文大小，而內嵌 CSS 擴充會迅速累積這個數字。傳送前先壓縮內文可讓郵件保持在上限之下。
- 嵌入式 widget：以內嵌 HTML 形式發布的第三方 widget 和聊天程式碼片段，受益於每一個位元組的縮減，因為宿主頁面在每次訪問時都必須下載它們。
實際操作範例
貼上一個 500 位元組的冗長表單片段，含兩空格縮排、列之間三個換行、頂部的 HTML 注釋區塊，以及 <input type="checkbox" checked="checked" />。開啟所有選項後，輸出折疊至約 300 位元組——節省約 40%——而渲染後的 DOM 樹與原始碼位元組完全相同。
壓縮會破壞我的 HTML 嗎？
使用預設切換時不會。壓縮器原樣保留 <pre>、<textarea>、<script> 和 <style> 標籤的內容，開啟對應切換時保留 IE 條件注釋，並只折疊 HTML5 parser 已歸類為無意義的空白。渲染後的 DOM 樹與原始碼位元組完全相同。進階切換（移除空屬性）可能改變刻意使用 value="" 或 alt="" 的片段行為，因此如果開啟它們，請檢視輸出。
這個工具會壓縮內嵌 CSS 和 JS 嗎？
此工具不會。內嵌 <style> 和 <script> 的內容會原樣保留，以防壓縮器因折疊字串字面值或正規表達式內的空白而破壞 CSS 規則或 JS 敘述。CSS 特定壓縮請使用 CSS Minifier；JS 請使用 JS Minifier。HTML 壓縮器聚焦於 markup 本身。
我能節省多少？
手工撰寫的 HTML 典型節省範圍為 10 到 30%，取決於原始碼使用多少縮排、空行和冗長屬性形式。Next.js 等框架的預建靜態 HTML 通常節省 15 到 25%，因為框架已做部分優化但保留了人類可讀的空白。注釋豐富的範本和深度嵌套的電子郵件式 HTML 可達 40% 或更多。
pre 的內容會保留嗎？
會。壓縮器明確將 <pre>、<textarea>、<script> 和 <style> 區塊 tokenize 為原樣保留區域，並逐位元組將其內容複製到輸出。這些標籤內的空白、換行和縮排完全保持不變，因此程式碼範例和 ASCII art 在壓縮後渲染效果完全相同。
瀏覽器端的 HTML 壓縮讓你的建置流程保持簡單、markup 保持精簡。在上方貼上任意 HTML，調整選項切換，然後複製或下載壓縮輸出——無需上傳、無需帳號、無需第三方函式庫。