TL;DR: Lazy loading delays non-critical resources, such as below-the-fold images and iframes, until they are closer to the user’s viewport. It can reduce unnecessary initial downloads and improve page performance, but images visible on initial load, especially the LCP image, should not be lazy-loaded.
Lazy loading is a website performance technique that can help pages load faster by delaying non-critical resources, such as below-the-fold images and embedded videos, until they are closer to the user’s viewport. This reduces unnecessary downloads during the initial page load and allows the browser to prioritize content visitors need to see first.
For example, on an online store with a long product listing, lazy loading can defer images farther down the page until visitors scroll toward them. This can improve loading efficiency, especially on media-heavy pages, although the results depend on the page layout, resource sizes, and network conditions.
However, lazy loading does not improve every page in every situation. Images visible as soon as a page opens, particularly the main image that affects Largest Contentful Paint (LCP), should generally load eagerly. Delaying these images can make the page appear slower.
In this guide, you’ll learn how lazy loading works, when to use it, how to implement it in HTML, and how it affects website performance, SEO, and Core Web Vitals.
What Is Lazy Loading?
The browser determines when to fetch a deferred resource based on its proximity to the viewport and its own loading behavior. This means an image may begin loading before it becomes visible, helping it appear as a visitor scrolls toward it.
For example, a blog post containing 30 images does not necessarily need every image downloaded as soon as the page opens. Images farther down the page can be deferred while the browser prioritizes content near the top.
The performance benefit depends on the page layout, image sizes, network conditions, and other resources competing for bandwidth.
Lazy loading is one part of website performance optimization. It is most useful for suitable non-critical resources, while images visible on initial load, especially the main LCP image, should generally load eagerly.
Why Does Lazy Loading Matter?
Lazy loading can improve the way a page loads by delaying resources that users do not need immediately. Its benefits are most noticeable on pages containing many images, embedded videos, or other resources farther down the page.
1. Faster Initial Page Loading
When a page contains many images, downloading all of them immediately can compete with resources needed to display the initial content. Lazy loading allows suitable off-screen images to be deferred until they are closer to the viewport.
For example, an online store with a long product collection can load images near the top first and defer images farther down the listing. This can reduce unnecessary initial downloads and help prioritize the content visitors see first.
The improvement depends on the number and size of resources, the page layout, and how the browser prioritizes downloads. Lazy loading alone does not guarantee a specific reduction in load time.
2. Better Performance on Mobile Devices
Mobile users may have slower or less reliable network connections, and media-heavy pages can require substantial data to load. Lazy loading can reduce the amount of image and iframe content that needs to be downloaded immediately.
This is especially useful for long articles, product listings, and image galleries. However, images visible when the page opens should still load promptly. Test both mobile and desktop layouts because the content visible initially can differ between screen sizes.
3. Support for Core Web Vitals and SEO
Lazy loading can support website performance when it reduces unnecessary downloads without delaying important content. For example, deferring images below the initial viewport may help the browser prioritize resources needed to display the page.
However, lazy loading does not automatically improve Core Web Vitals or search rankings. Delaying the main image responsible for Largest Contentful Paint (LCP) can make loading performance worse.
4. A Better User Experience
Visitors should be able to see the main content without waiting for every image or embedded resource on the page to download. Lazy loading can help prioritize that content while allowing resources farther down the page to load when needed.
For example, readers can start reading an article while images lower on the page are deferred. Similarly, shoppers can browse the first products in a collection while images farther down the listing load as they approach the viewport.
The goal is to balance efficient loading with a smooth browsing experience. If resources load too late or appear only after a noticeable delay, the implementation may need adjustment.
How to Implement Lazy Loading on Your Website
The simplest way to implement lazy loading for images and iframes is to use the native HTML loading="lazy" attribute. Most modern browsers support it, so you often do not need to write custom JavaScript.
1. Use the HTML Loading Attribute for Images
Add loading="lazy" to images that are initially outside the visible area of the page. For example:
In this example, loading="lazy" tells the browser to defer fetching the image until it is closer to the viewport. The src attribute specifies the image location, while alt provides alternative text. The width and height attributes help the browser reserve space for the image before it loads.
Important: Do not automatically apply lazy loading to every image. Images visible when the page first opens, especially the main image responsible for Largest Contentful Paint (LCP), should generally load eagerly. Delaying that image can make the page appear slower.
2. Lazy-Load Suitable Embedded Content
The same native HTML attribute can be used for suitable iframes, such as embedded videos or other content located farther down the page.
For example:
Replace the example URL with the actual URL of your embedded content. The loading="lazy" attribute allows the browser to defer loading the iframe until it approaches the viewport.
This can be particularly useful when a page contains several embedded videos, maps, or other third-party content. Test the result to make sure the embedded content loads when visitors need it.
3. Check Your Website’s Existing Settings
Before adding lazy loading manually, check whether your website platform, theme, or existing optimization tool already supports it. Adding another implementation without checking the current setup may be unnecessary or cause conflicts.
If you use a content management system or ecommerce platform, review how it handles images and embedded content across important page templates. Pay particular attention to product pages, collection pages, and long articles.
4. Combine Lazy Loading With Other Performance Optimizations
Lazy loading addresses when selected resources are downloaded. Other optimizations address different performance problems.
For example, reducing the size of oversized images can reduce the amount of data transferred. Deferring non-critical JavaScript can reduce competition for browser resources, while optimizing CSS can help the browser display important content sooner.
Lazy loading and image optimization address two different aspects of website performance. Lazy loading controls when an image is requested, while image compression and resizing reduce the amount of data that needs to be transferred. For websites with large image libraries, Image Optimizer Pro can help compress and resize images in bulk and automatically optimize new uploads. These techniques can complement lazy loading, particularly on image-heavy product pages and galleries.
These techniques can complement lazy loading, but they are not the same thing. Test each change separately when possible so you can identify what actually improves performance.
What Should and Shouldn’t Be Lazy-Loaded?
Lazy loading works best when it delays resources that are not needed immediately while allowing critical content to load promptly. The right approach depends on what appears in the initial viewport and how the page is structured.
| Resource | Recommended approach |
|---|---|
| Images farther down a page | Generally lazy-load |
| Product images lower in a collection listing | Generally lazy-load |
| Embedded videos and iframes below the fold | Consider native lazy loading |
| Main hero image visible when the page opens | Generally load eagerly |
| Image responsible for LCP | Avoid lazy loading |
| Critical CSS needed to render the initial page | Prioritize rather than defer indiscriminately |
Why You Shouldn’t Lazy-Load Every Image
An image that appears below the fold on a desktop screen may be visible immediately on a mobile device. Similarly, a large hero image may be the main element visitors see when a page opens.
If that image is lazy-loaded, the browser may wait longer to request it, delaying Largest Contentful Paint (LCP). This can make the page feel slower even though other resources are being deferred.
The better approach is to identify which resources are necessary for the initial view and which can wait. Test important page templates on both mobile and desktop devices before applying the same settings across an entire website.
Lazy loading should help the browser prioritize the right content, not simply reduce the number of resources loaded at the beginning.
Example: How Lazy Loading Helps an Online Store
Imagine an online store selling handmade crafts. Its collection page displays dozens of product images, and some of them are large enough to require significant downloads.
Without appropriate lazy loading, the browser may request many images before visitors need them. With lazy loading, images farther down the collection can be deferred while the browser prioritizes the products visible near the top.
As shoppers scroll, the browser can fetch additional images as they approach the viewport. This reduces unnecessary initial downloads and can help prioritize visible content.
The actual improvement depends on image sizes, the number of products, network conditions, and other resources on the page. For the best results, combine lazy loading with appropriate image dimensions, efficient image formats, and careful management of JavaScript and third-party resources.
The goal is to help shoppers see the products they need without making them wait for every resource on the page to load.
Can You Automate Lazy Loading?
Yes. Depending on the platform, theme, and existing settings, lazy loading may already be available or can be enabled through a website optimization tool. This can reduce the need to edit individual image elements manually.
Website Speedy helps automate supported website performance optimizations, including lazy loading and reducing render-blocking resources. It can be useful for website owners who want to improve performance without manually editing code.
Customer Olivier Kameni shared his experience in a five-star Trustpilot review, reporting that his website performance consistently scored above 90 on GTmetrix and Google PageSpeed Insights after working with Website Speedy. He also praised the team’s professionalism and responsiveness.
However, automation does not remove the need to test the result. Check important page templates to confirm that images visible on initial load are not unnecessarily delayed, embedded content loads when needed, and the changes improve real performance measurements.
Lazy loading is one part of a broader optimization process. Depending on the website, additional improvements to image sizes, CSS, JavaScript, or third-party scripts may also be necessary.
How to Test Whether Lazy Loading Works
After implementing lazy loading, check that it delays the right resources without hiding content or slowing the main image.
1. Inspect the HTML
Open the page in your browser and inspect suitable images and iframes. Confirm that elements intended for lazy loading have the loading="lazy" attribute when native lazy loading is being used.
2. Check Network Requests
Open your browser’s developer tools and use the Network panel to observe image and iframe requests. Reload the page and scroll through it to see when resources are requested.
Remember that browsers control when lazy-loaded resources are fetched. The exact timing can vary, so a resource does not necessarily wait until it is fully visible.
3. Check Search Engine Visibility
Use the URL Inspection tool in Google Search Console to inspect how Google sees the rendered page. Confirm that important content and resource URLs are discoverable and that the page does not depend on a user clicking or scrolling to make essential content available. Follow Google’s guidance on fixing lazy-loaded content to help ensure that relevant content can be crawled and indexed.
4. Compare Performance Before and After
Test the same URL before and after making changes under comparable conditions. Review loading performance, including LCP, as well as INP and CLS.
Where available, use real-user Core Web Vitals data to understand how visitors experience the page over time. Laboratory tests can help diagnose individual problems, but a single test does not represent every visitor’s experience.
5. Test Mobile and Desktop Layouts
Check product pages, collection pages, and long articles on different screen sizes. The same image may appear above the fold on one device and below it on another.
If important images appear late, content is missing, or LCP becomes worse, review which resources are being deferred and adjust the implementation.
Final Thoughts
Lazy loading helps websites defer non-critical resources until they are closer to the user’s viewport. When implemented correctly, it can reduce unnecessary initial downloads and help the browser prioritize visible content.
The key is to lazy-load suitable off-screen images and embedded content without delaying important resources, especially the main image responsible for LCP. Test the changes on mobile and desktop, check that search engines can discover important content, and review performance measurements after implementation.
If you want to reduce manual work, Website Speedy can help automate supported website performance optimizations. The best results still depend on identifying the issues affecting your website and checking that each change improves the user experience.
FAQs
What is lazy loading in simple terms?
Lazy loading is a technique that delays loading non-critical resources, such as images and iframes, until they are closer to the user's viewport. This allows the browser to prioritize the content needed first instead of downloading every resource immediately.
Does lazy loading improve website speed?
Lazy loading can improve initial loading performance by reducing unnecessary resource downloads. The actual improvement depends on which resources are deferred, their size, and how the page is implemented.
Does lazy loading improve SEO?
Lazy loading can support website performance, but it does not guarantee better search rankings. It must be implemented correctly so search engines can discover important content. Avoid lazy-loading images responsible for LCP, as doing so can delay loading performance.
Can lazy loading hurt Core Web Vitals?
Yes. Lazy-loading the main image visible when a page opens can delay Largest Contentful Paint (LCP). Poorly managed image dimensions can also contribute to layout shifts. Lazy loading should prioritize non-critical resources without delaying important content.
Should all website images use lazy loading?
No. Images farther down the page are generally suitable for lazy loading, while images visible immediately, especially the main LCP image, should generally load eagerly. The correct approach depends on the page layout and the device being used.
How do I know whether lazy loading is working?
Inspect the page's HTML and network requests using browser developer tools. You can also use Google Search Console's URL Inspection tool to check whether important content is discoverable. Compare performance before and after implementation to see whether the changes help.
About the Author
