As shown in the image above, since Chrome 75, the lazy loading of native support images, writing <img loading="lazy"> in the code, supports scrolling to the viewport and loading the image.
What is lazy loading?
Lazy loading is a method of lazy loading non-critical resources when loading a page, and these non-critical resources are loaded when needed (such as text, images, videos, etc.).
Google engineer reportsWith this mechanism, the page load speed increases from 18% to 35%, depending on the underlying network. You should also see the actual application of lazy loading, the process is as follows:
The user visits a page and starts scrolling through the content
At some point, scroll the placeholder image into the viewport
The placeholder image is instantly replaced with the final image
See the technical implementation details of Chrome's built-in lazy loading feature.Https://addyosmani.com/blog/lazy-loading/.