HTML Lazy Loading Images With loading="lazy" Attribute - Explained
The native HTML lazy loading for images with the loading="lazy" attribute, is a game-changer for the Internet. If a web page contains multiple images, the browsers tend to download all of them in one go - even if the images are not in the user's viewport.
How Image Lazy Loading Works
Consider a web page containing 10 images. A user wants to view the page on their mobile screen. In a typical situation, the mobile browser will attempt to download all the images at once before the web page is rendered on mobile display.
Of course, this will not only consume data and the images that user does not intend to view are also loaded on the web page. More importantly, it will slow down the page loading.
The "Loading" Attribute
Modern browsers now solve this problem with the new loading attribute. Following are the supported values for loading attribute:
- loading="lazy": This tells browser to lazy-load images
- loading="eager": Load the images synchronously with the web page aka load right away
- loading="auto": Decision to lazy-load is left to the browser
Note: If you do not specify the loading attribute, the browsers will default to loading="auto".
I'll continue this post with more interesting information about image lazy loading.#HTML
Replies, Feedback and Questions
This is actually a very interesting update. AFAIK, currently only Google Chrome 75 supports its via special flag. But Chrome 76 onwards natively supports the HTML image lazy loading. I believe we should support this feature out of the box at CrazyEngineers as well.
Also, looking at the performance tests performed by several web developers, Chrome's implementation of lazy loading is actually very good. Chrome could make quick requests to the image and reduce the page load time from 9 seconds to ~4.5 seconds on a page size that is about ~600 Kb in size.
I must also highlight the SEO benefit of this!
Google's paying lot of importance to faster loading websites and web pages. Google's publicly stated that page loading time is an important SEO factor and web pages that load faster will get preference in the search results.
That's the reason we've Google AMP project which cuts down on CSS and JS and renders web pages directly from Google's cache.