首屏图片必须用decoding="sync"，而非"async"；因"async"会将解码移至后台线程，导致渲染时无图可画，引发发虚、延迟甚至白屏，拉高lcp并可能触发cls。
首屏图片加 decoding="async" 是错的，会发虚、延迟渲染甚至白屏。 它不是“让图更快出来”，而是把解码从主线程挪走——首屏图需要立刻解码、立刻画，挪走就坏事。
为什么首屏图不能用 decoding="async"
浏览器在渲染首屏时，必须同步完成像素解码才能合成画面。设成 async 后，解码被丢进后台线程，主线程继续跑，但渲染器没图可画，轻则模糊几帧，重则等解码完成才闪出——这直接拉高 LCP（最大内容绘制）时间，还可能触发 CLS（布局偏移）。
- 实测现象：
decoding="async"的 banner 图滚动到视口时出现 100–300ms 空白或低分辨率过渡 - Chrome DevTools → Rendering → Paint flashing 显示大面积黄色闪烁，说明解码卡在异步队列里没跟上渲染节奏
- 即使图已缓存、
src已就位，decoding="async"仍强制延迟解码，无法绕过
首屏图该用什么 decoding 值
明确设为 decoding="sync"，哪怕浏览器默认就是它——因为很多构建工具（如 Vite HTML 插件）会删掉未知属性，不显式写就等于没设。
-
decoding="sync"：确保 logo、hero 图、关键按钮图标等在主线程立即解码，不跳、不虚、不延迟 - 不要依赖
decoding="auto"：现代浏览器（Chrome 78+、Firefox 95+）实际行为接近sync，但 Safari 16.4 之前完全不支持，且 CDN 或响应式方案中容易被忽略 - 检查是否生效：打开 Chrome DevTools → Elements → 找到
<img>标签，确认decoding属性存在且值为sync
首屏图真正要配的三个属性
decoding 只是其中一环，单独设了没用。必须和另外两个硬性条件一起生效：
-
loading="eager"：禁用懒加载，防止浏览器启发式提前加载又 fallback 补发，造成重复请求 - 显式声明
width和height属性（不是 CSS）：避免 layout shift，让浏览器提前预留空间 -
fetchpriority="high"：仅 Chromium 112+ 有效，提示网络层优先 fetch，配合真实src才起作用（不能是 placeholder）
三者缺一不可。漏掉 width/height，fetchpriority 再高也会因布局抖动拉长 LCP；漏掉 loading="eager"，首屏图可能被当成 lazy 图两次加载。
构建时容易被删掉的 decoding 怎么保留
Vite / Webpack 的 HTML 压缩插件（如 vite-plugin-html 或 html-webpack-plugin）默认会过滤掉不认识的属性，decoding 就是典型受害者。
- Vite 用户：在
vite.config.ts中配置html.minify.options.removeUnknownAttributes = false - Webpack 用户：给
html-webpack-plugin的minify选项加removeUnknownAttributes: false - 如果用了自定义模板引擎（如 EJS），确认它没 strip 掉自定义属性
没做这步，上线后 <img decoding="sync"> 就变成 <img>，等于白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
