延迟加载

延迟加载指的是推迟加载非关键或不可见内容的一种做法^[1][2]。

它的价值与风险

推迟加载非关键或不可见的内容，通常是有益的做法^[2]。

延迟加载能改善性能和用户体验^[2]。但如果实现得不好，副作用是内容可能对搜索不可见^[2]。

视口规则

有一条关键原则：内容进入视口时就应当加载^[2][3]。

常用的实现方式不依赖用户操作来触发加载，这一点很重要^[2]。因为搜索不会与网页互动，如果内容要等滚动或点击才出现，抓取工具就看不到^[2]。

浏览器内置的延迟加载就是这种写法，给机床图片加一个 loading 属性即可：

<img src="https://www.example.com/images/cnc-lathe-01.jpg"
     alt="数控机床外观"
     width="800" height="600"
     loading="lazy">

loading="lazy" 让浏览器在图片接近视口时才取回它，不需要等用户滚动。

反过来也有一条提醒：用户打开网页后立刻就能看到的内容，不要加上延迟加载^[2]。否则内容加载和显示会变慢，用户很容易察觉^[2]。

无限滚动的处理

无限滚动会带来额外的问题^[2]。

用户往下滚动时加载更多内容，这在体验上很流畅，但要让搜索引擎也能访问，还要满足几条要求：

• 给每个分块独立的永久网址^[2]。
• 这些网址每次加载时显示的内容必须一致，所以要用绝对页码，而不是“昨天”这类相对表述^[2]。
• 依次链接到各个网址，方便抓取工具顺着找到全部^[2]。

验证方式

配置完成之后，需要确认延迟加载真的能正常工作^[2]。

可以借助工具查看渲染后的 HTML，确认内容确实出现在里面^[2]。判断标准很直观：如果图片或视频的网址出现在元素属性中，说明设置是正确的^[2]。比如 <img src="cnc-machine.jpg">，图片的网址写在 src 属性里，就属于这种情况。

附录

参见

• JavaScript SEO
• 渲染
• 动态渲染

参考资料

官方（境外）

1. 《懒加载》，MDN Web 文档。
2. 《修正延迟加载的内容》，Google 搜索中心。

第三方

3. 《Google Advises SEOs on How to Implement Lazy Loading Correctly》，Search Engine Journal。

外部链接

无。