懒加载技术：提升页面加载速度

懒加载的基本原理

懒加载（Lazy Loading）是一种延迟加载策略：页面初始化时只加载视口内（用户当前可见区域）的资源，当用户滚动页面时，再按需加载即将进入视口的资源。对于图片密集的网页，懒加载可以将初始加载资源减少60-80%，显著改善首屏加载速度和LCP指标。

图片懒加载实现方法

• 原生HTML属性：现代浏览器支持loading="lazy"属性，只需在img标签添加即可，兼容性约95%
• Intersection Observer API：JavaScript实现，性能更好，可自定义触发时机和回调
• 第三方库：lazysizes是目前最流行的懒加载库，功能全面，兼容性好

注意事项与最佳实践

懒加载使用时需注意：首屏内可见的图片（特别是LCP元素）绝对不能设置懒加载，否则会严重影响LCP指标；始终为图片指定width和height属性，避免懒加载时产生布局偏移（影响CLS）。对于iframe嵌入内容（YouTube视频、地图等），同样推荐使用懒加载，可以将大量JavaScript延迟到用户实际需要时再加载，大幅减少初始页面重量。