免费转换器

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 对于维护至关重要。