A long blog post might have twenty images on it. If the browser downloads all of them the moment the page opens, a visitor on a phone connection waits for pictures they may never scroll to. Lazy loading fixes that by loading images only when they’re about to appear.
What lazy loading means
Instead of fetching every image at once, the browser loads the ones at the top of the page first and holds off on the rest until the visitor scrolls near them. The result is less data downloaded up front, a faster first view and lower bandwidth use, which matters a lot for anyone on mobile data.
How to turn it on
Modern browsers support lazy loading natively with a single attribute. You don’t need a JavaScript library for it. Add loading="lazy" to the image tag:
<img src="garden-path.webp" alt="Stone path through a garden" width="1200" height="800" loading="lazy">That’s all there is to it. If you use WordPress, recent versions add this attribute to your images automatically, so you may already have it without doing anything. It’s worth checking your page source to be sure.
The mistake that hurts you: lazy loading the top image
Don’t lazy load the first big image a visitor sees, such as your hero banner or the main photo at the top of a post. That image is usually the largest element on the screen, and the time it takes to appear is measured by Google as part of page speed (Largest Contentful Paint). If you tell the browser to wait on it, you make that number worse, not better.
The rule: lazy load images below the fold, load images above the fold right away. For an important top image you can even tell the browser it’s a priority with fetchpriority="high".
Always set width and height
When an image loads late, it can push the text around as it appears, which is annoying and counts against you in layout stability measurements. Setting the width and height attributes lets the browser reserve the right amount of space ahead of time. We explain this fully in how to set image width and height in HTML.
Does lazy loading affect SEO?
Done correctly, it helps, because it speeds up your pages. Google’s crawler can handle native lazy loading. Trouble arises mainly with custom scripts that only load an image after a user action like clicking or scrolling in a way a crawler doesn’t mimic. Stick with the native attribute and you avoid that.
Lazy loading doesn’t replace optimization
It only controls when an image downloads, not how big it is. A 4 MB photo is still a 4 MB photo, just delivered a little later. Compress and resize first. Our guides on compressing images for a faster website and choosing the best image format cover the groundwork.
Quick checklist
- Add
loading="lazy"to images lower on the page - Leave the hero or top image out of lazy loading
- Set width and height on every image
- Compress and resize images before uploading
Start at the source: resize and optimize with our free image resizer, then let lazy loading handle the delivery.