Native lazy loading lets the browser delay loading certain off-screen images and iframes until they are close to being needed. The basic version only requires adding loading="lazy" to the element.
Images and embeds can make a page heavy fast. Lazy loading helps reduce initial page weight by letting the browser focus on the content the visitor can actually see first.
Add loading="lazy" to images that are likely below the fold.
<img
src="/images/example.jpg"
alt="Example image"
width="900"
height="600"
loading="lazy">Do not lazy-load your main hero image or likely Largest Contentful Paint image. Web.dev warns that lazy-loading the LCP image can delay that important resource and hurt LCP. :contentReference[oaicite:1]{index=1}
Native lazy loading also works for iframes. This is useful for embedded videos, maps, widgets, forms, and third-party content placed lower on the page. MDN describes iframe loading as a browser hint for whether the iframe should load immediately or only when needed. :contentReference[oaicite:2]{index=2}
<iframe
src="https://www.youtube.com/embed/example"
title="Example video"
width="560"
height="315"
loading="lazy"
allowfullscreen></iframe>For galleries, keep the first visible images normal and lazy-load the images lower down the page.
<div class="gallery">
<img src="/images/photo-1.jpg" alt="Photo one" width="600" height="400">
<img src="/images/photo-2.jpg" alt="Photo two" width="600" height="400">
<img src="/images/photo-3.jpg" alt="Photo three" width="600" height="400" loading="lazy">
<img src="/images/photo-4.jpg" alt="Photo four" width="600" height="400" loading="lazy">
<img src="/images/photo-5.jpg" alt="Photo five" width="600" height="400" loading="lazy">
</div>A good pattern for articles is to load the hero image normally and lazy-load supporting images inside the article body.
<article>
<img
src="/images/hero.jpg"
alt="Article hero image"
width="1200"
height="675">
<p>Article intro content here.</p>
<img
src="/images/supporting-image.jpg"
alt="Supporting example"
width="900"
height="600"
loading="lazy">
</article>Embedded videos are often heavier than normal images. Lazy-loading below-the-fold video iframes can keep the first page load lighter.
<div class="video-wrap">
<iframe
src="https://www.youtube.com/embed/example"
title="Helpful webdev video"
width="560"
height="315"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<style>
.video-wrap{
aspect-ratio:16 / 9;
max-width:760px;
}
.video-wrap iframe{
width:100%;
height:100%;
border:0;
}
</style>
Always give lazy-loaded images a size. Use width and height attributes, or reserve space with CSS. This helps the browser avoid layout jumps while images load.
<img
src="/images/card.jpg"
alt="Card example"
width="800"
height="500"
loading="lazy">
<style>
img{
max-width:100%;
height:auto;
}
</style>
The two common values are lazy and eager. Use lazy for off-screen media. Use eager, or omit the attribute, for important media that should load immediately.
<!-- Important above-the-fold image -->
<img src="/images/hero.jpg" alt="Hero image" width="1200" height="675" loading="eager">
<!-- Lower-page image -->
<img src="/images/example.jpg" alt="Example image" width="900" height="600" loading="lazy">Blog images, image galleries, directory thumbnails, comment images, screenshots, embedded videos, maps, third-party widgets, lower-page iframes, documentation pages, and long tool pages with supporting media.
Lazy-loading the hero image, lazy-loading the LCP image, forgetting image dimensions, using it as a replacement for compression, applying it to tiny pages where it adds no value, or assuming lazy loading fixes slow third-party scripts.
Native lazy loading is best when you simply want images or iframes to load later. Intersection Observer is better when you need custom JavaScript behavior, custom thresholds, reveal animations, infinite scroll, analytics tracking, or more control.
Native lazy loading delays resource loading for images and iframes. content-visibility:auto lets the browser skip rendering work for off-screen sections. They can be used together on long pages, but they solve different problems.
Use loading="lazy" on images and iframes that are likely below the fold. It is one of the simplest performance wins for pages with lots of media.
Skip it on important above-the-fold images, hero images, logos, primary UI images, and anything likely to be the Largest Contentful Paint element.
Native lazy loading delays loading off-screen images and iframes. content-visibility helps browsers skip rendering work. Intersection Observer gives JavaScript visibility callbacks. Image performance covers sizing, compression, formats, and layout stability.
If you need custom visibility logic, read the Intersection Observer guide. If you want faster long-page rendering, read the content-visibility guide. If you need responsive component styling, read the CSS Container Queries guide.
Read more about lazy loading on MDN Web Docs and browser-level image lazy loading on web.dev.
image performance, responsive images, fetchpriority, preload, iframe performance, video embeds, and Core Web Vitals would all connect well to this topic.