Browsers are always trying to optimize as well. Some browsers already support lazyloading of images and iframes, using the loading attribute.
Back in the days, we lazyloaded images by not setting its src-attribute, but by introducing a fake attribute holding the path to our desired image. Using JS, we can detect if the image is near the user's viewport, and load them.
Native image lazyloading support by browsers
Intent to Ship: Lazily load below-the-fold images and iframes
Eventually, it happened within Chromium and native lazyloading is supported as off:
- Chrome 76
since July 30, 2019;
- Edge 79 (also on Chromium nowadays),
since January 15, 2020;
- FireFox 75
since April 8, 2020;
- Opera 64
since October 7, 2019;
- Android Browser 80
since Februari 18, 2020
- Safari 14
since: to be announced
Visit caniuse.com for current browser support. While already around for a while, FireFox is late to the party and Safari is still missing. Another reason why Safari is called the new Internet Explorer.