懒加载

懒加载 是把非关键或当前不可见的内容推迟到接近视口时再取，减少首屏请求量^[1]。图片和 iframe 有浏览器原生实现，写 loading="lazy" 就交给浏览器处理^[2]。

原生属性与脚本方案的分工

浏览器按元素与视口的距离决定 loading="lazy" 何时加载，并且会依据真实体验数据调整策略^[3]。脚本方案通常要先去掉 src，等条件满足再填回，支持原生属性的浏览器反而被推迟^[3]。

CMS 侧的建议是默认开启，并且只给带尺寸属性的图片与 iframe 加属性^[3]。WordPress、Joomla、Drupal、TYPO3 已在核心层实现^[3]。

抓取看的不是滚动

Google 提醒：延迟加载实现不当会让内容对搜索不可见，关键是内容进入视口时就要加载，实现方式不能依赖用户操作，因为 Google 搜索不会与页面互动^[1]。可用的路子包括浏览器原生延迟加载、IntersectionObserver API，以及在数据进入视口时加载的库^[1]。

正文与关键链接不能等滚动才出现，列表页用无限滚动时要保证后续页有可点击的真实链接^[4]。

首屏元素不要延迟

Google 与 web.dev 的建议一致：主推送图像和可能出现在视口上方的元素不要延迟加载^[3][5]。这类延迟会明显拖慢 LCP。同时给图片与 iframe 写 width 与 height，避免布局偏移^[3]。

常见误用

第一种是全站图片一律 lazy，首屏大图与标题区被推迟。第二种是折叠区正文用滚动事件注入，抓取读到的是空区块^[1]。第三种是只设 loading="lazy" 不给尺寸，加载时页面跳动，CLS 变差^[5]。

附录

参见

• 延迟加载
• 加载更多
• LCP
• CLS
• 图片优化
• 首屏加载

参考资料

官方（境外）

1. 《修正延迟加载的内容》，Google 搜索中心。
2. 《Browser-level image lazy loading》，web.dev，Google。
3. 《CMS 的浏览器级延迟加载》，web.dev，Google。
4. 《分页和增量加载以及它们对 Google 搜索的影响》，Google 搜索中心。
5. 《Largest Contentful Paint》，web.dev，Google。

外部链接

• IntersectionObserver API，web.dev，Google。