When a visitor lands on your page, the browser starts downloading everything it needs to display it - HTML, CSS, JavaScript, and images. On a page with many images, this can mean downloading dozens of files all at once, even for images the visitor may never scroll down to see.
Lazy loading solves this by deferring the download of images and videos until they are actually needed - specifically, until the user is about to scroll to them.
How Lazy Loading Works
Traditional image loading is "eager" - the browser requests every image on the page as soon as the HTML is parsed, regardless of where those images appear in the layout.
Lazy loading changes this behaviour so that off-screen images are not requested until the user scrolls close to them. This means the initial page load only needs to download the images that are visible in the viewport, making the page appear ready much faster.
Modern lazy loading in browsers uses the IntersectionObserver API, a JavaScript interface that watches for elements entering the viewport. When an image is about to become visible, the observer triggers the download. The result is seamless - visitors rarely notice any loading delay.
Native Lazy Loading
The simplest way to implement lazy loading is with the HTML loading attribute:
<img src="photo.jpg" alt="Description" loading="lazy">
That single attribute tells the browser to defer loading this image until it is near the viewport. Native lazy loading is supported in all modern browsers including Chrome, Firefox, Safari, and Edge - with no JavaScript required.
For WordPress, this attribute can be added automatically by plugins or by theme code. Since WordPress 5.5, WordPress actually adds loading="lazy" to most images automatically.
Lazy Loading in WordPress
Even though WordPress handles some lazy loading automatically, dedicated plugins give you more control:
Smush (free and premium) is one of the most popular image optimization plugins and includes lazy loading as part of its feature set.
Imagify similarly combines image compression with lazy loading.
a3 Lazy Load is a lightweight plugin focused specifically on lazy loading, with options for images, videos, iframes, and comments.
Most caching plugins - including WP Super Cache and WP Rocket - also include lazy loading options in their settings.
If you are using Elementor or another page builder, check its performance settings, as many now include built-in lazy loading controls.
What NOT to Lazy Load
This is the most important thing to get right. Lazy loading applied incorrectly can hurt your performance scores rather than help them.
Do not lazy load above-the-fold images. Images that are visible when the page first loads should be loaded immediately. If you lazy load them, the browser has to wait for the IntersectionObserver to trigger before it even starts downloading the image, which delays when the image appears and degrades the user experience.
Do not lazy load your LCP element. The Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how long it takes for the largest visible element on the page to render. This is often a hero image or banner. If you apply loading="lazy" to your LCP image, you will directly harm your LCP score - which Google uses as a ranking signal.
The rule of thumb: lazy load everything below the fold, eager load everything above it.
Impact on Core Web Vitals
When implemented correctly, lazy loading can meaningfully improve two Core Web Vitals metrics:
Largest Contentful Paint (LCP): By reducing the total number of images the browser fetches on initial load, the browser can prioritize the images that matter most, potentially improving LCP. (Remember: only if the LCP image itself is NOT lazy loaded.)
Total Blocking Time (TBT) and First Input Delay (FID): Fewer network requests on initial load means the browser's main thread is less busy, which can improve interactivity metrics.
Lazy loading is a quick, low-risk performance improvement that every image-heavy website should use - just make sure to apply it thoughtfully, keeping your above-the-fold and LCP images eager-loaded so your most important content appears as fast as possible.
