What Is Lazy Loading?

Lazy loading is a technique that delays loading images and iframes until the visitor scrolls near them. The browser downloads only what is on screen first, so the top of the page appears sooner and less data is used. Modern browsers do it with one HTML attribute, loading="lazy". The one rule to remember: never lazy-load your hero image, because that slows the number Google measures.

Most of the web now lazy-loads images by default. Knowing where it helps, and where it hurts, is what matters.

How does lazy loading work?

Lazy loading works by telling the browser to hold off downloading an image until it is about to enter the screen. Nothing below the fold is fetched until the visitor scrolls toward it.

In MDN's words, the lazy setting defers loading the image until it reaches a calculated distance from the viewport (MDN, updated May 2026). The distance is decided by the browser.

You add it right on the image tag:

<img src="photo.jpg" loading="lazy">

The same attribute works on iframes, such as an embedded YouTube video or a Google Map.

What does lazy loading improve?

Lazy loading improves how fast your first screen appears, because the browser downloads fewer files before showing the page. A lighter first load feels faster and costs the visitor less mobile data.

Picture a long homepage with 30 photos. A visitor sees only the top few before scrolling.

Lazy loading lets the browser fetch those few now, and the rest as they come into view. That smaller first download feeds directly into your Core Web Vitals and overall load speed.

In our experience, image-heavy sites feel slow mostly because everything tries to load at once. Lazy loading is one of the simplest cures, as long as the hero image stays eager.

The one image you should not lazy-load

The one image to load eagerly is the large one at the top of the page. It is usually your Largest Contentful Paint element, the biggest thing a visitor sees first.

web.dev is blunt about this: don't lazy-load images that are likely to be in-viewport when the page loads, especially LCP images (web.dev, 2024).

Lazy-loading the hero adds a delay before the browser even starts fetching it. That pushes back your biggest visible image and hurts the score. Keep anything above the fold on normal, eager loading.

Part of the page	How to load it
Hero or above-the-fold image	Eager (normal loading)
Photos further down the page	Lazy
Embedded video or map	Lazy
Logo and header icons	Eager (normal loading)

Do I need to set up lazy loading myself?

Most sites get lazy loading without any manual work. Browsers and popular platforms now apply it to images by default.

Content systems like WordPress add the attribute automatically, and website builders do the same. You rarely switch it on by hand.

What you do need to check is the opposite mistake. Sometimes a theme or plugin lazy-loads the hero image too, which is exactly the image that should load first.

Frequently asked questions

Does lazy loading help SEO?

Indirectly, yes. Lazy loading speeds up the first load, and page speed is part of Google's Core Web Vitals. There is no direct ranking reward for using it. The benefit is a faster page and less wasted data, which help both visitors and your scores.

Can lazy loading hurt my Core Web Vitals?

Yes, if you lazy-load the wrong image. Delaying the large hero image at the top of the page pushes back your Largest Contentful Paint, one of the Core Web Vitals. Keep above-the-fold images on eager loading, and lazy-load only what sits further down the page.

Does lazy loading work on all browsers?

Yes, all major browsers support the loading attribute, and have for years. On any browser that does not, the image simply loads the normal way, so nothing breaks. That makes browser-level lazy loading safe to use without a fallback script for most sites, which is why it has largely replaced the old JavaScript approach.

What is the difference between lazy loading and image optimization?

Lazy loading controls when an image loads, while image optimization controls how big the file is. One delays offscreen images; the other shrinks every image. You want both together, because a small file that loads at the right moment is the fastest result.

Should videos and iframes be lazy-loaded too?

Yes, embedded iframes like YouTube or Google Maps are heavy and gain the most. The same loading="lazy" attribute works on them. Deferring a map or video that sits low on the page can save a large chunk of the initial download.

Fast first, then the rest

Storming Solutions builds fast websites for Malaysian businesses, and loading images in the right order is part of every build and speed check we run. We tune for the first screen a visitor actually sees, not a perfect number on paper.

Does your site feel slow to load? Ask us for a speed check on WhatsApp, read why a website loads slowly, or talk to us about web development.