HTML压缩需移除注释、空格、换行及冗余属性，用html-minifier-terser等工具自动化；禁用内联脚本/样式，外链并加integrity；优化资源加载顺序，关键CSS内联，script加defer，图片首屏禁用lazy；服务端启用Brotli/Gzip、合理缓存头与HTTP/2。
HTML 文件本身如何压缩体积
HTML 文件体积大，往往不是因为标签多，而是空格、注释、换行和冗余属性拖慢了首字节传输。浏览器解析 HTML 是流式的，但更大的文件意味着更长的下载和解析时间。
- 移除所有
<!-- ... -->注释，构建时用html-minifier-terser或esbuild插件自动处理 - 避免手动缩进嵌套——
prettier生成的“美观格式”不适用于生产环境；上线前必须走压缩流程 - 慎用内联
<script>和<style>：它们会阻塞 HTML 解析，且无法被 CDN 缓存复用；优先外链 +integrity校验 - 删除无意义的属性，例如
type="text/javascript"（HTML5 中已默认）、language、空title或重复class
资源加载顺序与关键路径优化
浏览器加载 HTML 后，会按顺序发现 <link rel="stylesheet">、<script>、<img> 等资源，其中某些会阻塞渲染或解析。关键渲染路径越短，首屏越快。
-
<link rel="preload">只对明确知道会立即用到的资源有效，比如首屏字体、关键 CSS 或 Hero 图片；滥用会导致带宽争抢 -
<script>标签加defer（推荐）或async（仅适用于完全独立脚本），禁用无属性的同步脚本 - 把
<link rel="stylesheet">放在<head>顶部，但确保它只包含首屏所需样式（可拆出critical.css内联） - 图片懒加载用原生
loading="lazy"，但首屏图片必须去掉该属性，否则可能触发 FOUC 或布局抖动
HTTP 层与部署侧能做的几件事
再小的 HTML，如果服务器没配对，照样慢。很多“前端优化”失效，是因为后端没开 Gzip/Brotli、没设缓存头、或 CDN 没生效。
- 确认响应头含
Content-Encoding: br或gzip；Brotli 压缩率比 Gzip 高 15% 左右，Nginx 1.11.6+ / Apache 2.4.26+ 均支持 - 静态 HTML 文件应返回
Cache-Control: public, max-age=3600（根据更新频率调整），避免每次 304 协商 - 启用 HTTP/2 或 HTTP/3：多路复用能显著减少 HTML + 资源并行请求的排队延迟
- 若用 CI/CD 构建，确保 HTML 输出前已执行
sed -i 's/ \+/ /g'类的空白压缩（简单但有效），尤其适合无法引入 JS 构建工具的轻量项目
#!/bin/bash
# 示例：CI 中快速压缩 HTML（去多余空格、制表符、换行）
sed -E ':a;N;$!ba;s/\n[[:space:]]*/ /g;s/[[:space:]]{2,}/ /g;s/^ //;s/ $//' index.html > dist/index.html
真正卡顿的从来不是“HTML 多了几 KB”，而是它触发了错误的加载顺序、没走压缩通道、或让浏览器反复重排重绘。每改一行 HTML，都要问一句：这行是否参与首屏渲染？是否可被缓存？是否强制浏览器停等？
立即学习“前端免费学习笔记（深入）”；
