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，延迟加载会导致逻辑卡顿或白屏
- 用
<picture></picture>+srcset做 DPR 适配的关键图：lazy 可能干扰资源选择时机，尤其在设备缩放变化时
loading="lazy" 为什么有时完全没效果
不是代码写错了，而是浏览器根本不认这个值，或者它被其他逻辑覆盖了。
- 浏览器不支持：
loading="lazy"在 IE 全系、Safari ≤15.3、部分安卓 WebView 中无效；Safari 15.4+ 才支持iframe的 lazy -
src已存在：只要<img src="real.jpg" loading="lazy" alt="HTML懒加载依赖首屏速度吗_HTML懒加载优化首屏速度方法【入门】" >，浏览器解析到就立刻发请求，loading属性被忽略 - 父容器不可见：父元素
display: none、height: 0或在overflow: hidden区域内，Intersection Observer 无法计算位置，回调永不触发 - 和
preload冲突：同一张图既写了<link rel="preload" href="hero.jpg">又加了loading="lazy"，Chrome 会优先 preload，但 Safari 可能报 warning 或重复请求
怎么安全启用懒加载又不伤 LCP
核心是「分层」：首屏资源靠 preload 和显式 eager 加载，非首屏才交由 lazy 调度。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 首屏图必须
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">，且<img alt="HTML懒加载依赖首屏速度吗_HTML懒加载优化首屏速度方法【入门】" >标签不带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 筛选来交叉验证，缺一手数据，优化就容易南辕北辙。
