Lazy loading explained: why images load as you scroll
Lazy loading delays fetching offscreen images until a visitor scrolls near them, so the initial page load only fetches what's actually visible. It's built into modern browsers with a single HTML attribute, but applying it to your hero image or other above-the-fold content actively slows down perceived load time and can hurt your largest contentful paint score.
You've almost certainly seen this without naming it: you scroll down a long page and images further down seem to load in a beat after the ones above them. That's lazy loading. Instead of a page fetching every image on it the moment you land, images below the visible area are held back until you actually scroll close enough to need them.
It sounds like a minor trick, but for a page with a long gallery, a big product grid, or a lot of content, it's one of the more meaningful speed techniques available, and it costs nothing to implement on a modern template.
Why delaying offscreen images helps
A page loading twenty images at once, when a visitor can only see three of them, is wasting bandwidth and competing for the same connection your visible content needs. Lazy loading fetches only what's in or near the viewport first, letting the visible part of the page render faster, and then quietly fetches the rest in the background as the visitor scrolls toward it. By the time they reach an image lower on the page, it's usually already loaded or loads within a fraction of a second.
Only visible images load immediately; the rest load as the visitor scrolls toward them.
How it actually works
There used to be a real technical lift here, involving JavaScript libraries that watched scroll position and swapped in image sources manually. That's mostly gone now. Every current browser supports a native HTML attribute, loading="lazy", added directly to an image tag. The browser handles all the detection and timing itself. No library, no extra script, no performance cost from the loading mechanism.
If you're working from a well-built modern template, this attribute is very likely already applied to images throughout the page, particularly in galleries, blog post grids, and anything below the main hero area. You may never need to touch it directly.
The one mistake that undoes the benefit
This is a genuinely common mistake, often introduced by copying a lazy-loading pattern across every image tag on a page indiscriminately, hero image included, without thinking about which ones are actually offscreen at first paint. The fix is simple once you know to look for it: your hero image and anything else visible without scrolling should load immediately, with no lazy attribute at all, or in some cases explicitly marked as high priority instead.
| Image | Lazy load? | Why |
|---|---|---|
| Hero image / top banner | No | Visible immediately, should load as fast as possible |
| Logo in header | No | Tiny file, visible immediately, not worth delaying |
| Gallery images below the fold | Yes | Not visible until the visitor scrolls |
| Blog post thumbnails further down a list | Yes | Same reasoning, load on demand |
| Footer images or icons | Yes | Almost never seen without scrolling |
How to check your own site
Open your homepage, right-click the hero image, and view the page source or inspect the element. Look at the image tag. If you see loading="lazy" on that specific image, remove it. Everything else further down the page benefiting from lazy loading can stay exactly as it is. This is a two-minute check that's worth doing once on any template you've customized yourself, since copy-pasted sections sometimes carry the attribute along without anyone noticing.
- ✓Lazy loading delays offscreen images until a visitor scrolls near them.
- ✓It's built into modern browsers via a single HTML attribute, no library needed.
- ✓It reduces how much a page has to fetch on initial load, especially on long pages.
- ✓Never apply it to your hero image or anything visible without scrolling.
- ✓Check your hero image's tag directly if you're unsure whether this mistake is present.