Google Chrome Native lazy-loading

Google Chrome Native lazy-loading

Author: emre HTML SEO

It’s finally here! Google Chrome support native lazy loading by adding the loading attribute to an image and an iframe!

More info at https://web.dev/native-lazy-loading

What is lazy-loading?

“Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used. The opposite of lazy loading is eager loading.” -Wikipedia

Here is a sample code:

<img src="/theme/img/logo.png" title="Emre Rothzerg" width="50" height="50" loading="lazy" /><br><!-- or --><br><iframe src="https://example.com" loading="lazy"></iframe>

 

The loading attribute in img and iframe elements supports the following values:

  • auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
  • lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
  • eager: Load the resource immediately, regardless of where it’s located on the page.

Write a comment

WHO AM I?
Emre Rothzerg

Strategist.
Tech Lead.
Digital Marketer.

FOLLOW:
CONTACT:
[email protected]
HAVE A QUESTION?
JOIN NOW