Lazy loading is a performance technique that delays loading images until a visitor actually scrolls them into view. Instead of downloading every image the moment the page opens, the browser fetches what’s on screen first and holds the rest until they’re needed. It’s one of the simplest ways to make a page feel faster and score better on Google’s speed metrics.
What is lazy loading?
With lazy loading images, pictures load only when the browser sees they’re about to enter the viewport. A page with 50 images no longer downloads all 50 up front — it grabs the handful that are visible plus a few just below the fold, then loads the others as the visitor scrolls. Since most people never scroll to the very bottom, a lot of that data never has to be fetched at all.
How lazy loading works
Modern lazy loading uses the browser’s built-in loading="lazy" attribute. Add it to an <img> tag and the browser defers the download until the image is close to the viewport — usually a bit before it actually appears, so it’s ready by the time the user reaches it.
Behind the scenes the browser watches which elements are scrolling into view and triggers each download at the right moment. No JavaScript library is required. For sites in 2026, native loading="lazy" is the best default: zero maintenance, no scripts, and support across Chrome, Firefox, Safari, and Edge.
How lazy loading improves speed and Core Web Vitals
Deferring off-screen images frees the browser to render the content people see first, which improves Largest Contentful Paint (LCP) — how quickly your main content appears. It also helps keep the initial load light, which supports a stable layout and a better Cumulative Layout Shift (CLS) score when combined with sized images. For the full picture of how images affect these metrics, see our guide on Core Web Vitals and images.
There’s a bandwidth win too: visitors on mobile or slow connections don’t burn data on images they never scroll to, so pages feel faster and your server does less work.
How to add lazy loading
In plain HTML you just add the attribute — and always include width and height so the browser reserves space and nothing jumps around as the image loads:
<img src="photo.jpg" alt="Sunset over mountains" loading="lazy" width="800" height="600">
On WordPress you likely don’t have to do anything: since version 5.5, WordPress adds lazy loading to images in post content automatically. To check, right-click an image below the fold, choose “Inspect,” and look for loading="lazy" in the markup. For images hard-coded into a theme header or sidebar, you may need to add the attribute yourself if the theme doesn’t already.
What you should NOT lazy load
There’s one important exception: your above-the-fold hero image. That image is usually your LCP element, so it should load immediately — never lazily. If you defer it, the browser waits to fetch the very thing the visitor sees first, which delays the whole page and hurts your LCP score. Load it eagerly (omit the attribute, or use loading="eager") and reserve loading="lazy" for images further down the page.
Lazy loading works best with compressed images
Loading on demand still means loading — a bloated 5 MB photo takes time whenever it finally downloads. Compressing images first shrinks them dramatically with no visible quality loss, so lazy loading has far less to fetch. Run your images through the ReadyGoTools image compressor before upload, and consider serving them as WebP — see our WebP guide for why. Compressed images plus lazy loading is exactly why fast sites feel fast.
Frequently Asked Questions
Does lazy loading hurt SEO?
No. Google’s crawler still fetches lazy-loaded images, so they’re indexed and can appear in Google Images. Lazy loading actually helps SEO by improving Core Web Vitals, which are ranking signals. Just use the standard loading="lazy" attribute rather than a custom script that could hide images from crawlers.
How much faster will my site be?
It depends on the page. A long homepage with dozens of images below the fold can load noticeably faster because it skips most of them; a short page with only a few images near the top will see less. The bigger win is the improvement to LCP, CLS, and overall responsiveness that Google measures.
Can I lazy load header or navigation images?
You can, but it’s better not to if they appear on every page and above the fold. Load header and logo images eagerly so they render instantly, and use lazy loading for below-the-fold and page-specific images. That keeps the speed gains without a flash of missing branding.