What is lazy loading and when should I use it?

Lazy loading means the browser waits to download an image or iframe until the visitor is about to scroll to it. Use it for images and embeds below the first screen. Do not use it on the main image at the top of the page, because delaying that one makes the page appear to load more slowly.

Why it matters

A long page may hold dozens of images, yet a visitor only sees the first few at first. Downloading everything immediately competes for bandwidth with the content that matters right now. Deferring the rest saves data and can help the main content appear sooner.

Lazy loading used on the wrong element has the opposite effect. The Largest Contentful Paint element is usually the hero image, and a lazy attribute tells the browser to hold it back until layout is complete.

How to do it

Add the native attribute to images below the fold:

<img src="/img/team.jpg" alt="Our team at work" width="800" height="533" loading="lazy">

Do the same for iframes such as maps and video embeds:

<iframe src="https://www.example.com/embed/123" title="Product demo" width="560" height="315" loading="lazy"></iframe>

Leave the first image or two without the attribute. For the likely LCP image, you can add fetchpriority="high" to ask the browser to fetch it early.
Always include width and height so the page reserves space and does not shift when the image arrives.
Test by scrolling in Chrome DevTools with the Network panel open. Images below the fold should request only as you approach them.

Search engines and lazy content

Google can see content that is loaded when it becomes visible in the viewport. Content that appears only after a click, or only after a scroll event that a crawler never produces, may not be found. Native loading="lazy" and standard viewport-based loading are the safest approaches. Check important images with the URL Inspection tool.

Common mistakes

Lazy-loading the hero image or a logo in the header.
Leaving out image dimensions, causing layout shift.
Hiding the real image address in a custom attribute that has no fallback.
Lazy-loading content that is needed in the initial HTML for search engines.
Applying it to tiny images where the benefit is negligible.

Frequently asked questions

Does lazy loading hurt SEO?

Not when done properly. Problems arise when important images or text only load after interaction that crawlers do not perform, or when the LCP image is delayed.

Do I need a JavaScript library?

Usually not. Modern browsers support the loading="lazy" attribute on images and iframes without extra code.

Can I lazy-load background images?

The native attribute does not apply to CSS backgrounds. You would need a script, or switch to an img element where practical.

Crawvix's scan checks whether images use modern formats, right sizes and lazy loading. To see the result for your site, Try the free website sample.