Lazy loading is a technique that waits to load parts of a page, usually images, videos and embedded iframes, until a visitor scrolls near them. Instead of downloading everything up front, the browser fetches what's needed for the first screen and loads the rest on demand.
For businesses, lazy loading is a cheap way to make pages faster, especially image-heavy ones like product listings and long blog posts. But it has two well-known traps: lazy-loading the main image at the top of the page, which slows it down, and lazy-loading content in ways search engines can't trigger, which can keep it out of search.
What is lazy loading?
Lazy loading defers non-critical resources until they're needed. Today, the simplest form is built into browsers. Adding loading="lazy" to an image or iframe tells the browser to "defer loading of the resource until it reaches a calculated distance from the viewport," according to web.dev's guide to browser-level lazy loading. Chrome, Edge, Firefox and Safari all support it for images, and current versions support it for iframes too.
Before native support, sites relied on JavaScript libraries or the IntersectionObserver API to detect when an element entered the screen. Those methods are still common, especially for loading whole blocks of content rather than single images.
Why lazy loading matters
It cuts wasted downloads. Plenty of visitors never scroll to the bottom of a page. Lazy loading means they don't download images they never see, which saves bandwidth and frees the browser to focus on what's on screen. It's one of the simpler wins for page speed.
It can hurt your main image. web.dev's guide to optimizing LCP is blunt: "Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay." The hero image is often the Largest Contentful Paint element, so lazy-loading it can push a Core Web Vital in the wrong direction.
It can hide content from Google. Google's guidance on fixing lazy-loaded content notes that "Google Search does not interact with your page." If content only loads after a scroll event or a click, Googlebot may never see it, and that content can't be indexed. For product photos and other visuals, that's a direct hit to image SEO.
How lazy loading works
Browser-level lazy loading
With loading="lazy", the browser decides when to start the download. Chrome's distance thresholds are fixed and can't be configured. web.dev says that since July 2020 they've been 1,250 pixels on fast connections and 2,500 pixels on slower ones. The default value, eager, loads the image right away, which is the same as leaving the attribute out.
JavaScript-based lazy loading
Scripts can watch for elements entering the viewport using IntersectionObserver and then load the real image or content. Google lists browser built-in lazy loading, the IntersectionObserver API and JavaScript libraries that load data when it enters the viewport as suitable methods. The problem is scripts that wait for user actions like scrolling or clicking.
Infinite scroll
Infinite scroll is lazy loading applied to whole lists. Google recommends giving each chunk its own persistent, unique URL, such as ?page=12, linking those URLs sequentially so search engines can find them, and updating the displayed URL with the History API as people scroll. Our entry on pagination goes deeper.
Best practices for lazy loading
- Load above-the-fold images normally. Google advises against adding lazy loading to content that is likely to be immediately visible. For the likely LCP image, web.dev also suggests fetchpriority="high".
- Lazy-load below-the-fold images and embeds. Product grids, long articles, video embeds and maps further down the page are good candidates.
- Always set width and height. web.dev recommends width and height attributes on all images so the browser can reserve space. Without them, lazy-loaded images can add to Cumulative Layout Shift.
- Keep real image URLs in src. Google recommends checking that image and video URLs appear in the src attributes of image and video elements in the rendered HTML.
- Test what Google sees. Use the URL Inspection tool in Search Console to confirm all content loaded in the rendered HTML.
- Check your CMS and theme defaults. Many platforms add lazy loading automatically. Make sure the first images on each template are excluded.
Common mistakes and misconceptions
"Lazy-load everything." Applying lazy loading to every image, including the hero, adds unnecessary delay to the most important image on the page.
"Google scrolls like a person." Google says Search doesn't interact with pages. Content that waits for a scroll or click event may never load for Googlebot.
"Lazy loading fixes a slow page." It reduces extra downloads, but it doesn't fix a slow server, oversized images or heavy scripts. It's one tool, not a cure.
"Placeholders are harmless." Some scripts put a tiny placeholder in src and swap in the real image later. Crawlers that don't run JavaScript may only ever see the placeholder. Native lazy loading avoids this, because the real URL stays in src.
Lazy loading vs. preloading
Lazy loading tells the browser to wait. Preloading tells it to fetch something early, before it would normally discover it. They work best together: preload or prioritize the few resources the first screen needs, like the hero image or a key font, and lazy-load what sits further down.
How Butter approaches lazy loading
At Butter, we treat page speed as part of a page's overall health, not a vanity score. We look at real-user data in Search Console first, then use lab tools to find the cause. Lazy loading settings fall into the same bucket as the other speed issues we flag and work through, like slow templates, render-blocking scripts and layout shifts.
On our GEO+SEO plan, technical SEO fixes and unlimited on-page optimization give us room to address issues like oversized hero images, layout shifts from embeds and heavy scripts on key templates. On the GEO plan, we include performance issues in our monthly on-page recommendations. Faster pages improve the experience for every visitor and can help in search, but we never promise rankings from speed work alone. You can see what's included on our SEO services page.
Frequently asked questions
Does lazy loading help SEO?
It can, indirectly, by making pages faster. But it has to be done carefully. Lazy-loading the main image can slow Largest Contentful Paint, and content that only loads after a scroll or click may never be seen by Google.
Should I lazy-load images above the fold?
No. Google advises against lazy-loading content that is likely to be visible right away, and web.dev says never to lazy-load the LCP image. Load those images normally and lazy-load images further down the page.
Can Google see lazy-loaded images?
Yes, if they load when they enter the viewport, using browser-level lazy loading, IntersectionObserver or a similar method. Problems arise when loading depends on user actions like scrolling or clicking, because Google Search does not interact with pages.
How do I add lazy loading to an image?
Add the attribute loading="lazy" to the image element, along with width and height attributes. This works in all major browsers without extra JavaScript.