What is the loading="Lazy" attribute for images and iframes?

Question

To help with my site’s SEO, I use an extension in Chrome called Meta SEO Inspector.

After an update, she began to indicate that my site needed to add the attribute loading="lazy" in tags <img>.

From what I’ve seen of support table it seems to me relatively new.

The question is:

• What is the attribute for loading in the images?
• How the option works lazy in the attribute loading specifically?
• This attribute is tag specific <img> or works in other tags?

Answer 1

What is the attribute for loading in the images?

To mismatch the standard image loading behavior in an HTML document. The attribute loading is an enumeration that you may have two values:

• eager, that causes the image to load immediately (along with the loading of the page itself), without considering its position in the document. It is the standard behavior.
• lazy (novelty), which causes the image to be loaded only if it is in the imminence to enter the viewport user (ie what it sees).

The immediate advantage that is perceived is the postponement (and eventually even waiver) of the loading of images that the user will not immediately view. In environments (such as mobile phones) where internet access is a little less powerful, failing to load a heavier resource (like image) is something of extreme value in terms of user experience.

How the option works lazy in the attribute loading specifically?

Operation may vary slightly between browsers, but generally when defining loading="lazy" in some element that supports it, the browser follows these steps.

_{Assuming I lower the term "images" refers to elements that support the configuration loading="lazy" and with the attribute loading defined as lazy, one has:}

• As images who are in the viewport user are immediately loaded. Behavior is analogous to loading="eager", which is the standard.

• The images that are relatively below the viewport user are not loaded.

  • Once the user, when performing scroll by the page, approaching the image, the browser starts the loading process. The distance (referred to as threshhold may vary^[1]) for the load to start is variable.
  • Most of the time the image will have already been loaded when the viewport user to target. In this sense, most of the time, the image is loaded from the imminence of becoming visible.

It is important to note that in order for the browser to calculate the distance it needs wait around to load the image more accurately, it is ideal and recommended that whenever an image is defined with loading="lazy" also specify width and height (through attributes such as width and height, respectively). For example:

<img src="image.png" loading="lazy" width="200" height="200" alt="..." />

This attribute is tag specific <img /> or works in others tags?

As far as I could tell, loading="lazy" is functional in elements of tag img and iframe.

Endnotes

This behaviour is liable to polyfill. An example.

Like the support is still relatively low, you can check whether the browser supports it as follows:

// Para <img>:
HTMLImageElement.prototype.hasOwnProperty('loading'); //=> true ou false

// Para <iframe>:
HTMLIFrameElement.prototype.hasOwnProperty('loading'); //=> true ou false

For further deepening, I suggest reading of this article.

Answer 2

the Attribute loading can be used in tags <img> or in tags <iframe>. It specifies for the browser whether to load <img> or <iframe> off the client screen, should be done immediately or be postponed until the client scrolls to where the image is.

*NOTE: BY DEFAULT BROWSER LOAD IMG/IFRAME IMMEDIATELY WHEN LOADING PAGE.

With loading = "eager" immediately loads this already comes by default, so it is not necessary to put it. And the loading = "lazy" postpone loading until the user scrolls to where the relevant img/iframe is.

This helps to make page loading faster and lighter.

It shortens the length of the Critical Rendering Path.

Answer 3

This parameter is used for page loading performance purposes.

Created so that the site that has many images does not take long to load what makes according to studies mobile users leave the page without consuming the content. the loading="lazy" causes the content of the page to be loaded and as soon as fully loaded the images come later. **

It’s a no for performance and marketing

**.