Lazy-loading is a technique to defer downloading a resource until it's needed, which conserves data and reduces network contention for critical assets. It became a web standard in 2019 and today loading="lazy" for images is supported by most major browsers. That sounds great, but is there such a thing as too much lazy loading?
This post summarizes how we analyzed publicly available web transparency data and ad hoc A/B testing to understand the adoption and performance characteristics of native image lazy-loading. What we found is that lazy-loading can be an amazingly effective tool for reducing unneeded image bytes, but overuse can negatively affect performance. Concretely, our analysis shows that more eagerly loading images within the initial viewport—while liberally lazy-loading the rest—can give us the best of both worlds: fewer bytes loaded and improved Core Web Vitals.
According to the most recent data in HTTP Archive, native image lazy-loading is used by 17% of websites and adoption is growing rapidly. This much of a foothold in the ecosystem is remarkable for a relatively new API.