图片懒加载性能图解分析实践

🚗废话不多说，直接上干货！

性能监测工具: PageSpeed Insights

图片懒加载工具：github.com/verlok/vani…

图片懒加载处理前指标

一。某电商首页，图片加载数看下图

二。性能分析评分图

1. 看优化建议，图片影响加载4.2s
2. 诊断结果网络负载4340Kb

图片懒加载处理后

一。首页图片加载数

二。性能分析评分图

1. 优化建议中不在有图片影响加载指标
2. 诊断结果网络负载降至1187kb

指标部分细则

总结

1. 图片懒加载在影响最为突出点在网络负载上。
2. 诊断结果（最大限度地减少主线程工作、FCP、网络负载过大、缩短js执行时间）四个指标明显改善，最大提升点在script和rendering。
3. 图片懒加载优化降低了CPU负载，js脚本执行效率随之提升。