本文深入解析HTML在优化Core Web Vitals（LCP、CLS、FCP）中的精准作用边界：它并非万能解药，而是通过关键细节——如准确使用``提升最大内容绘制、为``设置原生`width/height`并搭配`decoding="async"`防控布局偏移、审慎内联极小关键CSS（

Core Web Vitals 不是 HTML 能“做”出来的，而是浏览器根据用户真实加载、渲染、交互行为计算出的性能指标；HTML 本身只是影响它们的底层载体之一——改错地方，毫无作用；改对地方，效果立现。

为什么 对 LCP 很关键

LCP（最大内容绘制）通常由首屏大图、标题或 Hero 区块中的 、

或

触发。若关键资源（如主图、字体、关键 CSS）加载被阻塞，LCP 就会严重延迟。

• 必须放在 中，且 as 值要准确（image / font / style），否则浏览器不会提前抓取
• 不要 preload 非首屏图片（比如轮播第二张），会挤占带宽，反而拖慢 LCP
• preload 字体时，必须加 crossorigin 属性：，否则可能被忽略
• Chrome DevTools 的 “Network” 选项卡里，preloaded 资源应显示为 “Priority: Highest”，否则检查路径或 MIME 类型是否匹配

的 width/height 和 decoding="async" 怎么防 CLS

CLS（累积布局偏移）主要来自无尺寸声明的图片、广告、嵌入内容在加载后突然撑开页面。HTML 层面最直接的控制点就是 和