One of the biggest performance wins for image-extensive webpages is
lazy loading. Normally, the browser fetches all the required resources from the server as soon as possible. When the website has lots of images this goes against the speed and performance of the website. Consider a page loading 100s of dog images, there will be 100 asynchronous http requests. The more the http requests, the slower the website.
All images are required for the functionality of the website, but they might NOT be required on the FIRST load. Here
Lazy loading does the magic— images will be fetched only when they are required for the content in the current view port. So for a long image-extensive page, the images which are required by the top part of a website will be initially fetched on the first load and as the website is scrolled down, the respective images are fetched.
The list goes on. But the good news is the specification for native image lazyloading has been merged into the HTML standards. Check HTML standard repo.
With this we don’t need any lazy loading libraries anymore and all we need to do is the following:
<img loading="lazy" src="https://placedog.net/400/400/random" alt="doggo">
loading attribute, this is the magic keyword. It accepts 3 values
auto- this is equivalent to not including the
loadingattribute. This sets the default browser behavior for images.
lazy- fetches images only when the element is in/near the viewport.
eager- fetches the images immediately.
Lazyload will soon be supported in all major browsers by default. But if you want to test it, you can turn on the browser’s experimental flags:
Enable lazy image loadingto