"图片懒加载实践：loading=lazy 与 LCP 的边界"

概述懒加载可降低首次网络负载与渲染阻塞，但不应对首屏可见的关键图片（尤其 LCP 图片）启用。应结合原生 `loading=lazy` 与 Intersection Observer 的脚本回退与细粒度控制。策略与边界原生懒加载：对非首屏图片使用 `loading="lazy"`；首屏与 LCP 图片应使用默认 eager 加载，并可通过 `fetchpriority="high"` 提升优先级［参考4］。脚本懒加载：使用 Intersection Observer 在图片进入视窗时替换真实 `src`；适合更精细控制与旧浏览器回退［参考1,3,5］。占位与尺寸：设置 `width/height` 或使用占位符，减少布局偏移与 CLS 风险；结合响应式与现代格式降低体积。参考与验证［参考1］CSDN：Intersection Observer 实现图片懒加载实践与兼容注意：https://blog.csdn.net/wzy_PROTEIN/article/details/136534207［参考2］文章：懒加载图片的实用指南（首屏 LCP 图片不懒加载、loading=eager）：https://blog.mikihands.com/zh-hans/whitedec/2025/7/14/lazy-loading-web-performance-guide/［参考3］MDN：懒加载概念与性能指南（缩短关键渲染路径）：https://developer.mozilla.org/zh-CN/docs/Web/Performance/Guides/Lazy_loading［参考4］web.dev：浏览器级图片懒加载（LCP 图片不要懒加载、可提高优先级）：https://web.dev/i18n/zh/lazy-loading-images/［参考5］GitHub Issue：Intersection Observer + Vue 指令懒加载方案示例与思路：https://github.com/amandakelake/blog/issues/73关键词校验关键词围绕懒加载与 LCP 边界，与正文一致。