Lazy loading tells the browser to hold off downloading an image until the visitor is close to it, which is genuinely one of the cheapest performance improvements available. The failures come from applying it indiscriminately, and the most expensive one is deferring the large image at the top of the page, which delays the exact element the visitor is waiting on.

What it does and why it helps

A page with fifteen images normally requests all fifteen immediately, including the ten nobody will scroll far enough to see. Lazy loading defers those until the visitor approaches them.

On an image-heavy page this is substantial. Fewer requests compete for bandwidth at the moment the page is trying to appear, so the part the visitor is actually looking at arrives sooner. Modern browsers support it with a single attribute, which means it costs nothing to implement and requires no library.

That ease is also where the trouble starts, because an attribute this simple tends to get applied everywhere at once.

Mistake one: deferring the top image

The most common and by far the most costly.

The largest image in the opening view is usually what determines when the page feels ready. Marking it lazy tells the browser it is not urgent, so instead of being fetched immediately it waits for layout to be calculated first. The result is a measurably slower page that feels slower too, caused by an optimisation.

The rule is straightforward: nothing visible without scrolling should be lazy loaded. On most sites that means one or two images at the top of each page are marked eager and everything else is deferred. A blanket application to every image on the page is worse than doing nothing.

Mistake two: deferring everything, including the tiny things

Deferring a two-kilobyte icon saves two kilobytes and costs a separate deferred request later. For very small images the machinery outweighs the benefit.

Logos, icons, and small interface graphics are better loaded normally. Reserve deferral for photographs and anything substantial, which is where the weight actually sits.

Mistake three: no dimensions

An image that has not arrived yet occupies no space unless it has been told how much to reserve. When it does arrive, everything below it moves down.

This produces the behaviour where someone goes to tap a link and the page jumps, so they tap something else. Lazy loading makes it worse, because images arrive during scrolling rather than all at the start. Every image needs width and height attributes, or a reserved aspect ratio, so the space is held before the picture exists. This is not optional alongside lazy loading; it is the other half of the same job.

Mistake four: doing it with JavaScript unnecessarily

Before browsers supported this natively, it required a script. Many sites still carry that script, often through a plugin.

The script-based approach means images depend on JavaScript running successfully. If it fails, or runs late, images do not appear at all. It also adds weight in the name of reducing weight. Where the native attribute covers the requirement, which is almost always, the script is a dependency worth removing.

Mistake five: a trigger distance set too tight

Loading an image at the exact moment it enters the viewport is too late. A visitor scrolling quickly on a phone outruns the loading and sees a column of blank rectangles filling in behind them.

Browsers handle this sensibly by default, beginning the fetch some distance before the image is needed. Script-based implementations frequently do not, and a tight trigger is the reason a page can feel worse after lazy loading was added.

Mistake six: leaving the heavy embeds alone

Attention goes to images while the largest single item on the page is often an embedded map or video, each of which can outweigh every photograph combined.

These can be deferred with the same attribute, and better still replaced with a lightweight stand-in: a static map image or a video poster frame that loads the real thing when clicked. That approach removes the cost entirely for the majority of visitors who never interact with either, and it is discussed further in the cost of third-party scripts.

How to check yours

Open the page and look at the top image first. If it is marked for lazy loading, that is the fix worth making before anything else. Then confirm every image has explicit dimensions, check whether a plugin is doing this with JavaScript when the browser would do it for free, and see whether maps and videos are being deferred at all.

Four checks, and they cover the failures that turn a genuine improvement into a page that performs worse than it did before, which is the specific and slightly unfair way this particular optimisation tends to go wrong.

Frequently asked questions

What is lazy loading?

Telling the browser to delay downloading an image or embed until the visitor is close to it, so the page can render the visible part first without competing for bandwidth with content nobody has scrolled to yet.

Should I lazy load all images?

No. Anything visible without scrolling should load normally, particularly the large image at the top of the page. Deferring that element delays the exact thing that determines when the page feels ready.

Does lazy loading hurt SEO?

Not when done with the native browser attribute. Script-based approaches can be a problem if images only appear after JavaScript runs, since that makes them dependent on something that may not execute.

Why does my page jump around while I scroll?

Images arriving without reserved space. Every image needs explicit width and height, or a set aspect ratio, so the layout holds the space before the picture exists. This matters more once lazy loading is in use, not less.

Do I need a plugin for lazy loading?

Almost never. Browsers support it with a single attribute, which is lighter and more reliable than a script. A plugin doing this is usually adding weight to save weight.

Should videos and maps be lazy loaded?

Yes, and better still replaced with a lightweight stand-in such as a static map image or a video poster frame that loads the real thing on click. These are frequently heavier than every image on the page combined.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Applied lazy loading and the site got slower?

We will check what is being deferred, fix the images that should never have been, and reserve the space so nothing jumps.

Start a Conversation