数据

HTML 压缩

访客下载的每一个 HTML 字节，都是浏览器在构建页面前要等待的字节，而大多数标记里都带着构建步骤本该清掉的冗余——缩进、注释，以及标签之间的空白。这个压缩工具一次粘贴就能去掉它们。由于真实页面里通常内嵌样式和脚本，它还会压缩 <style> 里的 CSS 和 <script> 里的 JavaScript，让整个文档更小，并把原始、压缩后与 gzip 三个体积并排显示，省了多少一目了然。三档强度决定标记改写走到哪一步；凡是引擎无法安全压缩的部分，都会列在输出下方，保持原状而不是被改坏。全部在浏览器内完成。

917 B
已省 0%
正在加载压缩引擎
8%
压缩引擎只需下载一次，本次访问期间会被缓存。
强度
选项

功能简介

压缩工具值得用的前提，是你能信任它的输出、并看得见收益。这个工具两点兼顾：不必逐行复核就能上线的压缩，以及证明值得做的数字。

  1. 01

    三档压缩强度

    「安全」把每段连续空白折叠成一个空格，不改写任何标签或属性，所以即使某个元素被 CSS 改成 display: inline，渲染也完全一致。「标准」删掉标签之间的空白，以及 HTML5 本就默认、写不写都一样的那些属性。「最大」再删除取默认值和为空的属性，简化 doctype，并排序属性与类名，让文件更好压缩。属性的引号即使在这一档也会保留：去掉引号经 gzip 后只省半个百分点，却会产出某些格式化工具打不开的标记。

  2. 02

    内嵌 CSS 与 JS 一并压缩

    真实页面很少只有标记。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会在同一步压缩，你不必再用别的工具单独挤这些字节。

  3. 03

    不会悄悄改坏任何东西

    CSS 引擎会直接删掉嵌套规则；遇到少写冒号的声明，它会把那一行当成选择器，连后面一条规则一起吞掉——两种情况都不吭一声。这里会先逐个检查 <style> 块，凡是过一遍就会受损的块，一律不压缩、规则原样留下，并列在输出下方。

  4. 04

    删注释，留条件注释

    默认删除 HTML 注释（它们从不出现在渲染页面上），但保留有含义的条件注释。调试时可用一个开关保留全部注释。

  5. 05

    可信的体积明细

    输入与输出两侧的原始、压缩后与 gzip 体积随输入实时更新，旁边是精确的节省百分比。gzip 这个数字才对应真正经网络传输的大小。

  6. 06

    复制、下载或上传

    从剪贴板粘贴，或从磁盘打开不超过 2 MB 的 .html 文件，然后复制结果或保存下来：page.html 会得到 page.min.html。整个流程只需几秒，且不接触服务器。

如何使用

只需几步，就能把可读页面变成可上线的最小版本，而且收益全程摆在眼前。

  1. 01

    把 HTML 粘贴到输入栏，或用「上传」直接从磁盘打开 .html 文件。

  2. 02

    选择强度。日常用「标准」；布局依赖具体间距时退回「安全」；想榨出最后几个字节就切到「最大」。

  3. 03

    保持「压缩 CSS」「压缩 JS」开启以压缩内嵌代码，只在需要时才保留注释，并读一读工具列出的跳过项。

  4. 04

    核对输出旁的明细，然后复制压缩后的 HTML，或下载为 .min.html 文件，再接入提供生产标记的页面或构建步骤。

功能说明

让输出可放心上线、值得快速信任的那些细节。

  • 基于 html-minifier-terser：它解析标记，并用成熟的优化器压缩内嵌的 CSS 与 JS，而不是盲目的文本替换。
  • CSS 引擎被明确禁止跟进 @import。你用 URL 引用的样式表仍然只是一处引用，不会有任何请求离开浏览器。
  • 每个 <style> 块都会在交给引擎之前先检查一遍，所以嵌套 CSS 和读不懂的声明会被报出来并原样保留，而不是无声消失。
  • gzip 体积用浏览器内置的压缩来测量，所以这个数字反映真实服务器会发送的大小。
  • 不上传、不记录。粘贴的 HTML（包括未发布内容）留在浏览器里，关闭标签页后即消失。

适合哪些场景

把 HTML 削到最精简，在这些场景里最划算。

  1. 让页面更快

    更小的标记更早抵达浏览器、更早解除解析阻塞，有助于 First Contentful Paint 以及搜索引擎看重的 Core Web Vitals。

  2. 没有打包器的构建步骤

    在静态站点、落地页或邮件模板里没跑打包器时，把 HTML 粘到这里，就能得到与流水线相同的压缩。

  3. 内联关键路径文档

    当你交付一个把 CSS 和 JS 都内联进来的自包含 HTML 文件时，三者一起压缩，就是精简负载与臃肿负载的差别。

  4. 精简生成的标记

    模板引擎、CMS 或邮件搭建器的输出常常未压缩。在这里过一遍，就能在抵达用户前把字节省回来。

延伸阅读

想读而不是压？HTML 格式化 能把压缩后的标记还原成可读文档；只处理样式表时，CSS 压缩 以同样方式压缩 CSS。

压缩 HTML 到底做了什么

压缩不是混淆，也不等于 gzip 压缩。它去掉浏览器不需要的字符，同时让渲染结果完全一致。下面是去掉了什么，以及为什么安全。

  1. 标签之间的空白

    让标记可读的缩进与换行，浏览器大多会忽略，所以会被折叠。例外是 pre 与 textarea 里的空白，以及行内元素之间那一个会影响布局的空格——这些都会保留。

  2. 注释

    HTML 注释是写给人看的、从不渲染，所以会被完全删除。例外是面向特定浏览器的条件注释，它们会被保留。

  3. 内嵌的代码

    样式和脚本就住在 HTML 里，只整理标记的压缩工具会把大部分体积留在原地。压缩 <style> 里的 CSS 和 <script> 里的 JS，才能让真实页面真正变小。这也是压缩工具最容易出错的地方，因为它得先把这两门语言解析出来，才能动手缩短。

  4. 是安全压缩，不是有损

    压缩只去掉浏览器渲染同一页面所不需要的东西。它不是混淆：标记照样以完全相同的方式工作，只是不再为人类阅读而排版。

  5. 为什么 gzip 才是关键数字

    服务器用 gzip 或 brotli 压缩后再发送 HTML，而它们本就会折叠重复的空白。压缩仍然有用，因为它去掉了传输压缩做不到的部分、并给压缩器更干净的输入，但收益应以 gzip 体积而非原始字节来判断。

  6. 生产环境用压缩，源码保持可读

    压缩后的 HTML 很难编辑，所以它属于构建产物，而不是仓库。把可读的模板留作源码，压缩作为上线前的最后一步。

使用建议

让压缩后的 HTML 既小又不出意外的一些习惯。

  • 把压缩作为构建的最后一步并部署其产物。绝不手动编辑压缩后的 HTML，也不要把它当作事实来源提交。
  • 以 gzip 体积判断收益，因为那才是服务器实际传输的大小。原始字节省得多，经压缩后可能所剩无几。
  • 上线前先看一眼跳过列表。列在那里的内容与你粘贴的一模一样，安全归安全，但也意味着这部分字节从未被压缩。
  • 没有特别理由就留在「标准」。布局依赖行内元素之间那个空格时选「安全」；切到「最大」时值得对照样式表检查一遍，因为去掉 type="text" 会让 input[type="text"] 选择器落空。
  • 为压缩后的文件开启 gzip 或 brotli，并配合合理的缓存时长。压缩与传输压缩是叠加关系，不能互相替代。

边界与注意事项

这个工具做什么，又把什么留给其他步骤。

  • 它压缩单个 HTML 文档及其中内嵌的 CSS 与 JS，不会去抓取外链的样式表、脚本或图片，也绝不跟进 @import。
  • 它不会转译现代 JS、不给 CSS 加厂商前缀，也不为旧浏览器做降级。这些请交给构建工具。
  • 属性名会被统一转成小写——这对 HTML 是正确的，对框架模板却不是：Angular 的 *ngIf 会变成 *ngif。Handlebars、Jinja、ERB 本身也不是 HTML，请压缩渲染后的输出，而不是模板源码。
  • 标记本身彻底读不通（比如标签或注释没有结束）会中止本次压缩并报出。内嵌代码读不通则不会中止：它会被列为跳过并原样带过，所以你拿到的文档始终是完整可用的。

常见问题

关于压缩 HTML、它改变了什么、以及何时使用的常见问题。

压缩会改变页面的渲染吗？

不会。压缩只去掉浏览器不需要的字符，比如标签之间的空白和从不渲染的注释。会影响布局的空白——如 pre 里的文本、行内元素之间的空隙——都会被保留，所以渲染出的页面前后看起来一样。如果某处布局对间距很敏感、你不想反复确认，可以用「安全」强度：它只把连续空白折叠成一个空格，从不整段删掉。

三档强度该选哪个？

绝大多数情况选「标准」：删掉标签之间的空白，以及 HTML5 本就默认的那些属性，正是常规构建步骤会做的事。「安全」适合间距要紧、又不想细想的场合。「最大」再多榨出几个百分点——删除取默认值和为空的属性、排序属性与类名——所以切过去之后值得快速确认一下，没有选择器依赖它删掉的东西。

它会压缩 HTML 里的 CSS 和 JavaScript 吗？

会。每个 <style> 块里的 CSS 和每个 <script> 块里的 JavaScript 都会与标记一起压缩，并各有一个开关可关闭。行内 style 属性和事件处理器走的是同两个引擎。真实页面里内嵌代码往往占了大半体积，所以大部分收益正来自这里。

「已跳过，未压缩」是什么意思？

意思是那段内嵌代码没有被压缩、每条规则或语句都原样留下，并且会告诉你原因。CSS 引擎读不懂嵌套规则、会直接删掉；遇到少写冒号的声明，它还会连后面一条规则一起丢掉——所以含这两类问题的 <style> 块一律保留而不压缩。JavaScript 引擎解析不了的脚本（包括用到顶层 await 的）也是同样处理。没有任何内容丢失，只是这部分字节没被压小。

压缩和 gzip 有什么区别？

它们协同工作。压缩改的是 HTML 本身，去掉压缩器无从知晓的多余内容；gzip 或 brotli 再对你发送的内容做传输压缩，在网络上折叠重复。两者都要：先压缩得到最干净的输入，再让服务器做传输压缩。真正的收益看这里显示的 gzip 数字。

我的 HTML 能小多少？

取决于源码怎么写。排版宽松、内联样式和脚本很大的标记可能大幅缩小，而本就紧凑的页面省得少。一旦算上 gzip，百分比会下降，因为压缩本已找回了大部分空白——这也是 gzip 数字更诚实的原因。

它会去下载我页面 @import 的样式表吗？

不会。CSS 引擎本身是有能力跟进 @import 并把目标内容拉进来的，这里明确禁止了这个行为。@import 会按你写的样子留在输出里，也不会为它发出任何请求，所以粘贴内部页面不会有东西流向网络。

能压缩 Handlebars、Jinja 这类模板文件吗？

不能直接处理。这个工具压缩的是标准 HTML，也就是浏览器收到的内容。{{ }} 或 {% %} 这类模板语法本身不是合法 HTML，而且属性名在输出时会转成小写，*ngIf 这样的指令会变成 *ngif。请改为压缩渲染后的输出，或使用为你模板语言打造的工具。

我该把压缩后的 HTML 提交到仓库吗？

不该。压缩后的 HTML 是构建产物，不是源码。提交你和同事实际编辑的可读模板或文档，把压缩文件作为上线前的最后一步生成。把压缩输出签入会让评审难读、合并痛苦。

我的 HTML 会被上传吗？

不会。一切都在浏览器内运行。你粘贴的 HTML、上传的文件和结果都在本地处理，绝不传输或存储，关闭标签页后即消失，所以即使是私有或未发布的标记也安全。

更多相关工具

继续探索数据与格式化工具的其余部分。