Quick answer: Lazy loading images means the browser only downloads an image when it is about to scroll into view, instead of loading every image on the page at once. It reduces initial page weight, speeds up the first visible render and saves data on mobile. Browsers do not do this on their own yet, so it is done with JavaScript, either a library such as lazysizes, the Intersection Observer API, or a plugin on platforms like WordPress. Include a noscript fallback so search engines and users without JavaScript still get the images.
Images are usually the heaviest part of a web page. A long blog post, a product category or a portfolio page can carry several megabytes of images, most of which sit far below the fold. Without lazy loading, the browser downloads all of them up front, competing for bandwidth with the content the visitor can actually see.
This guide explains what lazy loading does, how it works technically, how to add it to your site and what to watch out for.
What lazy loading does
On a normal page, the browser finds every img tag in the HTML and starts fetching each image as soon as it can. On a page with 40 images, that means 40 requests and all their bytes, even if the visitor only reads the first screen and leaves.
With lazy loading:
- The page loads with lightweight placeholders instead of the real images below the fold.
- A script watches the visitor’s scroll position.
- When a placeholder gets close to the viewport, the script swaps in the real image URL and the browser downloads it.
The visitor sees the first screen sooner, and images further down appear as they scroll. Images the visitor never reaches are never downloaded.
Why it speeds up pages
- Smaller initial payload. Fewer bytes to download before the page is usable, which matters most on mobile connections.
- Fewer competing requests. CSS, scripts and above-the-fold images get bandwidth first.
- Faster perceived load. The page feels ready earlier, even if the total page is large.
- Lower data use. Visitors on capped mobile plans download less.
- Less server load. For busy sites, fewer image requests mean less bandwidth cost.
Speed matters more than ever. Google has announced that page speed will become a ranking factor for mobile searches in July, and mobile visitors are quick to give up on slow pages. Lazy loading is one of the simplest ways to make image-heavy pages lighter.
How lazy loading works technically
There is no built-in browser attribute for lazy loading at the moment, so it is handled with JavaScript. There are two main approaches.
Scroll event listeners
Older scripts listen for scroll and resize events, then check each image’s position with getBoundingClientRect to see if it is near the viewport. This works in every browser, but it can be inefficient: scroll events fire constantly, and checking positions on every event can cause janky scrolling if the script is not throttled carefully.
The Intersection Observer API
Intersection Observer is a newer browser API built for exactly this job. You tell the browser which elements to watch and how close to the viewport they need to be, and it notifies your script when they cross that threshold. It is far more efficient than scroll listeners.
Chrome, Firefox and Edge support Intersection Observer. Safari does not support it yet, so you need a polyfill or a fallback to scroll listeners for Safari users, including everyone on iPhones and iPads.
The markup pattern
Most lazy loading scripts use a pattern like this:
<img src="placeholder.gif" data-src="photo.jpg" alt="Product photo" class="lazyload">
<noscript><img src="photo.jpg" alt="Product photo"></noscript>
The real URL lives in data-src (and data-srcset for responsive images). When the image nears the viewport, the script copies data-src into src. The noscript tag gives a normal image to browsers without JavaScript.
Libraries
Rather than writing your own script, most sites use a proven library. lazysizes is widely used: it handles responsive images, uses efficient detection, and is easy to drop in. Other libraries such as Lozad.js use Intersection Observer directly.
Lazy loading in WordPress
WordPress core does not lazy load images, so you add it with a plugin or theme code. Popular options include:
- Jetpack, which added a Lazy Images feature earlier this year.
- Lazy Load by WP Rocket, a lightweight standalone plugin, and the lazy load option in WP Rocket itself.
- a3 Lazy Load and BJ Lazy Load, which offer more control over which images and iframes are affected.
Most of these rewrite image tags in post content, featured images and widgets automatically. After enabling one, check that images in sliders, galleries and page builder layouts still appear correctly. Lazy loading pairs well with other image work covered in our guide to WordPress image optimization.
Lazy loading and SEO
Search engines need to find your images to index them for image search and to understand your pages. If the real image URL only appears after a scroll event, a crawler that does not scroll might never see it.
Googlebot currently renders pages with a browser based on Chrome 41, which does not support Intersection Observer. To keep lazy-loaded images discoverable:
- Include a noscript fallback with a normal img tag and alt text.
- Use a polyfill if your script relies on Intersection Observer.
- Do not lazy load above-the-fold images. Your logo, hero image and first product photos should load normally. Lazy loading them delays what the visitor sees first and gains nothing.
- Keep alt text on both the placeholder and the noscript image.
- Test with Fetch as Google in Search Console to see what Googlebot renders.
If you rely on image search for traffic, also consider listing important images in an image sitemap.
Common mistakes
Layout jumping
If placeholders have no dimensions, the page reflows as images load, pushing text down while the visitor is reading. Set width and height attributes, or use a CSS aspect-ratio container, so space is reserved before the image arrives.
Loading too late
If images only start loading when they enter the viewport, visitors see blank spaces as they scroll. Load images a little before they appear, for example when they are 200 to 300 pixels away.
Lazy loading everything
Lazy loading three small images on a short page adds a script and complexity for little benefit. Focus on long, image-heavy pages: blog archives, category pages, galleries and long-form articles.
Ignoring the images themselves
Lazy loading does not fix oversized images. A 3 MB photo still takes a long time to load when the visitor reaches it. Resize, compress and serve the right size with srcset. Newer formats such as WebP images can cut file sizes further where browsers support them.
Beyond images
The same technique works for other heavy elements:
- Video embeds. A YouTube iframe loads a lot of scripts. Showing a thumbnail and loading the player on click saves significant weight.
- Maps. Embedded Google Maps are heavy; load them when the map section comes into view.
- Comments and social widgets. Load these when the visitor reaches the bottom of the post.
FAQ
Does lazy loading hurt SEO?
Not when done properly. Keep above-the-fold images loading normally, add noscript fallbacks and check what Googlebot renders.
Is lazy loading worth it on a small site?
On short pages with a few images, the gain is small. On long pages with many images, it can noticeably reduce load time.
Will browsers support lazy loading natively?
There has been discussion about adding native support to browsers, but for now JavaScript is the way to do it.
Faster pages, happier visitors
Lazy loading is a small change that makes image-heavy pages much lighter on first load, especially on mobile. Combined with properly sized images and good caching, as covered in our WordPress speed optimization guide, it helps pages feel fast. If your site feels sluggish, our team builds and tunes sites that turn visitors into customers.
