What is the loading='lazy' one of the html attributes and how does it improve page performance?

loading="lazy" is an HTML attribute for and

loading="lazy" is an HTML attribute you can add to <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175130480555833.jpeg" class="lazy" alt="What is the loading='lazy' one of the html attributes and how does it improve page performance?" > and <iframe></iframe> elements to enable native lazy loading in the browser. This means the resource won't load immediately when the page loads — instead, it waits until the user scrolls near it. It's a simple but effective way to improve performance without needing extra JavaScript.

How Lazy Loading Helps Performance

The main benefit of loading="lazy" is reducing initial page load time. When images or iframes are far below the fold (the part of the page visible without scrolling), loading them upfront just slows things down unnecessarily. By deferring their loading until they're needed, browsers save bandwidth and processing power.

• Less data usage for users, especially on mobile
• Faster initial load , which helps with perceived performance
• Lower server requests during page load

This works best on long pages with many images or embedded content.

Supported Elements: img and iframe

Right now, loading="lazy" applies directly to two elements:

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" loading="lazy" alt="A nice landscape">
<iframe src="embed.html" loading="lazy"></iframe>

It doesn't work on other elements like <video></video> or custom components unless you handle lazy loading manually or via a script. Also, keep in mind that not all browsers support it fully, though most modern ones do.

When Not to Use loading="lazy"

There are some cases where you should avoid using this attribute:

• For images above the fold — delaying them might hurt performance or cause visual shifts
• For small icons or UI elements — the savings aren't worth the risk of a broken fallback
• If you already use a JavaScript-based lazy loading library — mixing both could cause conflicts

Also, don't assume everything will “just work.” Always test how your page behaves as users scroll, especially on slower networks.

A Few Gotchas to Keep in Mind

One thing people often overlook is that loading="lazy" isn't a magic bullet. You still need to follow good image practices like optimizing file size and setting dimensions. Otherwise, even with lazy loading, images may shift layout when they finally load.

Another point: if a browser doesn't support loading="lazy" , it just ignores it and loads the image normally. That's fine, but you might want to combine it with a polyfill or JS-based solution if you need broader control.

And remember, even though it's easy to use, always think about the user experience. Don't overdo it — some images are better off loading right away.

Basically that's it.

The above is the detailed content of What is the loading='lazy' one of the html attributes and how does it improve page performance?. For more information, please follow other related articles on the PHP Chinese website!