
懒加载用错了地方就会影响首屏速度。把主视觉图和首屏标题图一起延迟,浏览器要等到脚本执行之后才会发出请求,最大内容绘制时间反而被推迟了。
范围要划定清楚。首屏可见区域内的图片、字体、关键样式应该正常加载,主图可以显式标记为高优先级;折叠线以下的图片可以使用原生的延迟属性,不需要额外的脚本。列表和长文中的图片是懒加载的主要对象,阈值设置提前一屏左右,滚动时就不会出现空白等待。
尺寸和占位决定了稳定性。图片标签中注明了宽高或者使用固定比例的容器来防止加载完成后被挤压;容器先填充底色或者骨架。脚本类资源用延迟或者异步的方式去加载,非重要的部分等到交互触发之后再去加载。
要注意抓取的影响。使用滚动事件注入的内容不能被抓取程序读取,重要的正文和内部链接应该放在最初的文档里,或者用可以执行的加载方式来处理。
懒加载的边界就是首屏体验,范围、阈值、占位三个地方设置对了,提速才不会变成迟速。