页面体积直接影响首屏加载时间，优化需从结构源头控制字节产出：删无意义嵌套比删空格更有效；语义化标签与Flex/Grid可减少DOM节点；内联关键CSS须≤14KB；preload仅用于字体、LCP图片和关键样式。
页面体积直接决定首屏加载时间，尤其在弱网或高延迟场景下，多出 10KB HTML 就可能多一次 TCP 往返（RTT），延迟渲染 200ms+。优化不是“压缩完事”，而是从结构源头控制字节产出。
删嵌套比删空格更重要
压缩工具删掉注释和空格，通常只省 3–5KB；但一层无意义的 <div class="wrapper"><div class="inner"> 嵌套，会增加 DOM 节点数、延长解析时间，并拖慢 layout 计算。
- 用
<main>、<section>替代纯样式用途的<div>，语义标签本身不增体积，还能被浏览器更快识别为渲染区块 - Flexbox/Grid 布局能天然减少容器层级，比如把 3 层
<div>嵌套的导航栏，改写成单层<nav>+ CSSdisplay: flex - 检查构建产物 HTML，警惕框架自动生成的冗余 wrapper —— Vue 的
<div v-if>、React 的 Fragment fallback 容器，若未显式指定key或使用<></>，常会意外插入空<div>
内联关键 CSS 有硬性体积阈值
内联 CSS 看似省一次请求，但超了 TCP 初始拥塞窗口（约 14KB），就会触发额外 RTT，反而更慢。它只适合真正首屏必需、且稳定不变的样式片段。
- 提取范围必须严格：仅包含
<body>可见区域（LCP 元素、首屏按钮、标题字体）所需的规则，剔除所有.modal-hidden、#footer类 - 不要手动拼接 —— 工具如
critters或penthouse能基于真实 URL 渲染快照自动提取，避免漏规则或带入冗余 - 内联后务必验证：打开 DevTools → Network → 查看 HTML 响应体大小，确认
<style>块未突破 14KB；超过就切回<link rel="preload" as="style">+ media 查询异步加载
preload 不等于“越早越好”
<link rel="preload"> 是提示浏览器提前拉取，但它不改变资源的使用时机。滥用会导致带宽争抢，甚至挤掉真正关键的 HTML 解析。
立即学习“前端免费学习笔记（深入）”；
- 只对三类资源用：
as="font"（首屏文字所用字体）、as="image"（LCP 图片）、as="style"（已提取的关键 CSS 文件） - 必须配合实际使用：如果 preload 了
main.css，但页面里没<link href="main.css">，Chrome 会报 warning：“The resource … was preloaded but not used within a few seconds” - 禁止对 JS 用
as="script"后又放<head>—— 这会让脚本提前下载却仍阻塞解析；真要提前加载，用as="fetch"+crossorigin配合动态import()
体积优化最易被忽略的点：不是“怎么压小”，而是“哪些根本不该存在”。比如一个 <div> 包裹单个 <p>，或重复出现的 data-* 属性用于 JS 初始化——这些在源码里看着轻，累积起来就是几十 KB 和数百个无用 DOM 节点。
