I2.05.1lazy load cuts first-screen cost设计
懒加载降低首屏成本
别名: 延迟加载 · 首屏减负 · below-fold defer
概念解释
懒加载（lazy loading）把尚未进入需求范围的资源——视口外的图、未打开的折叠、还没切到的标签——留到真正要看见或要用时再取。它降低的是首屏成本：第一眼那一帧要争的带宽、解码和主线程，不再被下面三屏的图片和脚本摊薄。预取是把下一跳提前；懒加载是把不必现在出现的东西推后。方向相反，都在改等待落在哪一段。
机制
首屏的等待由关键路径上的字节和计算决定。路径上每多一张未看见的大图、每一段未打开面板里的数据，都在和标题、主列抢同一条管道和同一轮排版。人还没滚到它们，它们却已经把第一眼变慢。懒加载把这些对象从关键路径上摘掉，首屏变短，下面的对象改在接近需求时再进入路径。总功未必减少，甚至因为稍后要补请求而略增；减少的是与「开始使用」竞争的那一截。
它依赖一条界：什么算「现在需要」。常见界是视口加一点预热距离，或用户打开某个面板。界画对了，首屏瘦下来，后面仍赶得上。界画错了，不是这条的收益问题，是后两叶的空白和搜索盲区。
边界
首屏本身就很长（超长营销页把「第一眼」拉成两屏）时，懒加载只能帮视口外的部分，帮不了视口内还在挤的媒体——那些该按重要性排序，不是该懒。所有内容都在首屏里的短页，懒加载没有可推后的对象，加上去只会多一层观察和请求。必须随文档一起到齐才能正确排版的资源（决定高度的字体、首屏背景）若被懒掉，首屏自己会先错再改，成本没降，还添一次跳动。预取当前页关键字体不是懒加载，不要为了「少加载」把关键路径也推后。
怎么落地
- 把视口外的媒体、隐藏面板、未激活标签从首屏请求里拿掉，首屏只保留认路和主任务所需。
- 用「是否参与第一眼」而不是「是不是图片」来决定懒不懒：首屏主图不懒，屏外缩略图懒。
- 测量第一眼的字节和解码时间，对比懒加载开关，确认省下的是首屏而不是把同一笔账挪到无观测的时段就算成功。
- 验证：节流网络打开页面，看首屏完成时有没有尚未接近视口的大资源已经下完。有，首屏成本就还在被非首屏摊薄。