HTML懒加载怎么实现_图片延迟加载SEO优化方案

31次阅读

图片懒加载通过延迟加载非首屏图片提升性能与用户体验，主流方案为原生loading="lazy"和Intersection Observer API，前者简单高效，后者可精细控制；正确实现能优化Core Web Vitals指标并增强SEO，关键在于预留图片尺寸、设置alt属性及避免首屏图片延迟加载。

src="https://img.php.cn/upload/article/001/503/042/175807837367338.png" alt="HTML懒加载怎么实现_图片延迟加载SEO优化方案">

图片懒加载，说白了，就是让网页在加载时，只先加载用户当前屏幕能看到的部分图片，那些还在页面下方、暂时看不到的图片，就等用户滚动到它们附近时再加载。这样做最直接的好处是网页打开速度会快很多，用户体验自然就好，间接对SEO也有积极作用，因为搜索引擎现在越来越看重网站的加载速度和用户体验。

解决方案

实现图片懒加载，目前最主流且推荐的方案主要有两种：浏览器原生支持的

loading="lazy"

属性，以及基于JavaScript的

Intersection Observer API

。

原生懒加载是最简单粗暴的，你只需要在

<img>

标签上加上

loading="lazy"

就行。比如：

<img src="image.jpg" alt="描述" loading="lazy">

。浏览器会自己判断什么时候加载这张图片，不需要你写任何JavaScript代码。这在现代浏览器中兼容性已经相当不错了。

如果需要更精细的控制，或者要兼容一些老旧浏览器（虽然现在越来越少了），

Intersection Observer API

就是个非常强大的工具。它的核心思想是观察一个元素是否进入了视口（或者说，是否与另一个元素相交）。当图片元素进入视口时，我们再把真实的图片URL赋值给

src

属性。通常我们会把真实的图片地址存在

data-src

这样的自定义属性里，等需要加载时再取出来。

立即学习“前端免费学习笔记（深入）”；

为什么图片延迟加载对网站性能和用户体验至关重要？

这事儿在我看来，简直是现代前端优化的基石之一。你想啊，一个页面里，图片往往是占用带宽和加载时间的大头。如果一个页面有几十张甚至上百张图片，而用户进来时，可能只看到了最上面几张，你却把所有图片都一股脑儿地加载了，那不是白白浪费用户的流量和等待时间吗？

首先，最直接的好处就是显著提升页面加载速度。当浏览器不用一开始就去请求和渲染所有图片时，它就能更快地解析HTML、加载CSS和JS，让用户更快地看到页面的主要内容，也就是所谓的“首次内容绘制”（FCP）和“最大内容绘制”（LCP）指标都会有很好的表现。这对于那些网络环境不太好的用户来说，体验简直是天壤之别。

其次，它降低了服务器的压力和带宽消耗。不是所有用户都会把页面从头拉到尾，有些图片可能永远不会被看到。懒加载就避免了这种不必要的资源请求，对服务器来说，这能省下不少资源。

src="https://img.php.cn/upload/ai_manual/000/000/000/175679988141722.png" alt="HTML懒加载怎么实现_图片延迟加载SEO优化方案">

Riffo

Riffo是一个免费的文件智能命名和管理工具

src="https://phps.yycxw.com/static/images/card_xiazai.png" alt="HTML懒加载怎么实现_图片延迟加载SEO优化方案">131

查看详情 src="https://phps.yycxw.com/static/images/cardxiayige-3.png" alt="HTML懒加载怎么实现_图片延迟加载SEO优化方案">

再者，从用户体验的角度讲，一个加载飞快的网站，总能给人留下好印象。用户不用盯着空白或者缓慢加载的图片干等，页面的交互性也更好。这直接关系到用户的留存率和转化率。毕竟，没人喜欢一个慢吞吞的网站。搜索引擎现在也越来越聪明，它们会把用户体验好的网站排在前面，所以懒加载间接也成了SEO的一个加分项。

实现图片懒加载的几种主流技术方案对比与选择

谈到具体的实现方案，我个人觉得，这有点像选择工具箱里的锤子，得看你要钉什么钉子。

1. 原生

loading="lazy"

属性： 这是目前最简单、最“懒”的方案。你只需要在

<img>

或

<iframe>

标签上加上

loading="lazy"

。浏览器自己会处理，不需要任何JavaScript。

优点： 零JavaScript成本，实现极其简单，性能由浏览器原生优化，兼容性越来越好（Chrome、Firefox、Edge等主流浏览器都支持）。
缺点： 无法自定义加载逻辑，对老旧浏览器不兼容。
适用场景： 大多数现代网站的首选，尤其是对性能要求高但又不想引入额外JS库的场景。

2. 基于

Intersection Observer API

的JavaScript方案： 这是目前推荐的JavaScript懒加载方案。它通过观察元素是否进入视口来触发加载，性能比传统的

scroll

事件监听要好得多。

核心思路：
1. 图片初始
  src
  为空或指向一个占位图，真实图片地址放在
  data-src
  属性中。
2. 创建一个
```
Intersection Observer
```
  实例，观察所有需要懒加载的图片。
3. 当图片进入视口时（
```
isIntersecting
```
  为
```
true
```
  ），将
  data-src
  的值赋给
  src
  ，然后停止观察该图片。
优点： 极高的性能，避免了
scroll
事件频繁触发带来的性能问题，可以自定义加载逻辑（比如提前加载一些，设置
```
rootMargin
```
），兼容性比原生略广。
缺点： 需要编写JavaScript代码，增加了JS文件大小和执行成本，对非常老的浏览器不兼容。
适用场景： 需要精细控制加载时机、有复杂交互或兼容性要求的场景。

// 简单示例代码（仅供参考，生产环境可能需要更健壮的实现） document.addEventListener("DOMContentLoaded", function() {   var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));    if ("IntersectionObserver" in window) {     let lazyImageObserver = new IntersectionObserver(function(entries, observer) {       entries.forEach(function(entry) {         if (entry.isIntersecting) {           let lazyImage = entry.target;           lazyImage.src = lazyImage.dataset.src;           if (lazyImage.dataset.srcset) {             lazyImage.srcset = lazyImage.dataset.srcset;           }           lazyImage.classList.remove("lazy");           lazyImageObserver.unobserve(lazyImage);         }       });     }, {       rootMargin: "0px 0px 100px 0px" // 提前100px加载     });      lazyImages.forEach(function(lazyImage) {       lazyImageObserver.observe(lazyImage);     });   } else {     // Fallback for older browsers (e.g., scroll event listener)     // 这部分代码通常会比较复杂，这里省略了     console.log("IntersectionObserver not supported, using fallback.");   } });

3. 基于

scroll

事件的JavaScript方案： 这是比较老的方案了，通过监听

scroll

事件来判断图片是否进入视口。

优点： 兼容性最好，几乎所有浏览器都支持。
缺点： 性能较差，
scroll
事件会频繁触发，容易导致页面卡顿，需要配合节流（throttle）或防抖（debounce）优化。
适用场景： 极少数需要兼容古老浏览器的场景，但在现代开发中已不推荐。

我的建议是： 优先考虑原生

loading="lazy"

，它最省心。如果需要更高级的控制或者更广泛的兼容性（但不是非常古老的浏览器），那么

Intersection Observer API

是你的不二之选。至于

scroll

事件，除非万不得已，否则尽量避免。

延迟加载对SEO的影响：如何避免负面效果并优化排名？

说实话，很多人对懒加载和SEO的关系有点误解。不是说懒加载了，搜索引擎就抓不到图片了。Googlebot现在很聪明，它能执行JavaScript，所以大部分情况下，它能“看到”通过JS加载的图片。但确实有一些细节需要注意，搞不好就会出问题。

1. 确保搜索引擎能“看到”图片： 这是最核心的。虽然Googlebot能执行JS，但我们不能假设所有搜索引擎或所有情况都能完美执行。所以，确保你的图片最终会加载，并且其URL是可被抓取的。

使用

data-src

而不是完全移除

src

：初始时，
<img>
标签的
src
属性可以指向一个低质量占位图或者一个空白GIF，而真实的图片URL放在
data-src
或其他自定义属性中。当图片加载时，再将
data-src
的值赋给
src
。避免
src
属性一开始就是空的，那样可能会让某些爬虫误以为没有图片。
提供

alt

属性： 这太重要了！无论图片是否懒加载，
```
alt
```
属性都是搜索引擎理解图片内容的关键。它不仅有助于SEO，也是为了无障碍访问。
考虑

noscript

标签（现在不常用，但了解一下）： 以前，如果担心搜索引擎无法执行JS，会在
```
<noscript>
```
标签里放一个非懒加载的
<img>
。但现在Googlebot执行JS能力很强，这个方法已经不那么必要了，甚至可能造成内容重复。

2. 关注Core Web Vitals指标： Google明确表示，Core Web Vitals（核心网页指标）是排名因素之一。懒加载对这些指标有直接的积极影响：

LCP（Largest Contentful Paint，最大内容绘制）： 懒加载可以显著缩短LCP时间，因为它减少了页面初始加载时的资源量。但要注意，首屏可见的图片不要懒加载！这些图片应该立即加载，否则反而会拖慢LCP。
FID（First Input Delay，首次输入延迟）： 减少初始加载的JS和图片，可以减少主线程的阻塞时间，从而改善FID。
CLS（Cumulative Layout Shift，累积布局偏移）： 懒加载图片如果尺寸不固定，可能会导致页面内容跳动。为了避免CLS，务必为图片预留空间，比如在CSS中设置固定的
```
width
```
和
```
height
```
，或者使用
```
aspect-ratio
```
属性。