图片懒加载不提升首屏性能，反而拖慢——首屏图必须禁用lazy、改用preload+eager；非首屏图才可安全启用lazy，且需满足宽高、srcset/sizes、父容器无干扰样式等硬性条件。

图片懒加载本身不提升首屏性能，反而可能拖慢它——关键在于“分层处理”：首屏图必须抢在渲染前加载，非首屏图才延迟。真正提升首屏速度的，不是让图变少，而是让关键图更快出现。

首屏图片必须禁用 lazy，改用 preload + eager

banner、Logo、商品主图这类参与 LCP 的图片，加 loading="lazy" 是负优化。浏览器会跳过预加载，等滚动判定才发请求，导致白屏延长 200–600ms。

• 在 中添加：<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
• <img> 标签中显式写 loading="eager"（别依赖默认行为，Safari 旧版可能误懒）
• href 必须和 <img src> 完全一致（含查询参数），否则重复下载

非首屏图片才可安全启用 loading="lazy"

只对距首屏较远（如第三屏之后）、静态存在于 HTML 源码中、且满足硬性条件的 <img> 生效。漏掉任一条件，就会退化为 eager 加载，甚至引发布局抖动（CLS）。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• 必须设置 width 和 height 属性（优先用 HTML 属性，非 CSS）
• 响应式场景下，srcset 和 sizes 必须同时存在，否则浏览器无法预估宽度，可能拉错图
• 父容器不能有 overflow: hidden、transform、contain: paint 等干扰 Intersection Observer 的样式
• 不要把 loading="lazy" 写在 <source></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 类型
• 首屏外的图不应出现在初始请求列表里；滚动后才陆续出现对应请求
• 若所有图都在首屏就发出请求，大概率是缺宽高、父容器干扰，或图片实际在初始视口内

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！