loading="lazy"会拖慢首屏速度，LCP恶化；参与LCP的图片、无宽高图、JS/CSS首帧图、关键图绝对不可加；需分层处理：首屏preload+eager，非首屏lazy。
不依赖，但错用会直接拖慢首屏速度——loading="lazy" 本身不加速首屏，反而会让首屏关键图延迟 200–600ms 渲染，LCP 明显恶化。
哪些图片绝对不能加 loading="lazy"
加了就等于主动推迟首屏渲染。浏览器看到 loading="lazy" 就跳过预加载，等 Intersection Observer 判定“快进视口”才发起请求，而首屏图根本不需要等这个判定。
- 参与 LCP 计算的图片：如 banner 图、商品主图、登录页头像 —— 这些必须显式设
loading="eager"或干脆不加该属性 - 未设
width/height（或aspect-ratio）的图片：懒加载期间尺寸未知，一加载就触发 CLS（布局偏移），Core Web Vitals 直接扣分 - 绑定 JS 初始化或 CSS 动画的第一帧图：比如轮播组件首图、hover 触发的 icon，延迟加载会导致逻辑卡顿或白屏
- 用
srcset做 DPR 适配的关键图：lazy 可能干扰资源选择时机，尤其在设备缩放变化时
loading="lazy" 为什么有时完全没效果
不是代码写错了，而是浏览器根本不认这个值，或者它被其他逻辑覆盖了。
- 浏览器不支持：
loading="lazy"在 IE 全系、Safari ≤15.3、部分安卓 WebView 中无效；Safari 15.4+ 才支持iframe的 lazy -
src已存在：只要
loading属性被忽略 - 父容器不可见：父元素
display: none、height: 0或在overflow: hidden区域内，Intersection Observer 无法计算位置，回调永不触发 - 和
preload冲突：同一张图既写了又加了loading="lazy"，Chrome 会优先 preload，但 Safari 可能报 warning 或重复请求
怎么安全启用懒加载又不伤 LCP
核心是「分层」：首屏资源靠 preload 和显式 eager 加载，非首屏才交由 lazy 调度。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 首屏图必须
，且loading属性 - 非首屏图批量加 lazy：用
document.querySelectorAll('img[data-lazy]').forEach(img => img.loading = "lazy")，服务端或构建时打上data-lazy标记更可靠 - 列表缩略图等可叠加
fetchpriority="low"：显式降权，避免和首屏资源争带宽 - 不要同时写
src="placeholder.jpg" loading="lazy"：浏览器可能先加载 placeholder，再加载真实图，造成双请求
JS 懒加载兜底时最容易踩的坑
当需要兼容老浏览器或更精细控制时，data-src + IntersectionObserver 是主流方案，但初始化时机和回调处理稍有偏差，首屏就出问题。
- 监听器注册太晚：塞在
window.onload或 ReactuseEffect里，此时首屏已渲染完成，用户看到的是空白或占位符 - 正确时机是
document.readyState === 'interactive'，推荐在内联小脚本立即初始化 - 回调中必须先赋
img.src = img.dataset.src，再delete img.dataset.src，否则滚动反复触发 - 共用一个
IntersectionObserver实例，别为每张图新建；回调里立刻调用observer.unobserve(img) - 必须监听
img.onerror并 fallback，否则加载失败就留白
真正难的不是加不加 loading="lazy"，而是准确识别哪张图属于首屏、哪张图能延迟、哪张图必须抢占带宽——这需要结合 LCP 报告、DevTools 的 Paint Flashing 和 Network 面板的 Priority 筛选来交叉验证，缺一手数据，优化就容易南辕北辙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
