Tutorials › HTML Fundamentals › Lazy Loading

Lazy Loading

4 min read

Add loading='lazy' to images and iframes below the fold for native browser lazy loading with no JavaScript needed. Always set width and height to prevent layout shift. Never lazy load the hero or LCP image.

Native Lazy Loading

<!-- Images (native) -->
<img src="photo.jpg" alt="..." loading="lazy">

<!-- iframes (native) -->
<iframe src="..." loading="lazy"></iframe>

<!-- Scripts — defer achieves similar effect -->
<script src="chart.js" defer></script>

Native lazy loading is supported in all modern browsers. Just add loading="lazy"!

← Responsive Images Next: HTML Performance Tips →

Quick Access

Lazy Loading

Native Lazy Loading