HTML加载慢的根本原因是冗余字节数，非代码质量；需警觉超50KB体积，精简结构、内联关键CSS（≤2KB）、禁用@import、合理使用preload/preconnect，并移除非首屏内容。
页面加载慢，根本原因不是“代码写得不好”，而是网络传输字节数直接暴露了 HTML 的冗余程度。压缩、精简、内联、预加载这些手段，本质都是在对抗「浏览器必须下载并解析的原始字节数」——它才是首屏时间的硬约束。
HTML 文件体积超过 50KB 就该警觉
现代浏览器解析 HTML 是流式的，但体积越大，构建 DOM 树耗时越长，尤其在低端设备或弱网下更明显。一旦 index.html 超过 50KB（未压缩），就说明存在明显冗余。
- 检查是否大量内联了本该外链的 CSS/JS ——
<style>和<script>块里混着几百行样式或逻辑，既无法缓存，又拖慢首字节响应（TTFB） - 确认是否保留了开发期注释、空格、换行，比如
<!-- TODO: 这里要加权限校验 -->这类注释在线上环境毫无价值 - 留意是否用
<div>套了七八层仅用于 margin/padding 的容器，语义缺失 + DOM 节点爆炸 = 解析开销翻倍
gzip 后仍超 15KB 的 HTML 必须重构结构
gzip 对重复文本压缩率高，但对结构混乱、标签嵌套深的 HTML 效果有限。如果 gzip 后 index.html 还大于 15KB，说明压缩前很可能已超 80–100KB，光靠工具压缩救不了。
- 优先用语义化标签替代无意义
<div class="wrapper"><div class="inner"><div class="content">套娃 - 把非首屏内容（如页脚导航、评论区、相关推荐）移出初始 HTML，改用
fetch()或 SSR 按需注入 - 避免在 HTML 中拼接大量 JSON 数据到
data-属性，改用 API 异步获取，减少初始载荷
关键 CSS 内联但不能超过 2KB
内联关键 CSS 是为了跳过请求，但内联本身会增大 HTML 体积。实测表明：内联部分超过 2KB 后，收益迅速衰减，甚至因 HTML 变大而抵消掉节省的请求时间。
立即学习“前端免费学习笔记（深入）”；
- 只提取真正影响首屏渲染的规则（
body、header、首屏section的字体、颜色、布局） - 禁用
@import、避免内联里含@media查询（除非是min-width: 0这种兜底） - 用
critters或penthouse工具自动提取，别手写 —— 手动容易漏或过度提取
HTML 中的资源提示（preload/preconnect）滥用反而拖慢
<link rel="preload"> 和 <link rel="preconnect"> 是主动调度，但浏览器资源队列有限。塞太多，会挤占真正关键资源（如主 CSS、首屏 JS）的带宽和连接。
- 只对
as="font"、as="script"、as="style"且明确在首屏渲染路径上的资源 preload - preconnect 仅限第三方域名（如 CDN、字体服务），且最多 2–3 个；不要对自家域名 preconnect —— HTTP/2 下意义不大
- 避免在
<head>底部堆叠一堆 preload，它们会阻塞后续解析；应靠近真正使用它的 script 或 style 标签
真正卡住首屏的，往往不是某张图没压缩好，而是 HTML 自身成了瓶颈：它太大、太乱、太“重”。优化 HTML 不是删几行空格的事，是重新思考哪些内容必须第一时间到达浏览器、哪些可以延迟、哪些根本不该出现在初始文档里。
