html5已淘汰冗余标签和属性，应删除如、等无效代码，替换为语义化标签与css，精简结构、移除外联样式、清除注释，并合理配置html-minifier，配合gzip/brotli提升压缩效果。

删掉浏览器根本不用的标签和属性

HTML5 已经淘汰了一批旧标签和冗余属性，继续保留它们不仅增加体积，还可能触发兼容模式、拖慢解析。现代浏览器默认用 UTF-8、标准渲染模式，很多“保险写法”其实早就不需要了。

• <meta http-equiv="X-UA-Compatible"> 全部删掉——IE 已停服，这行对其他浏览器无效，还占 40+ 字节
• <font></font>、<center></center>、<u></u> 标签直接替换为 CSS 或语义化标签（如 <strong></strong>），它们在 HTML5 中已废弃，且会强制浏览器进入怪异模式
• <script type="text/javascript"></script> → 改成 <script></script>；<link rel="stylesheet" type="text/css"> → 删掉 type="text/css"
• 检查重复引入：<script src="jquery.js"></script> 出现两次？删掉一个。这类冗余在祖传代码里极常见

压缩前先做语义化精简

很多人一上来就跑 html-minifier，结果压缩率不到 3%。真正见效的不是“压”，而是“减”：把不该传的代码直接砍掉。

• 用 <picture></picture> + srcset 替代多组 <img> 堆砌。老写法常把大图、中图、小图全写进 HTML，浏览器会全部下载；新写法只加载匹配设备的那一张
• 内联样式（style="..."）一律外移——它既无法缓存，又阻碍 HTML 压缩器识别重复规则
• 注释不是“开发友好”，而是“上线负担”。像 <!-- 这里是导航栏，产品经理说下周改 --> 这类注释，上线前必须清空；构建时可用 removeComments: true 配置自动处理
• 避免深层嵌套：<div><div><div><p>文本</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div></div></div> 直接换成 <p class="hero-text">文本</p>，DOM 节点越少，解析越快

html-minifier 的关键配置别乱开

html-minifier 默认配置容易踩坑：比如开启 collapseWhitespace 却没配 conservativeCollapse，会导致 <pre class="brush:php;toolbar:false;"></pre> 里的换行丢失；又或者开了 removeRedundantAttributes 却没关 removeScriptTypeAttributes，反而把合法的 type="module" 给删了。

• 必开：removeComments: true、collapseWhitespace: true、removeRedundantAttributes: true
• 慎开：minifyCSS: true 和 minifyJS: true —— 如果你已用 cssnano 和 terser 单独处理过，这里再压一次可能破坏 sourcemap 或内联逻辑
• 必须配：conservativeCollapse: true（保 <pre class="brush:php;toolbar:false;"></pre> 和 <textarea></textarea> 换行）、ignoreCustomFragments: [ // ]（跳过模板语法）
• 命令行示例：html-minifier --remove-comments --collapse-whitespace --conservative-collapse --minify-css index.html -o index.min.html

Gzip 和 Brotli 不是 HTML 压缩的替代品

有人觉得“服务器开了 Gzip，HTML 就不用 minify 了”，这是误解。Gzip 是传输层压缩，minify 是内容层瘦身，两者叠加才有真实收益——实测四个主流网站，minify + Gzip 比单用 Gzip 多省 9–16% 体积。

• Gzip 对重复字符串高效，但对单次出现的长空白、注释效果有限；minify 则直接删掉它们
• Brotli 压缩率更高，但它仍无法识别语义冗余（比如重复的 <div class="container">），这部分只能靠人工或工具提前清理<li>验证是否生效：打开 DevTools → Network → 刷页面 → 看 <code>index.html 的响应头是否有 Content-Encoding: gzip 或 br；同时比对压缩前后文件大小（不是传输大小）
• 注意：Nginx 开启 gzip_types text/html 后，静态 HTML 文件才会被压缩；动态生成的 HTML（如 PHP/Node 输出）需额外确认是否走同一路径

真正卡住体积的，往往不是空格和换行，而是那些“写了等于白写、传了等于白传”的代码。删标签比压空格重要，改结构比调参数管用。