Lazy loading means a web page only fetches an image, video or chunk of code when the visitor is about to need it, usually when they scroll close to it. Everything near the top loads straight away; the rest waits. Pages appear sooner and people who never scroll down never download the bottom half.
How the browser decides when to fetch
The simplest form is built into HTML. Adding loading="lazy" to an img or iframe tells the browser to hold off until the element is within a certain distance of the viewport. The browser picks that distance itself and starts loading a little before the element scrolls into view, so most visitors never see a gap. Chrome, Edge, Firefox and Safari all support the attribute.
Before native support, sites used JavaScript and the Intersection Observer API to watch for elements entering the screen and then swap in the real image address. That approach is still used for custom effects such as fading images in. Frameworks also lazy load code: React's lazy function, for example, splits a rarely used component, like a booking calendar, into a separate file fetched only when it is shown.
Example: a restaurant with a long gallery
A restaurant's menu page has a header photo followed by forty dish photos. Without lazy loading, a phone visitor downloads all forty before the page settles, even if they only want opening hours. With loading="lazy" on the gallery images, and only on those, the first screen loads quickly and dish photos arrive as the visitor scrolls. An embedded Google Map further down is another good candidate, because map iframes pull in a lot of script.
When lazy loading helps and when it hurts
It helps on any page with many images or embeds below the fold, and on mobile connections where bandwidth is tight. It hurts when applied to the main image at the top. Google's guidance is clear that the image likely to be the Largest Contentful Paint element should not be lazy loaded, because delaying it makes the page look slower. Googlebot does render lazily loaded images that use the native attribute or standard techniques, so it is safe for SEO when done properly.
Lazy loading mistakes to avoid
- Lazy loading the hero image or logo. Load above-the-fold images normally; you can even mark the hero with
fetchpriority="high". - Omitting width and height. Without reserved space, content jumps when images arrive, which hurts Cumulative Layout Shift.
- Loading only on scroll events. Old scripts that wait for a scroll never load images for crawlers or users who jump via a link; prefer the native attribute.
- Hiding important content behind clicks. Text that only loads after a button press may not be seen by search engines.
Related terms
- Largest Contentful Paint: the metric hurt by lazy loading the wrong image.
- Cumulative Layout Shift: why reserved image space matters.
- Core Web Vitals: Google's page experience metrics.
- WebP: smaller images to pair with lazy loading.