必须同时设置width和height属性为图片原始像素尺寸（如width="1920" height="1080"），否则浏览器解析时按0×0占位，图片加载后触发重排导致cls必然发生；二者须为无单位纯数字，仅作用于标签，与srcset无关。
静态生成时漏写 width 和 height，CLS 就不可能达标——这不是“可能偏移”，而是必然偏移，且在 SSR/SSG 环境下更难被掩盖。
为什么静态站点生成器（如 Hugo、Jekyll、Next.js）仍会触发 CLS
静态生成 ≠ 自动加尺寸。即使 HTML 是预构建的，只要 <img> 标签里没写 width 和 height 属性，浏览器在首次解析 HTML 时依然按 0×0 占位。Next.js 的 next/image 默认注入尺寸，但纯 HTML 模板、Markdown 渲染、CMS 导出内容往往不带这两个属性，导致生成后的页面直接在 Lighthouse 中标红。
- SSG 输出的是最终 HTML 字符串，它不会“猜”图片尺寸——你没写，它就不知道
- 部分模板引擎（如 Jekyll 的 Liquid）默认不读取图片元数据，
{% img %}插件若未显式传参，生成的<img>就是裸标签 - Hugo 的
{{ image }} shortcode若未配置width/height参数，同样遗漏 - Markdown 转 HTML 工具（如 remark、markdown-it）几乎从不自动提取图片尺寸，
必然产出无尺寸<img>
如何在静态构建阶段强制补全 width/height
不能靠运行时 JS 补——CLS 是首屏指标，JS 执行前偏移已经发生。必须在构建时注入原始像素值。
- 用脚本扫描所有
<img>标签，调用sharp或identify（ImageMagick）批量读取源图尺寸，重写 HTML 中的width和height属性 - Next.js 用户可利用
next.config.js中的webpackplugin，在构建时拦截 HTML 输出并注入尺寸（需配合fs.promises.readFile读图头） - Hugo 可写自定义
shortcode，要求传入src后自动查static/下对应文件尺寸（需提前生成尺寸缓存，避免构建卡顿） - Jekyll 推荐用
jekyll-picture插件，它强制要求声明width/height，缺失则构建失败——这是最硬的兜底
响应式图片 + 静态生成时的常见陷阱
<picture></picture> 不是免死金牌。很多 SSG 模板只给 <source></source> 配 srcset 和 sizes，却忘了最外层 <img> 还得有 width 和 height。
-
<picture><source srcset="..."><img src="fallback.jpg"></source></picture>：这里的<img>必须带width和height，值取原始图固有尺寸（比如原图 2400×1600，就写width="2400" style="max-width:90%"），和<source></source>加载哪张图无关 - 错误做法：
<img src="fallback.jpg" style="max-width:90%">—— 百分比无效；<img src="fallback.jpg" height="auto">——auto不被识别 - 若使用
srcset，sizes值必须真实反映该图在不同断点下的渲染宽度（例如sizes="(max-width: 768px) 100vw, 800px"），否则浏览器选错资源，仍可能因尺寸估算偏差造成二次偏移
字体加载与静态生成的协同问题
静态页面里字体仍是异步加载的，font-display: swap 本身不够——如果后备字体和 Web 字体的行高、字宽差异大，文本块高度会突变，推挤下方内容，哪怕图片尺寸全对，CLS 也照样飙升。
- 在静态 CSS 中，
@font-face必须配size-adjust（如size-adjust: 102%）或descent-override，让系统字体撑开一点，缩小换体前后高度差 - 关键文字容器（如
<h1></h1>、CTA 按钮）应设固定line-height和min-height，防止字体切换时塌缩或撑高 - 禁用
font-display: optional—— 它可能导致字体加载被跳过，后续又突然补上，造成两次偏移 - 静态构建时可内联关键字体的 WOFF2 字节（
<style>@font-face{src:url(data:...)}</style>），但仅限极小字体子集，否则影响 TTFB
真正卡住 CLS 优化的，从来不是“不知道要加宽高”，而是把尺寸当成“显示控制”而非“空间预留”——width 和 height 是给浏览器看的占位契约，不是给设计师调样式的开关。静态生成环境里，契约一旦缺失，就没有 runtime 补救机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
