HTML性能评分优化技巧【速查】

HTML性能优化虽不直接计入评分，却是提升FCP、LCP、CLS等核心用户体验指标的底层关键——通过精准设置`img`的`loading="lazy"`与`decoding="async"`（并务必声明宽高以防布局偏移）、审慎使用`preload`（仅限字体、关键CSS、hero图等极少数高优且无法被自动发现的资源，且必须指定`as`和`crossorigin`）、以及科学内联首屏必需的关键CSS（避免全量、@import、@font-face及冗余媒体查询，超14KB时分段异步加载），本质是重构浏览器渲染路径与资源调度逻辑；真正有效的优化，始于理解渲染流水线，而非堆砌属性或盲目压缩。

HTML 性能本身不直接参与 Lighthouse 或其他工具的「评分优化」计算，但它是影响核心指标（如 FCP、LCP、CLS）的底层载体——改 HTML 写法，是在改渲染路径和资源加载逻辑，不是在调某个“性能开关”。

为什么改 的 loading 和 decoding 属性能提分

浏览器默认同步解码、同步加载所有 ，会阻塞主线程并拖慢 LCP。加属性是告诉浏览器：“这张图不用马上处理”。

• loading="lazy"：仅对非视口内图片启用延迟加载（注意：Safari 15.4+ 才完全支持，旧版需降级用 IntersectionObserver）
• decoding="async"：让图片解码脱离主线程，避免卡顿（Chrome 60+ 支持，对大图效果明显）
• 必须同时指定 width 和 height，否则可能引发 CLS（布局偏移）

不是越多越好，关键看资源类型和时机

滥用 preload 会抢占带宽、挤占关键资源请求，反而拉低 FCP。它只适合极少数高优先级、且无法被 HTML 解析器自动发现的资源。

• 适用场景：font（WOFF2 格式）、critical CSS（内联不够时）、hero 图片（ 在 JS 渲染后才插入的情况）
• 禁用场景：普通 JS/CSS 文件（HTML 中已有