图片延迟加载的基本原则

不过占位内容本身也要控制大小，避免影响初始加载性能

常见误区与注意事项

常见误区与注意事项 过度延迟加载 ：部分开发者对所有图片都设置 loading="lazy" ，但可能包括首屏图片

针对LCP改善的图片优化策略

使用预加载或优先级提示 对于确定的LCP图片（如页面主视觉图），可以在 <head> 中用 <link rel="preload"🔥> 提前发起请求，使其在网络资源队列中获得较高优先级

应使用 loading="eager" 或直接省略该属性来保证首屏图片立即加载

这种情况需要同时优化字体加载⚡（如使用 font-display: swap ）和图片本身