这篇文章一样来自 Google 的 web.dev 网站，紧接上一篇 JavaScript 代码拆分的内容。这次的主要主题是 “如何延迟加载图片和 元素，以调整网页的初始加载速度和交互性能”。

使用者痛点：

• 页面打开后首屏渲染缓慢，导致访客流失率上升。
• 移动网络环境下大量图片和第三方嵌入占用宝贵带宽，引发流量费用激增。
• CPU 资源被沉重的 脚本抢占，出现卡顿、滚动不流畅等交互问题。老实说，

简单它讲解了如何避免让使用者在刚打开网页时就去下载那些“在屏幕外面、还没被看到”的重度资源。

. 主要痛点：为什么图片和 需要延迟加载？

• 图片占用带宽：图片通常是网页中体积最大的资源。说起来，如果一开始就下载所有图片，会和网页中更关键的资源争抢带宽。从而拖慢 LCP 指标，直接影响使用者感知的加载速度。
• 拖慢性能：本质上是一个完整的、独立的网页，包含大量子资源。 它们会极大地消耗 CPU，阻塞主线程，导致网页卡顿。恶化 INP 指标。怎么说呢，

. 原生延迟加载：loading="lazy"

现代浏览器已经原生支持了延迟加载属性，不需要额外编写 JavaScript 代码.

• 使用方法：直接在 或 标签上添加 loading="lazy".
• 工作原理：浏览器会自动判断。只有当该元素快要滚动到使用者的可视区域时才会开始下载它.
• 致命误区： 千万不要对首屏的图片使用 loading="lazy". 特别是网页最上方的横幅大图。如果加了这类关键图片必须等待浏览器解析完所有 CSS 并完成布局后才会下载，这会严重推迟图片的显示时间，使首屏变慢，从而加剧跳出率.

. 高级调整技巧：“外墙”模式

对于极其沉重的第三方嵌入内容。即使用了 loading="lazy",一旦使用者滚动到附近，它仍然会瞬间下载几百 KB 甚至上 MB 的脚本，造成卡顿。

外墙模式推荐做法：

• 层：先用一个轻量级的“静态图片”或“假按钮”代替真实的视频播放器或聊天窗口.
• 触发时机：只有当使用者点击该图片或将鼠标悬停在上面时通过 JavaScript 动态把假元素替换成真正的 .
• 收益：If user never interacts with heavy component,those scripts **永远不会被下载**。从而显著降低带宽消耗并提高页面响应速度.

. 传统/特殊场景方案：JavaScript 延迟加载库

The native a loading="lazy"` only works for `` and `

• C​SS 背景图像：#hero { background-image: url;}
• `

This class of libraries—such as **lazysizes** or **yall.js**—generally rely on browser’sThe Intersection Observer API. They watch when an element enters viewport and n swap a placeholder attribute with real `src`,triggering download only when needed.

. 实现要点概览

1. Create a low‑weight placeholder .
2. Add a `data-src` attribute that holds real URL.
3. The library observes placeholder;once it intersects ≥ ≈ 100 px from viewport,it swaps attributes and removes placeholder class.
4. You can combine this with “preload on hover” to furr reduce unnecessary traffic for videos that users may never watch.

.

This article serves as a comprehensive guide for optimizing multimedia and third‑party components. The core principle is **“按需索取”**: leverage native `` / `

Your next step:

• Add `loading="lazy"` to all non‑critical `` and `
• Select one heavy third‑party widget on your site and implement a Facade placeholder as a proof of concept.
You’ll see measurable improvements in LCP and INP within minutes of deployment.