What is lazy loading and how does it work?

Not every image on a page needs to load at the same time. Lazy loading images delays the download of images that are not yet visible in the visitor's viewport, so the browser focuses on content the visitor can actually see rather than loading the entire page at once. For pages with many images, this change alone can significantly reduce initial load time and improve the metrics that matter for both visitor experience and search rankings. This article explains what lazy loading is, how it works technically, what should and should not be lazy loaded, and how it affects Core Web Vitals scores.

When a browser loads a page without lazy loading, it downloads every image on the page regardless of whether any of them are visible yet. A visitor who opens a page and immediately bounces still triggers the download of every image below the fold. That is wasted bandwidth, and it slows down the loading of everything above the fold that the visitor actually sees. Lazy loading changes this so that only the content currently in view is downloaded. For context on how this fits into the broader picture of page loading speed, see the article on how to reduce your website loading time.

What is lazy loading?

Lazy loading is a technique that defers the loading of non-critical resources until they are needed. In the context of images, it means an image is not downloaded until the visitor scrolls close to it. Instead of the browser requesting every image on page load, it only requests the images that are visible or about to become visible as the visitor interacts with the page.

What lazy loading changes about the loading sequence

• Without lazy loading: the browser requests all images when the page first loads, regardless of whether they are in the viewport
• With lazy loading: the browser only requests images that are in or near the current viewport. The rest are requested as the visitor scrolls toward them
• The total amount of data transferred over the course of a full page scroll is the same, but the initial load is significantly lighter
• Visitors who do not scroll past a certain point on a page never trigger the download of images they never reach

How does lazy loading work technically?

There are two ways to implement lazy loading for images: the native browser attribute and JavaScript-based solutions.

Native lazy loading

• All major browsers support native lazy loading through the loading="lazy" attribute added directly to the image tag
• No JavaScript or external libraries are required. The browser handles the loading behavior natively
• This is now the standard approach for lazy loading images on the web and requires minimal technical knowledge to implement
• The browser determines when to begin loading an image based on its distance from the viewport, a threshold that varies slightly between browsers

JavaScript-based lazy loading

• Before native lazy loading was widely supported, developers used JavaScript libraries that monitored scroll position and triggered image loads as images entered the viewport
• The Intersection Observer API is the standard JavaScript approach, detecting when an element enters or exits the viewport without relying on scroll event listeners
• JavaScript-based lazy loading is still used for more complex scenarios, such as lazy loading background images set in CSS or video content
• For standard image elements, native lazy loading with loading="lazy" is simpler and more reliable

What can be lazy loaded besides images?

Iframes

• The loading="lazy" attribute also works on iframes in all major browsers
• Embedded maps, forms, and third-party content in iframes can be deferred until the visitor scrolls to them
• This is particularly useful for pages with embedded maps or third-party widgets near the bottom of the page, as these often involve heavy external scripts

Video

• Video files are significantly larger than images and can have a major impact on initial load time when placed below the fold
• Lazy loading video requires a JavaScript approach, since the native loading attribute does not apply to video elements
• A common approach is to load only a thumbnail or poster image initially and begin loading the video file only when the visitor interacts with it or scrolls to it

Components and sections

• In JavaScript-heavy applications, entire page sections or components can be lazy loaded, meaning their code and content are not fetched until the visitor reaches that part of the page
• This is an advanced technique used in complex web applications and is typically handled by the framework rather than implemented manually

What should not be lazy loaded?

Lazy loading improves performance when applied correctly, but applying it in the wrong place causes problems rather than fixing them.

Above-the-fold images

• The hero image, logo, or any prominent visual content visible when the page first opens must load immediately
• Applying lazy loading to above-the-fold images delays LCP, which worsens Core Web Vitals scores and visitor experience
• The rule is straightforward: anything visible without scrolling should load immediately. Everything below the fold can be lazy loaded

Images close to the fold

• Images just below the visible area may appear quickly when the visitor begins scrolling. If lazy loading is applied too aggressively, these images can still be loading when the visitor reaches them, causing a blank placeholder to be visible briefly
• Native lazy loading handles this by using a threshold, beginning to load images before they are fully in the viewport rather than waiting until the last moment

Critical content on fast-loading pages

• On pages with very little content and only a few images, the loading sequence is already fast. Lazy loading adds complexity without meaningful benefit in these cases
• Lazy loading is most valuable on pages with many images or long scrollable content

How does lazy loading affect Core Web Vitals?

Lazy loading has a direct effect on two Core Web Vitals metrics and no effect on the third when applied correctly.

Largest Contentful Paint (LCP)

• Lazy loading should never be applied to the element that is likely to be the LCP candidate, typically the hero image
• When applied correctly, lazy loading reduces the number of resources competing for bandwidth during initial load, which can improve LCP by allowing the above-the-fold content to load faster
• Applied incorrectly to above-the-fold images, lazy loading directly worsens LCP by delaying the largest visible element

Interaction to Next Paint (INP)

• Reducing the number of images loaded initially means less network activity competing with JavaScript execution during the critical loading window
• This can indirectly reduce main thread blocking and improve INP scores on pages that were previously loading many images simultaneously

Cumulative Layout Shift (CLS)

• Lazy loading does not affect CLS directly, but lazy-loaded images without defined width and height attributes can cause layout shifts when they load
• Always set explicit dimensions on lazy-loaded images so the browser reserves the correct space before the image loads

For a full breakdown of how LCP, INP, and CLS are scored and what the thresholds are, see the article on what Core Web Vitals are.

Does lazy loading affect SEO?

When implemented correctly, lazy loading does not harm SEO and can contribute to better search performance through improved page speed scores.

How search engines handle lazy-loaded content

• Search engine crawlers render pages similarly to browsers and can index content that is lazy loaded
• Images that are lazy loaded are still crawlable and can appear in image search results
• The SEO benefit comes primarily from the speed improvements that lazy loading enables. Pages with better Core Web Vitals scores, which lazy loading can help improve, have a ranking advantage

Alt text still applies

• Lazy-loaded images require the same alt text as any other image. The alt attribute should be filled with a description of the image regardless of whether it is lazy loaded
• For guidance on writing effective alt text, see the article on how to use images on your website

How do you add lazy loading to your website?

For individual images in HTML

• Add loading="lazy" to any image tag that is below the fold
• Ensure every lazy-loaded image has explicit width and height attributes to prevent layout shifts as images load
• Do not add loading="lazy" to the hero image or any image visible without scrolling

Through your website platform

• Many website builders apply lazy loading automatically to below-the-fold images without requiring any manual implementation
• Check your platform's performance documentation to confirm whether this is handled automatically before adding it manually

For a complete guide to optimizing images beyond lazy loading, including file formats, compression, and responsive sizing, see the article on how to optimize images for faster loading.

How WEMASY handles lazy loading

WEMASY's website builder applies lazy loading automatically to below-the-fold images across all pages. Above-the-fold images, including hero images and any content visible without scrolling, are excluded from lazy loading so they render immediately. Images are also served with defined dimensions by default, which prevents layout shifts when lazy-loaded images load into position.

Lazy loading works alongside image compression and CDN delivery on every WEMASY plan. These three improvements together reduce both initial page weight and delivery time for images, which directly contributes to faster LCP and better Core Web Vitals scores in the analytics dashboard.

See what is included at the WEMASY website builder, or review plan options on the pricing page.

Frequently asked questions