Websites and Tech

Lazy Loading

Also called Deferred loading, lazy load

A technique that delays images or videos until a visitor scrolls near them, lightening the first load.

Quick facts: Lazy Loading

Category
Websites and Tech
Also called
Deferred loading, lazy load
Level
Intermediate
Affects
First screen speed, mobile data use, layout stability, image indexing
Where to see it
Browser developer tools, PageSpeed Insights, Search Console URL Inspection, your theme settings
In this article4
  1. How lazy loading works
  2. Why lazy loading matters
  3. Common mistakes with lazy loading
  4. How to act on it

How lazy loading works

By default a browser tries to fetch everything a page references, whether or not the visitor will ever scroll far enough to see it. On a long page with many pictures, that means competing downloads for content sitting well below the screen. Lazy loading changes the order: images and embeds further down are left alone until the visitor approaches them, at which point they are fetched.

Browsers now support this natively through a loading attribute on images and iframes, which needs no scripts and behaves predictably. Older implementations use JavaScript to watch the scroll position and swap a placeholder for the real file, which still appears in many themes and plugins. Video embeds deserve particular attention, because an embedded player often pulls in a large amount of third-party code before anyone presses play; deferring that until a click removes weight the visitor may never need.

Why lazy loading matters

The first screen is where a visitor decides whether to stay, and it competes for bandwidth with everything else the page has asked for. Removing that competition means the top of the page becomes usable sooner without deleting anything or making the page shorter.

The saving is largest exactly where it counts most: long service pages, blog articles, galleries and category listings, viewed on a phone. In Nepal, where most sessions are mobile and often on paid data, not downloading pictures the visitor never scrolls to is a courtesy as well as a speed gain. It also lightens your own bandwidth, since files are only served when they are genuinely wanted.

Common mistakes with lazy loading

The one that does real damage is lazy loading the top of the page. If the hero image or logo is deferred, the browser deliberately delays the very thing the visitor is waiting on, and the page measures worse than it did before the optimisation. Anything visible without scrolling should load eagerly.

Second, deferred images without reserved space make the layout jump. Each picture arriving pushes text down, and someone reading or about to tap a button loses their place. Stating width and height, or a fixed aspect ratio, keeps the space held open. Third, script-based approaches can hide content from crawlers that never scroll, so the image is effectively absent for search — a real risk for product photographs and for anything loaded through infinite scrolling, where the content further down may never be reachable by a link at all.

How to act on it

Use the browser’s native attribute where you can, and check what your theme or plugins are already doing before adding another layer; two systems deferring the same images is a familiar cause of pictures that never appear. Mark everything above the fold as eager, and let the rest default to deferred.

Always pair it with reserved dimensions so nothing shifts, and with sensible image compression, since delaying a heavy file only postpones the wait. Test by scrolling a real page on a phone rather than trusting a score, and confirm that important images still appear in Google’s rendered view of the page. If a listing relies on infinite scrolling, give it paginated links as well so both visitors and crawlers can reach everything. Lazy loading is one straightforward part of improving page speed, not a substitute for lighter pages.

Do and do not

Do

  • Load everything above the fold eagerly
  • Reserve space with width and height on images
  • Prefer the browser's native attribute over scripts

Do not

  • Defer the hero image or logo
  • Run two lazy loading systems at the same time
  • Rely on infinite scrolling with no paginated links

Questions people ask about this

Does lazy loading hurt SEO?

Not when it is implemented properly. Native browser lazy loading is understood by search engines, and deferred images below the fold are still discovered. Problems arise with script-based approaches that only load images on a real scroll, and with infinite scrolling that has no paginated links, because a crawler may never reach that content at all.

Should I lazy load my hero image?

No. The large image at the top of a page is usually the element the browser is judged on for loading speed, and deferring it delays the moment the page looks ready. Load anything visible without scrolling immediately, and defer only what sits below. Many plugins get this wrong by applying the setting to every image on the page.

Why do some images never appear on my site?

Two causes are common. Either two lazy loading systems are running at once, each waiting for the other to swap the file in, or a script-based loader is failing on that browser and leaving the placeholder behind. Turn off one layer and test again. Native browser lazy loading avoids most of this because it needs no script at all.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.