Intermediate LevelHTML & Semantic Web
How does native browser lazy loading (loading="lazy") work on images and iframes?
❓ Interview Prompt: Explain loading="lazy" attribute, intersection observer offloading, viewport thresholds, and performance gains.
Adding 'loading="lazy"' to '<img>' and '<iframe>' tags instructs the browser to defer downloading the asset until it scrolls near the visible viewport threshold.
Benefits:
•
Saves bandwidth and speeds up initial page LCP (Largest Contentful Paint).
•
Native browser implementation eliminates heavy JavaScript IntersectionObserver libraries!
Rule: Never lazy-load above-the-fold hero images!
Code Implementation Example
html
<!-- Native browser lazy loading for below-the-fold image -->
<img src="footer-banner.jpg" alt="Footer Banner" loading="lazy" width="800" height="400">💡Native browser lazy loading attribute on below-the-fold image.
🎯 Interview Key Takeaway
Add loading="lazy" to below-the-fold images and iframes to defer offscreen network downloads natively.
#loading lazy#Lazy Loading#Performance#Intermediate
Back to all HTML & Semantic Web Questions→