What is lazy loading? How it works, benefits and pitfalls

Lazy loading is a technique that defers the loading of images, videos and iframes until they are about to enter the viewport. Instead of downloading everything at once, the browser first fetches what the visitor actually sees and only later the rest. The result is a page that becomes visible and usable faster. In this article you will read what lazy loading is exactly, how to switch it on and when it really pays off in B2B.

What is lazy loading exactly?

The average web page is full of imagery. Without lazy loading, your browser tries to download all of it in one go, including the photos at the very bottom that most visitors never reach. That costs bandwidth and time, and it slows down precisely the top of your page, where the first impression is made.

Lazy loading flips that order around. The browser first loads what is visible (the part “above the fold”) and defers the rest until the visitor scrolls down. That way you reduce the amount of data needed immediately and show your page faster.

This is one part of technical SEO, but the real goal is not to please Google. The goal is that visitors stay. Want to know what a faster, more findable site is worth? Take a look at our approach to SEO.

How does lazy loading work technically?

There are two ways to switch lazy loading on.

• Natively, via the loading attribute. You add loading="lazy" to an <img> or <iframe>. The browser handles the rest, without extra code. According to MDN, this defers loading until the element is about to enter the viewport. Every modern browser supports it.
• Via JavaScript. For background images or more complex cases you use the Intersection Observer API or an off-the-shelf library. More work, but more control.

For most B2B sites the native approach is more than enough. One attribute, no heavy scripts, and it works right away. One important detail: always give your images a fixed width and height, otherwise the page can jump around while loading and you ruin your Core Web Vitals.

Native versus JavaScript: which do you pick?

Both approaches solve the same problem, but they suit different situations. The table below helps you choose.

In practice we see that nine out of ten B2B sites do just fine with the native variant. Start there, and only move to JavaScript if you have a specific case the native attribute does not cover.

Why is lazy loading good for speed?

In B2B, speed is not a vanity number, it is a revenue factor. A slow page drives visitors away before they see your offer or your form. Lazy loading helps on three fronts:

• Faster first render. Less data up front means your page is visible and usable sooner.
• Less wasted bandwidth. Imagery nobody looks at does not get downloaded either.
• A better mobile experience. On slow connections and phones in particular, every saved kilobyte counts.

Want to combine this with lighter files? Then also read how to optimise images for SEO and how to make a slow site faster.

An example from practice

Think of a B2B reference page with twenty client logos, a few screenshots and an embedded video at the bottom. Without lazy loading, the browser pulls all of that in the moment the page opens, including the video most visitors never play. If you set everything below the fold to loading="lazy", the browser first fetches the heading and the first logos, and the rest only when the visitor scrolls. The page is measurably usable sooner, and the video only costs data if someone actually scrolls to it. Heavy, image-rich pages like these are exactly where the technique makes the difference.

The biggest pitfall: your most important image

This is where it often goes wrong. If you blindly set every image to lazy, including the large hero image at the top, you slow down the very element that determines your LCP score. Google uses Largest Contentful Paint to measure how fast your largest visible element appears, and lazy loading that image is counterproductive.

The rule is simple: only set imagery that is not immediately visible to loading="lazy". Your hero image and everything above the fold you load normally, or explicitly with loading="eager".

Other common mistakes

Besides lazy loading your hero, we see a few more recurring misses that undermine the effect.

• Not setting width and height. Without fixed dimensions the browser does not know how much space a deferred image will take up, so the page jumps while loading. That costs you points on CLS, another Core Web Vital.
• Seeing it as a silver bullet. Deferring does not make your files lighter. A photo of several megabytes stays heavy, even if it loads later. Always combine it with compression.
• Deferring everything, including small icons. For tiny images, lazy loading delivers nothing and only adds complexity. Save it for heavier imagery further down the page.
• Trusting without testing. After switching it on, check with Google Lighthouse whether your LCP score actually improved and did not quietly get worse.

Honestly: when it does (and does not) matter for B2B

We would rather say it up front. If you have a lean B2B site with little imagery and fast hosting, lazy loading is low-hanging fruit that may already be switched on in your CMS. In that case you are better off shifting your attention to content, authority and conversion, because that is where the revenue is.

Lazy loading only becomes truly valuable on heavy, image-rich pages: extensive case studies, product overviews or long landing pages. Steer on customers and revenue, not on a perfect speed score for the score’s own sake. An SEO audit shows whether this is worth the effort for your site at all.

Ready to make your site faster?

Tell us where your site is currently stuck on speed, and we will tell you honestly what does and does not pay off in your situation. We are a small team that moves fast, so you get concrete steps instead of a report that gathers dust.

Book your free intake.

Frequently asked questions about lazy loading

Is lazy loading good for SEO? Indirectly, yes. It makes your page faster, and speed is part of the Core Web Vitals and a ranking factor. More importantly: it keeps visitors around, and that generates leads.

Do I have to program lazy loading myself? Usually not. With the native loading="lazy" attribute it works without extra code, and many CMSes switch it on by default. You only need JavaScript for background images or special cases.

Which images should I not lazy load? Everything that is immediately in view, especially your hero image at the top. Lazy loading that one slows down your LCP score. Load visible imagery directly, and defer only the imagery further down.

Does lazy loading work in all browsers? Yes, all modern browsers support the native loading attribute for images. For iframes the coverage is slightly more limited, but older browsers simply ignore the attribute and load everything as usual.