loading="lazy"会让首屏图片白屏或跳动，因其默认延迟加载视口内图片（尤其ssr未声明loading="eager"时），且缺width/height或占位图失效会引发cls；必须对首屏img显式设loading="eager"并配宽高或aspect-ratio。
首屏加载慢，八成不是 HTML 文件大，而是懒加载没配尺寸、占位图失效、或关键资源被阻塞了渲染起点。
loading="lazy" 为什么会让首屏图片白屏或跳动
浏览器对 loading="lazy" 的默认触发距离是视口下方约 1250px，但首屏图片本就在视口内——如果没显式声明 loading="eager"，它仍可能被懒加载逻辑拦截，尤其在 SSR 或静态生成页面中，src 已存在却未设属性，就会延迟加载。
- 所有明确属于首屏的
<img>必须加loading="eager"，不能依赖“没写就是立即加载” - 只写
loading="lazy"却不设width和height属性，图片加载前高度为 0，撑开后导致下方内容下移（CLS） - 用
data-src替代src是无效占位：浏览器不识别data-src，区域直接塌陷 - SVG 占位图必须带宽高，比如
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E"，否则无法锁定容器尺寸
如何用 aspect-ratio + loading="eager" 稳定首屏图片容器
响应式场景下，原生 width/height 会失真，aspect-ratio 是更可靠的占位方案——它让浏览器在解析 HTML 阶段就确定容器高宽比，避免布局抖动。
- CSS 中写
img { aspect-ratio: 4 / 3; width: 100%; height: auto; }，比仅靠max-width: 100%更可靠 - 不要把
aspect-ratio和object-fit: cover混用在同一个选择器里却不设height: 0或min-height，某些旧版 Safari 会忽略 -
<picture></picture>内部的<source></source>不继承父级aspect-ratio，必须在<img>上单独声明样式 - 服务端渲染时若宽高动态计算，建议输出
style="--aspect-w: 16; --aspect-h: 9;"，再用 CSS 变量计算：aspect-ratio: var(--aspect-w) / var(--aspect-h)
preload 和 fetchpriority 怎么配合 eager 图片不抢带宽
<link rel="preload"> 不是给所有图片用的，写错反而挤掉 HTML 或关键 CSS 的带宽。首屏图片应靠 loading="eager" 保障时机，fetchpriority="high" 提升通道优先级。
- 只对真正首屏必需的资源加
fetchpriority="high"，比如 hero 图：<img src="hero.jpg" loading="eager" fetchpriority="high"> -
<link rel="preload" as="image">对图片基本无意义：浏览器无法复用预加载的图片到<img src>，且可能引发重复请求 - 字体必须同时带
crossorigin和fetchpriority="high"，否则 CORS 失败或 fallback 字体撑开布局 - 非关键资源如埋点脚本、广告 SDK，统一设
fetchpriority="low"，避免抢占文本和首屏图片通道
为什么内联关键 CSS 后还是卡在 FCP
内联 CSS 体积超限、含 @import、或没删外链 link，都会让浏览器重复下载或串行阻塞，抵消内联收益。
- 内联
<style></style>体积建议 ≤ 10KB（HTTP/1.1 下避免分包），超过后 gzip 压缩率下降，HTML 传输反而变慢 - 内联块里绝对不能出现
@import url(...)，它会发起新请求，彻底破坏内联意义 - 内联完成后，必须手动移除对应外链的
<link rel="stylesheet">，否则样式重复应用，可能覆盖主题色或动画状态 - 如果关键 CSS 依赖用户偏好（如暗色模式），内联部分需服务端渲染时注入，不能等 JS 运行后再 patch
最容易被忽略的是：懒加载配置本身不会造成白屏，但一旦和尺寸缺失、占位图失效、fetchpriority 错配组合在一起，问题就从“慢一点”变成“不可用”。验证时别只看 Network 面板的 loaded 时间，要盯住 FCP 前的空白期和 Layout Shift 的具体元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
