What Lazy Loading Does
Lazy loading is a technique that delays downloading offscreen images until the visitor scrolls near them. Instead of loading every image on the page upfront — including ones far below the fold that may never be seen — the browser only fetches images as they approach the viewport.
This reduces the initial page weight and the number of concurrent requests during page load. On a long page with 20 images, lazy loading might defer 15 of them, cutting the initial image payload by 75% or more.
How Browser-Native Lazy Loading Works
Modern browsers support lazy loading natively through the loading="lazy" attribute on <img> tags. When the browser encounters an image with this attribute, it skips the download until the image is within a certain distance of the viewport (typically 1250–2500 pixels, depending on the browser and connection speed).
WordPress has added loading="lazy" to images automatically since version 5.5. This means most WordPress sites already have basic lazy loading without any plugin. However, the default behavior applies to all images equally — including cases where you might not want it.
When Lazy Loading Hurts Performance
Lazy loading the wrong images can make performance worse. The most important case: your hero image or LCP element. If the largest visible image on the page is set to loading="lazy", the browser will not start downloading it until the layout is calculated and the browser determines the image is near the viewport. This adds delay to the most critical image on the page.
Since WordPress 5.9, the first image with the_content or the_post_thumbnail is automatically excluded from lazy loading. But this heuristic does not catch every case — hero images in page builders, background images, or images outside the main content area may still get incorrectly lazy-loaded.
What to Look For
Check whether your above-the-fold images have loading="lazy" set. In your browser’s DevTools, inspect the hero image and any other images visible on initial load. If they have the lazy attribute, they are being unnecessarily delayed.
Conversely, check that images below the fold do have lazy loading. A product category page with 50 product thumbnails should not be loading all 50 images on initial page load — only the ones visible in the first viewport.
Lazy Loading and Layout Shift
Lazy-loaded images can cause layout shift if they do not have explicit width and height attributes. When a lazy-loaded image finally loads, it needs space in the layout. Without dimensions, the browser cannot reserve that space in advance, causing content to jump as the image appears. Always ensure lazy-loaded images have their dimensions specified.
Further Reading
- Browser-level image lazy loading for the web (web.dev) — Technical guide to the native loading attribute, browser thresholds, and implementation details.