Lazy loading explained: what to defer and what to load straight away

The short answer

Lazy loading tells the browser to wait before downloading an image, video or embedded frame until the visitor is about to see it. Use it for content below the first screen, and do not use it for the main image or anything visible when the page opens, because that delays the part visitors judge first.

What lazy loading is and what it trades

Lazy loading means the browser waits to download an image, video or embedded frame until the visitor is about to see it. Everything below the first screen can wait. Everything in the first screen cannot.

The benefit is a lighter first load. A long page with many pictures does not fetch all of them up front, and a visitor who never scrolls to the bottom never downloads the pictures there. The trade is small delays later: when the visitor scrolls, the browser has to fetch what it skipped. Done well, that happens just before the content comes into view and nobody notices. Done badly, the visitor sees empty boxes.

The technique applies to elements the page asks for by address, mainly images and frames. It does not apply to the text of the page, and it does not change fonts, which are fetched when the styles need them.

A page walked from top to bottom

The simplest way to decide is to go through a typical page in the order a visitor sees it.

The key rule comes from web.dev: leave lazy loading off the main image and any image likely to be visible at the top of the layout on any device. There is a technical reason. An image marked lazy is requested only after the browser has worked out where it sits, which means waiting for the styles to be downloaded and applied. An ordinary image can be requested as soon as the browser reads the HTML. For the main image, that wait pushes back the moment the page looks ready, and it is what the LCP measure records. Lighthouse has an audit that flags exactly this mistake. The guide to website development stages shows where such checks belong in a project.

How to switch lazy loading on

The simplest method is built into browsers. Add the loading attribute with the value lazy to an image or a frame, and the browser decides when to fetch it. Support for images and frames is wide. For video, native support is more limited, so check current browser support before relying on it.

Three further details prevent trouble.

• Give every lazy image a width and height, or an aspect ratio in the styles. A deferred image has no size until it arrives, and without reserved space the content jumps as it appears.
• For a video, use a poster image and set the preload attribute to none for videos far down the page, which gives the best chance that nothing downloads until someone plays it.
• If the platform or theme adds lazy loading automatically, check what it does to the first image. Many can be told to treat the first image or two normally.

Older approaches use JavaScript. A script watches the page, for example with the IntersectionObserver feature, and swaps in the real image address when it nears the screen. This gives more control, such as how early to start loading, but it adds code and it fails to load images if the script fails. If you use a script, keep a fallback for visitors without JavaScript.

Does lazy loading affect SEO?

It can, depending on how it is built. Google's documentation says lazy loading should load all relevant content whenever it is visible in the viewport. It names three methods that work: the browser's built-in lazy loading for images and frames, IntersectionObserver with a fallback, and JavaScript libraries that load content when it enters the viewport. These work because they do not depend on a visitor scrolling or clicking, and Google Search does not interact with a page.

The risk is content that only appears after an action. Google's documentation says that Googlebot does not swipe, click or type, so images that load only after a button press, or only on a scroll event, may never be seen, indexed or shown in image search. The documentation also advises against lazy loading content that is likely to be visible straight away, because it slows how quickly that content appears.

For long lists that load more as you scroll, Google recommends giving each section its own address, such as a numbered page, so the content can be reached without scrolling. To check your own pages, use the URL Inspection tool in Search Console and look at the rendered HTML. If the image addresses appear in it, the setup is working. Check the current documentation, because Google updates its guidance.

Long pages, anchors and layout

Lazy loading matters most on long pages, where most of the content sits below the fold. That includes a long single-page website, where almost everything is below the first screen. These pages also bring a problem. A menu link that jumps to a section far down can land the visitor among images that have not loaded and have no reserved size. The page then shifts as the images arrive. Reserved dimensions solve most of it, and testing the anchor links solves the rest.

Fill the space while an image waits. A plain box with a background colour close to the picture, or a very small blurred preview, looks better than a white gap. Do not use lazy loading on text itself, since text is the content visitors and search engines come for.

Accessibility, caching and templates

Deferred images still need descriptions. Write alt text as for any other image, mark purely decorative images so screen readers skip them, and check that focus order does not break when content appears. The website accessibility checklist covers the rest.

Lazy loading and caching do different jobs. Lazy loading reduces what a visitor downloads on the first visit by skipping what is not needed yet. Caching stores files the browser or a server has already fetched, so repeat visits are quicker, as website caching explained describes. They work well together.

Templates need a rule. On a page generated by software, such as a product list, the code decides which items get the attribute. A good default is to load the first row normally and defer the rest. A static or dynamic website can do this, but a dynamic one must apply the rule in the template, not item by item by hand.

How to test it

Do these checks after you add lazy loading, and again after any redesign.

1. Run PageSpeed Insights or Lighthouse on the page and look for a warning that the main image was lazy-loaded.
2. Open the page on a phone, or with a simulated slow connection, and scroll at a normal pace. Watch for empty gaps or jumps.
3. Click every menu link that jumps down the page.
4. Inspect the page in Search Console and check that image addresses appear in the rendered HTML.
5. Check that every image still has its description and size.

If you want help auditing how a site loads images and video, Liftup Technologies' website development service is one place to start.

Related guides

• One page vs multi page website
• Website accessibility checklist and why it matters
• Website development process stages and who does what
• Website caching explained
• Static Website vs Dynamic Website: Which Suits You?
• Website images how to size and compress

Questions and answers

What is lazy loading?

It is a technique where the browser waits to download an image, video or frame until the visitor is about to see it. This lightens the first load of a long page. It is switched on with an attribute in the page's code or with a script.

Which images should not be lazy loaded?

Do not lazy load the main image, the logo or anything visible when the page first opens, on any device. Those images should load as soon as possible. Defer images that sit below the first screen, such as lower gallery items, article photos and footer images.

Does lazy loading affect SEO?

It does not harm SEO if content loads whenever it comes into view without a scroll event or a click. Google says it supports the built-in browser method and IntersectionObserver. Content that appears only after an action may not be seen, so test with the URL Inspection tool.

Does lazy loading work for video?

Yes, in different ways. A frame holding a video player can use the same attribute as an image. A video file can use a poster image and the preload setting, and some browsers support the attribute on it directly. Check current browser support for the version you rely on.

Can lazy loading cause layout shift?

Yes, if the browser does not know the image size before it loads. The content then jumps when the image arrives. Give each lazy image a width and height, or an aspect ratio in the styles, so the space is reserved in advance.