懒加载（Lazy Loading）是指只加载用户当前可见区域的图片，滚动到附近时再加载其余图片。这可以大幅减少首屏请求数。而WebP则减少每张图片的体积。两者结合，能让页面速度达到极致。本文将教你如何实现懒加载+WebP。
一、懒加载的工作原理
传统网页加载时会一次性请求所有图片，即使页面很长，用户可能永远看不到底部图片。懒加载通过监听滚动事件，仅当图片进入视口时才设置真实的src属性。这样首屏请求数可能从50个降到10个，加载时间从5秒降到1.5秒。
二、原生懒加载（loading="lazy"）
现代浏览器支持原生懒加载属性：
<img src="image.webp" loading="lazy" alt="描述">
只需添加loading="lazy"，浏览器自动实现懒加载。这种方式最简单，兼容Chrome、Firefox、Edge等，Safari从15.4开始支持。配合WebP，原生懒加载是最佳组合。
三、使用Intersection Observer实现自定义懒加载
对于需要更精细控制或兼容旧浏览器的场景，可以使用JavaScript Intersection Observer。示例代码：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
然后在HTML中将真实的WebP URL放在data-src属性中。
四、WebP与懒加载的兼容性注意事项
懒加载不影响WebP的显示。只需确保懒加载动态设置的src指向.webp文件。如果使用picture标签做优雅降级，懒加载需要作用于picture元素或内部img元素。建议将loading="lazy"放在picture内部的img标签上。
五、性能测试：懒加载+WebP的效果
以包含100张图片的长页面为例：原始JPEG（每张300KB）未做懒加载，首屏加载约30MB，耗时6秒。转换为WebP（每张210KB）并开启懒加载，首屏只加载前10张，约2.1MB，耗时0.8秒。用户滚动时再按需加载，体验极佳。
六、使用一页共享工具为懒加载准备WebP图片
先用一页共享的图片转WebP工具批量转换所有图片，获得体积小的WebP文件。然后在页面中添加loading="lazy"属性。两步完成，你的网站速度将超越90%的同行。
相关文章
