Native lazy loading has arrived!
Article Summary
Andy Potts from BBC cut page load times in half with a single HTML attribute. No JavaScript libraries, no complex code—just one word added to image tags.
When Chrome 76 introduced native lazy loading in 2019, it promised to revolutionize image performance without the usual JavaScript overhead. Andy Potts, a Senior Software Engineer at BBC, tested it on an internal product serving 3,000 daily users with pages containing up to 100 images.
Key Takeaways
- Load time dropped ~50% (from 1 second to under 0.5 seconds)
- Saved up to 40 server requests per page load
- Implementation: just add loading='lazy' attribute to img tags
- Browser support limited at launch, requiring polyfills for non-Chrome browsers
- Background images not supported, only inline img and iframe elements
Native lazy loading delivered massive performance gains with minimal effort, though browser compatibility and background image limitations meant it wasn't a complete solution.
About This Article
BBC's internal product struggled with performance when rendering query results that included up to 100 images. They needed a fix that didn't rely on additional JavaScript libraries or complex custom code.
Andy Potts added the loading="lazy" attribute to image tags and included explicit width and height attributes. This prevented layout shifts while images loaded.
Supported browsers no longer needed polyfills, and the page layout stayed stable during image loading. Native lazy loading proved it could improve performance without the overhead of third-party JavaScript.