What is lazy loading?
Lazy loading means deferring the loading of page elements until they enter (or are about to enter) the viewport. Think of images, videos, iframes, or even JavaScript.
Without lazy loading, everything loads all at once — even content your visitors may never see. That slows things down and wastes resources.
Lazy loading is a smarter approach. It loads what is visible first, and only fetches the rest when needed.
Why is it faster?
- Less data upfront: The browser has less to process initially
- Faster visual rendering: Above-the-fold content appears sooner
- Better on mobile: Especially with slow connections or small screens
- Lower memory usage: Useful for long pages or infinite scroll
How does it work technically?
In HTML, you can use the "loading="lazy"" attribute on images or iframes. For JavaScript components, developers often use "IntersectionObserver", an API that checks when elements come into view.
Modern frameworks like Astro, React, or Vue offer built-in support or libraries to make lazy loading easier.
When to use it — and when not to
Use lazy loading for:
- Images below the fold
- Heavy media like videos or embeds
- Infinite scroll content or long-form pages
Avoid lazy loading for:
- Hero images or top-of-page content
- Key SEO or accessibility-critical elements
What’s the benefit?
Lazy loading is a simple way to make your site faster and more efficient. Especially on mobile or slow networks, users will notice a clear improvement.
To do it right, consider fallbacks, accessibility, and SEO impact.
Want to optimise performance on your site? Let’s talk.