SuperAPI AI 工具集

lazy-loading

前端与建站

查看项目

更新于 10-16 04:31

技能介绍

用途:该技能用于审计页面加载缓慢、资源过重或渲染延迟的问题,重点检查首屏以下(off-screen)内容是否实施了懒加载。懒加载会推迟非关键资源的加载,减少初始页面体积、加快首次绘制,并为用户可能不会滚动到的内容节省带宽。

主要能力:确认首屏以下的图片及重资源是否已懒加载;给出修复方式;解释懒加载如何推迟资源加载以改善初始加载性能;在代码审查中定位增加不必要网络、CPU 或布局开销的具体文件、请求或渲染步骤,并说明确认问题所用的测量方法。

使用要点(引自资料):对首屏以下的图片使用 loading="lazy";绝不要对 LCP 或首屏内的图片做懒加载,它们需要优先加载;对 iframe、视频和重型组件做懒加载;需要自定义懒加载时使用 Intersection Observer。

限制与前提:只有在代码或路由上下文能够明确判断元素位于首屏以下时才报告该问题;如果片段中首屏位置不明确,不要臆造懒加载缺陷。完整的实现细节、代码示例和针对具体框架的指导见 references/rule.md。规则页面:https://frontendchecklist.io/en/rules/performance/lazy-loading。