loading
The HTML loading attribute controls the timing of image or iframe loading, improving performance by deferring content that’s off-screen or loading it immediately when needed.
loading attribute
The loading attribute in HTML determines how images and iframes are loaded, helping to optimize page speed and reduce bandwidth usage. It can be configured to:
- lazy: Postpones loading until the element is close to entering the viewport, enhancing performance for off-screen content.
- eager: Loads immediately, regardless of visibility, which is the default behavior.
Syntax
index.html
<img loading="eager | lazy" />
Example
Content above the fold
More content...
index.html
<h1>Content above the fold</h1>
<img src="img.jpg" alt="Social media" loading="eager">
<p>More content...</p>
<br/>
<img src="img.jpg" alt="Social media" loading="lazy">
Apply
loading="lazy" only to images that are placed below the foldValues
- eager: Loads the
imagesoriframesright away, regardless of its visibility on the screen. This is the default behavior when theloadingattribute is not specified. - lazy: Postpone the loading of the
imagesoriframesuntil it is close to the viewport, which helps enhance page load speed by prioritizing visible content.
Applies To
The loading attribute can be applied to the following HTML elements:
Conclusion
The loading attribute in HTML helps optimize page performance by determining when images and iframes should load. When set to lazy, elements are loaded only as they approach the viewport, while the eager value loads them right away. This method enhances the prioritization of visible content and improves bandwidth efficiency.