一个电商站把200张商品图从"一次性全加载"改成"滚动到哪加载到哪"，首屏时间从6.2秒降到1.4秒，跳出率直接砍半。改的代码不超过10行

一个做服装电商的朋友，店铺首页挂了200多张商品图，移动端首屏加载6秒多，跳出率超过60%。他以为要升级服务器，结果只加了一个属性，首屏时间就降到了1.4秒。改的不是服务器配置，是让图片"按需加载"——用户滚到哪，图片加载到哪，没滚到的先不加载。

图片延迟加载（Lazy Loading）是前端性能优化里投入产出比最高的手段——不需要改服务器、不需要压缩图片、不需要CDN，改几行代码就能让首屏加载时间大幅下降。而且在2026年，浏览器原生就支持了，不需要额外引入任何JS库。

一个直观的数据对比

同一个商品列表页（100张图，每张约100KB）：

指标	不懒加载	懒加载后
首次请求数	100个	约8-12个
首屏数据量	~10MB	~1MB
首屏加载时间	4-8秒	1-2秒
LCP（最大内容绘制）	5-8秒	1-2秒

<img src="product.jpg" loading="lazy" alt="产品图片" width="300" height="300">

loading="lazy" 的四个关键行为

· 加载时机：浏览器在图片距离视口一定距离时就开始加载（Chrome是根据网络状况动态计算距离，4G下约提前1250px，3G下约提前2500px），确保用户滚到的时候图片已经加载好了。
· 首屏图片不会懒加载：浏览器会自动识别哪些图片在首屏可视区域内，这些图片即使写了 loading="lazy" 也会立即加载，不会影响LCP。
· 同时支持iframe：iframe标签也可以用 loading="lazy" 延迟加载嵌入内容。
· 不支持loading="eager"的图片默认行为：不写loading属性或者写loading="eager"就是立即加载，和以前一样。

原生loading="lazy"的局限性

· 不能控制加载时机：浏览器自己决定什么时候预加载，你无法指定"距离视口500px时加载"这样的精确值。
· 不支持背景图片：CSS的background-image无法使用loading属性，只能用于img和iframe标签。
· 不支持加载动画：没有内置的淡入效果或骨架屏，图片加载完成后直接显示，没有过渡。
· 不支持错误重试：图片加载失败后不会自动重试。

// 核心代码不到20行const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src; // 从data-src取真实图片地址img.onload = () => img.classList.add('loaded'); // 加载完加淡入动画observer.unobserve(img); // 加载后取消观察，释放资源}});}, {rootMargin: '200px' // 提前200px开始加载});// 对所有懒加载图片注册观察document.querySelectorAll('img[data-src]').forEach(img => {observer.observe(img);});

Intersection Observer vs 传统scroll事件，为什么前者完胜

· 性能：scroll事件每次滚动都会触发，需要用throttle/debounce限频，且需要手动计算每个图片的位置（getBoundingClientRect触发强制重排）。Intersection Observer是浏览器底层异步回调，不阻塞主线程。
· 代码量：scroll方案需要监听滚动+遍历图片+计算位置+限频处理，50行起步。Observer方案核心逻辑15行。
· 兼容性：Intersection Observer 浏览器支持率已超过97%，2026年几乎不需要polyfill。

React

2026年React项目最简洁的做法是直接用原生 loading="lazy"，React 19+ 对原生HTML属性的支持已经非常完善，不需要额外库。如果需要加载动画，自己封装一个 LazyImage 组件（用Intersection Observer），或者用 react-lazyload 这个第三方库（支持图片和组件级别的懒加载、placeholder、加载动画）。

Vue

Vue 3 同样可以直接用 loading="lazy"。需要更丰富功能时用 vue-lazyload 这个插件（注意：vue-lazyload 原版只支持Vue 2，Vue 3要用 vue3-lazyload）。也可以在自定义指令里封装 Intersection Observer 逻辑，用 v-lazy 指令一行搞定。

WordPress

WordPress 5.5 开始已经自动给所有图片添加 loading="lazy" 属性，不需要做任何额外配置。如果你用的是5.5之前的版本或者想更精细地控制（比如排除首屏图片），可以用 WP Rocket、Perfmatters、a3 Lazy Load 等插件。注意：WordPress 自动添加的 loading="lazy" 会跳过首屏的第一张图片（WordPress自动判断），这个策略是对的。

原生HTML / jQuery老项目

如果项目不支持现代JS语法，最简单的做法：给所有非首屏图片加 loading="lazy"，一行不改JS代码。如果连HTML都不能改（比如老CMS系统），用 lazysizes 这个库——它只需要引入一个JS文件，自动检测页面上所有带 class="lazyload" 或 data-src 的图片，纯自动无配置。

首屏图片（尤其是LCP元素）加了懒加载

这是最常见的错误。LCP（Largest Contentful Paint，最大内容绘制）是Google评估页面加载速度的核心指标，而大多数页面的LCP元素就是首屏最大的那张图（Banner、Hero图）。如果你给这张图加了懒加载，浏览器会等JS执行完、判断图片进入视口后才开始下载——这反而让LCP时间变长了。首屏可见的图片不要懒加载，加 loading="eager" 或者不加loading属性（默认就是eager）。WordPress 自动跳过首屏第一张图就是这个道理。

没设宽高导致布局抖动（CLS超标）

懒加载的图片在加载前没有实际尺寸，如果不设置 width 和 height 属性（或者CSS中的宽高），浏览器不知道这个位置要预留多大空间。图片加载出来后会把下面的内容突然往下挤——这就是布局偏移（CLS），Google的另一个核心指标。正确做法：每张图片都写 width 和 height 属性，配合CSS的 height: auto 保持响应式比例。

用JS方案时没处理搜索引擎抓取

如果你的懒加载是用JS实现的（Intersection Observer方案），图片的真实URL写在 data-src 属性里而不是 src 属性里。Googlebot现在能执行JavaScript并识别 data-src，但其他搜索引擎（Bing、百度、Yandex）不一定。如果你的网站依赖图片搜索流量，建议同时保留 src 属性或者用 noscript 标签提供降级方案。最稳妥的做法是用原生 loading="lazy"，所有搜索引擎都能正确识别。

方案选择速查

你的场景	推荐方案	理由
普通网站，图片多，要快	loading="lazy"	零JS、零依赖、浏览器原生、一行搞定
需要加载动画（淡入、骨架屏）	Intersection Observer 自定义	控制加载时机 + CSS过渡动画 + 错误重试
需要懒加载背景图	Intersection Observer	loading="lazy"不支持CSS背景图
React / Vue 项目	loading="lazy" 优先，需要动画时用封装组件	现代框架对原生属性支持完善
WordPress网站	自带，5.5以上版本无需任何操作	WP自动添加loading="lazy"且跳过首屏图片
老项目，不能改HTML	lazysizes.js	引入一个JS文件，自动检测并懒加载所有图片