Images make websites beautiful, but they also make them slow. A single page can easily carry several megabytes of pictures — hero banners, product photos, author avatars, in-article illustrations. The problem is that browsers, by default, try to download every one of those images the moment the page loads, even the ones sitting far below the fold where nobody will see them for minutes, if ever.
Lazy loading flips that behavior on its head. Instead of fetching every image up front, the browser only loads the images that are actually visible in the viewport. Everything else waits patiently until the visitor scrolls close to it. The result is a page that appears almost instantly, uses less bandwidth, and feels dramatically snappier — especially on mobile connections.
If you care about page speed — and you should, since it affects both rankings and conversions — lazy loading is one of the highest-impact, lowest-effort optimizations you can apply. In this guide we will break down exactly how lazy loading works, how to implement it in a few lines of code, and how to measure the improvement with a page speed checker.
Normal image loading is eager: the browser parses your HTML, finds every <img> tag, and starts downloading the image files right away. With dozens of images, those requests queue up, compete for bandwidth, and delay the moment the page becomes interactive.
Lazy loading changes the strategy. Images that are offscreen get a placeholder instead of a real source — either a tiny blank image, a low-resolution blur-up, or simply nothing at all. A small piece of JavaScript (or a native browser feature) watches the scroll position. When an image is about to enter the viewport, the real source is swapped in and the download begins.
Think of it like a restaurant that only starts cooking your main course when you finish the appetizer. Nothing is wasted, and everything arrives exactly when you need it.
The easiest way to lazy load today is the native HTML attribute that modern browsers support:
loading="lazy" to any <img> or <iframe> tag you want deferred.loading="eager" (or omit the attribute) for above-the-fold images like your logo and hero banner.width and height attributes so the page layout does not jump when images load in.For example, changing <img src="photo.jpg"> to <img src="photo.jpg" loading="lazy" width="800" height="600"> is often all it takes. Browsers that do not support the attribute simply ignore it and load the image normally, so there is no downside for older visitors.
Before native lazy loading existed, developers used the Intersection Observer API to detect when elements entered the viewport. Libraries like lazysizes popularized this approach. You might still need JavaScript if:
loading attribute does not apply to CSS backgrounds).For most sites in 2026, native lazy loading plus a tiny fallback is more than enough.
Google has used page speed as a ranking factor for years, and Core Web Vitals made it even more concrete. Two of the three vitals are directly affected by images:
Beyond SEO, speed directly affects revenue. Studies consistently show that each extra second of load time reduces conversions. Visitors on slow mobile connections are the first to bounce — and they are exactly the people lazy loading helps most.
Before optimizing, get a baseline. Run your page through a page speed checker and note the total page weight and the number of image requests. After implementing lazy loading, run it again and compare. You will often see the initial payload drop by 50 percent or more on image-heavy pages.
Lazy loading is powerful, but applying it blindly can backfire. The rule of thumb is simple: lazy load everything below the fold, never lazy load what is visible on first paint.
A common mistake is adding loading="lazy" to every image on the page, including the hero. That forces the most important image to wait, which is the opposite of what you want. Be selective.
Lazy loading controls when images download. Image optimization controls how big those downloads are. You need both for a truly fast site.
Before you even think about lazy loading, make sure your images are properly optimized:
srcset so mobile users get smaller files automatically.Once your images are lean, lazy loading multiplies the benefit: fewer bytes downloaded, and only when needed. For a deeper analysis of how your optimizations affect real-world loading, a PageSpeed insights checker can show you field data and specific opportunities.
Lazy loading is simple in theory, but there are a few traps that can undo your gains or even hurt SEO.
Without dimensions, the browser does not know how much space to reserve. When the image finally loads, content below it gets pushed down — a layout shift that tanks your CLS score. Always set width and height, or use CSS aspect-ratio boxes.
As mentioned earlier, never lazy load the hero image or LCP element. Some page builders add loading="lazy" to all images by default — audit your templates and remove it from above-the-fold images.
Googlebot renders pages and scrolls, so it generally discovers lazily loaded images. However, to be safe, make sure your images are discoverable: use standard <img> tags (not CSS backgrounds) for important images, include descriptive alt text, and consider adding key images to your sitemap.
Loading a 50 KB JavaScript library to lazy load images defeats the purpose. Native loading="lazy" costs zero bytes. Only reach for a library if you genuinely need its extra features.
Optimization without measurement is guessing. Here is a simple before-and-after workflow:
Typical results on image-heavy pages: 40–70 percent less initial page weight, one to two seconds faster LCP, and a noticeably snappier feel on mobile. Those are the kind of wins that move both rankings and revenue.
No — when done correctly, it helps. Googlebot renders JavaScript and scrolls pages, so it discovers lazily loaded images. Just use standard img tags with descriptive alt text, avoid lazy loading above-the-fold images, and make sure important images are not hidden behind interactions Google cannot trigger.
CSS background images do not support the loading attribute, so they require a JavaScript solution with Intersection Observer. Ask yourself whether the background is truly necessary — decorative backgrounds below the fold are good candidates, but critical hero backgrounds should load eagerly.
They are opposites. Lazy loading delays offscreen resources until needed, while preloading fetches critical resources earlier than the browser normally would. Use preloading for your hero image and key fonts, and lazy loading for everything below the fold. Together they give the browser perfect prioritization hints.
Yes — WordPress has added loading="lazy" to images by default since version 5.5. However, it does not always get it right: it may lazy load images that should be eager, and it does not handle background images or iframes from all plugins. Audit your pages and adjust where needed.
There is no fixed number — it depends on your layout. A good rule: count the images visible without scrolling on a typical desktop and mobile viewport. Those stay eager. Everything else gets loading="lazy". On a long article with 20 images, that often means 2–3 eager and 17–18 lazy.
Lazy loading is one of those rare optimizations that is easy to implement, impossible to get wrong when you follow the basic rules, and delivers immediate, measurable results. Start with your most image-heavy pages, add loading="lazy" to below-the-fold images, compress everything with an image compressor, and verify the gains with a page speed checker. Your visitors — and Google — will thank you.
