图片懒加载不提升首屏性能，反而拖慢——首屏图必须禁用lazy、改用preload+eager；非首屏图才可安全启用lazy，且需满足宽高、srcset/sizes、父容器无干扰样式等硬性条件。
图片懒加载本身不提升首屏性能，反而可能拖慢它——关键在于“分层处理”：首屏图必须抢在渲染前加载，非首屏图才延迟。真正提升首屏速度的，不是让图变少，而是让关键图更快出现。
首屏图片必须禁用 lazy，改用 preload + eager
banner、Logo、商品主图这类参与 LCP 的图片，加 loading="lazy" 是负优化。浏览器会跳过预加载，等滚动判定才发请求，导致白屏延长 200–600ms。
- 在
<head>中添加：<link rel="preload" as="image" href="hero.webp" fetchpriority="high"> -
<img>标签中显式写loading="eager"（别依赖默认行为，Safari 旧版可能误懒） -
href必须和<img src>完全一致（含查询参数），否则重复下载
非首屏图片才可安全启用 loading="lazy"
只对距首屏较远（如第三屏之后）、静态存在于 HTML 源码中、且满足硬性条件的 <img> 生效。漏掉任一条件，就会退化为 eager 加载，甚至引发布局抖动（CLS）。
- 必须设置
width和height属性（优先用 HTML 属性，非 CSS） - 响应式场景下，
srcset和sizes必须同时存在，否则浏览器无法预估宽度，可能拉错图 - 父容器不能有
overflow: hidden、transform、contain: paint等干扰 Intersection Observer 的样式 - 不要把
loading="lazy"写在<source>上——它只作用于最内层的<img>
动态插入的图片不支持原生 lazy
Vue 的 v-for、React 的 map()、JS 拼接后 innerHTML 插入的 <img>，浏览器一律视为“非初始元素”，原生 loading="lazy" 直接失效。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（SSR）时，确保 CMS 或模板引擎未过滤掉
loading属性 - Vue 2 需写成
v-bind:{"loading":"lazy"}；Vue 3 / React 可直写，但需检查 SSR 输出源码 - 动态插入后若已在视口内，建议手动触发：
img.src = img.dataset.src
验证是否真生效，别只看代码
写了 loading="lazy" 不等于起作用。必须通过 Chrome DevTools 实际观测网络请求行为：
- 打开 Network 面板 → 勾选 “Disable cache” → 刷新页面 → 筛选
Img类型 - 首屏外的图不应出现在初始请求列表里；滚动后才陆续出现对应请求
- 若所有图都在首屏就发出请求，大概率是缺宽高、父容器干扰，或图片实际在初始视口内
