How to Defer Offscreen Images in WordPress

A site that loads quickly is absolutely critical for a good user experience and search engine optimization. And one way to improve the performance of your WordPress site is to defer offscreen images, a technique commonly known as lazy loading.

With lazy loading, images that are not immediately visible on a page are only loaded when needed. This ultimately reduces page load times and conserves bandwidth. 

This guide explores how to defer offscreen images in WordPress, covering various methods, tools, and best practices. Let’s jump right in!

Understanding the process of deferring offscreen images

Offscreen image deferring postpones the loading of images that are not within a visitor’s current viewport instead of displaying all of them simultaneously. As they scroll, additional images load just before they enter the viewport. This approach enhances page speed and optimizes resource usage.

Benefits of deferring offscreen images

Implementing lazy loading offers several advantages:

• Improved page load times: By loading only visible images, the amount of data transferred during the initial page load decreases, resulting in faster speeds.
  
• Reduced bandwidth usage: Lazy loading conserves bandwidth by displaying images only when necessary, benefiting those with limited data plans or on slow connections
  
• Enhanced user experience: Faster page loads lead to a smoother browsing experience, reducing bounce rates and increasing user engagement.
  
• Better server performance: Decreasing the number of simultaneous image requests reduces server load, allowing it to handle more visitors efficiently.

Methods for deferring offscreen images in WordPress

There are two key approaches to implement lazy loading in WordPress:

1. Use the native lazy loading feature

WordPress versions 5.5 and above support native lazy loading by adding the loading=”lazy” attribute to <img> tags. This method relies on browser support and is straightforward to implement.

Steps to implement native lazy loading:

1. Update WordPress to the latest version: Verify that your WordPress installation is version 5.5 or higher.
   
2. Add images as normal: When adding images in the WordPress editor, the loading=”lazy” attribute is automatically added.
   
3. Verify implementation: Inspect your site’s HTML to confirm the presence of the loading=”lazy” attribute in image tags.

Note: While native lazy loading is efficient, browser support varies and some older browsers may not support this feature.

2. Manually implement lazy loading with JavaScript

For greater control, you can implement lazy loading manually using JavaScript. There are aspects involved:

1. The Intersection Observer API: This modern API allows you to detect when an element enters the viewport and load images accordingly.
   
2. JavaScript event handlers: By attaching event listeners to scroll, resize, or orientation change events, you can trigger image loading as needed.

Implementing with Intersection Observer API:

1. Add the following JavaScript code to your theme’s functions.php file:

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

2. Modify your image tags to include the lazy class and data-src attribute:

<img class="lazy" data-src="image.jpg" alt="Description">

Note: Manual implementation requires coding knowledge and may be more complex to maintain.

Optimizing images for better performance

In addition to deferring offscreen images, optimizing image files enhances website performance. Here are three additional steps you can take: 

• Compress images: Use tools like ImageOptim or plugins like Jetpack to reduce image file sizes without significantly reducing quality.
  
• Use appropriate formats: Utilize modern image formats like WebP for better compression and quality balance.
  
• Implement responsive images: Make sure that your site loads the correct image size for each visitor’s device or screen resolution. WordPress generates multiple sizes for each uploaded image, and using the srcset attribute allows browsers to choose the best one.

Considerations when using background images

Lazy loading typically applies to <img> tags, but background images set via CSS are not handled by default. If your theme or plugin uses background images for design elements, you’ll need to take a different approach.

Techniques to lazy load background images:

• Use JavaScript to apply background images dynamically when an element enters the viewport.
  
• Use libraries that support lazy loading background images, such as Lozad.js or LazySizes.
  
• Add placeholders with low-resolution images or solid color blocks before the full image loads.

Example using JavaScript and Intersection Observer:

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

CSS:

/* Reserve space to reduce CLS */
img {
  height: auto;
}

/* Optional: subtle placeholder effect for lazy images you control */
img.lazy {
  filter: blur(8px);
  transform: scale(1.01);
}
img.lazy.is-loaded {
  filter: none;
  transform: none;
  transition: filter 250ms ease, transform 250ms ease;
}

Testing and validating lazy loading

Once you’ve implemented lazy loading, it’s important to confirm that it’s working as expected and not affecting your site’s functionality or SEO.

Steps to validate implementation:

• Use browser DevTools:
  
  • Open Chrome Developer Tools or Firefox DevTools.
    
  • Inspect the <img> elements to confirm loading=”lazy” or custom data attributes like data-src.
    
• Scroll through the page:
  
  • Make sure that images load only when they appear in the viewport.
    
• Use Lighthouse audits:
  
  • Run a PageSpeed Insights audit or a Lighthouse report in Chrome DevTools. Check for performance suggestions related to image loading.
    
  • Important update (Lighthouse 13 / PageSpeed Insights): The “Defer offscreen images” audit has been removed from Lighthouse 13. If you’re searching for this because an older test, host dashboard, or cached report showed the warning, the underlying best practice still matters: load above-the-fold images fast, and delay truly offscreen images — but you should validate using current Lighthouse/PageSpeed checks and real-user Core Web Vitals instead.
    
• Test on multiple devices and browsers:
  
  • Ensure compatibility and functionality across different environments.

Avoiding common pitfalls

Lazy loading is powerful, but incorrect implementation can lead to usability issues or missed SEO opportunities. Be aware of the following issues:

• Images not loading at all:
  
  • Ensure that you’re using data-src, JavaScript logic, and fallback mechanisms correctly.
    
• SEO issues:
  
  • Use proper alt text and make sure that important images are still discoverable.
    
  • Use structured data to reference images when needed.
    
• Content layout shifts:
  
  • Reserve space for images using width and height attributes or CSS rules to avoid layout jumps.
    
• Overusing JavaScript libraries:
  
  • Avoid layering too many lazy load solutions together, which can conflict.
    
• Accessibility concerns:
  
  • Don’t use lazy loading for images critical to navigation or content understanding.

Making it work seamlessly with themes and builders

Many WordPress themes and page builders have their own lazy loading mechanisms or compatibility layers. Understanding how these interact with your other methods is important.

Tips for theme and builder compatibility:

• Review your theme’s documentation to see if lazy loading is included or recommended.
  
• Disable plugin lazy load features if your theme already includes it.
  
• Use child themes to apply custom JavaScript without modifying core theme files.
  
• Test visual builders after enabling lazy loading so that dynamic content loads properly.

When not to defer image loading

While lazy loading is useful, not every image should be deferred. Critical images that appear above the fold or that are part of navigation or branding should load immediately.

Images you typically shouldn’t lazy load:

• Logos in the header
  
• Hero images in the visible viewport on page load
  
• Key UI icons or illustrations above the fold
  
• Images with loading=”eager” where performance benefit outweighs lazy loading

Use lazy loading selectively for the best performance and user experience.

Take it further with Jetpack Boost

Once you’ve implemented lazy loading and optimized your images, the next step is to streamline the rest of your site’s performance. That’s where Jetpack Boost comes in.

Jetpack Boost is a free performance plugin designed specifically for WordPress. It includes a set of optimization tools that improve load times without requiring technical knowledge. For site owners who want to ensure that every page is as fast and efficient as possible, Jetpack Boost offers practical features you can activate with a few clicks.

Here are just a few ways that Jetpack Boost improves performance:

• It defers non-essential JavaScript: JavaScript can block rendering, but Jetpack Boost helps by deferring non-critical scripts so the page becomes usable faster.
  
• It optimizes CSS loading: The plugin creates critical CSS for your homepage, posts, and pages. Content displays faster, even before the full page has loaded.
  
• Image CDN: Serves images from a global CDN and converts to efficient formats like WebP.

If your goal is a fast, user-friendly WordPress site without spending hours on code or configuration, Jetpack Boost makes performance best practices accessible and actionable.

Discover all the features included in Jetpack Boost here: https://jetpack.com/boost/

Frequently asked questions

What is the difference between deferring offscreen images and lazy loading?

Lazy loading is the technique used to defer offscreen images. To defer an image means to stop it from loading until it is needed. Lazy loading is the popular method that accomplishes this by waiting to load an image until a person scrolls near it. So, these terms work together. You defer images by implementing lazy loading. The main goal is to make the initial page load faster by only loading the images that are immediately visible.

Will deferring offscreen images hurt my website’s SEO?

Deferring offscreen image helps SEO when done correctly. It makes your page load faster, which improves Core Web Vitals, a known Google ranking factor. The one major risk is lazy loading your “Largest Contentful Paint” (LCP) image. The LCP image is the main image that appears at the top of your page. If you lazy load this image, it can slow down the perceived load time and hurt your SEO score.

Does the newest version of WordPress automatically defer offscreen images?

Yes, since WordPress version 5.5, it automatically applies basic lazy loading to images. WordPress adds the loading=”lazy” attribute to img tags. This tells browsers to defer images that are below the fold. While this is a good starting point, it is not a complete solution.

It does not lazy load background images or iframe content, and it may not be as efficient as JavaScript-based methods used by performance plugins, which offer more control and better results for page speed scores.

Can I defer background images that are set in my CSS?

Yes, you can defer CSS background images, but it is more complex. Standard lazy loading in WordPress only works for tags in your HTML. It does not work for images loaded as a background-image property in your CSS files.

To defer these, you need a plugin that uses a JavaScript-based approach. The script can detect when an element with a background image is about to be scrolled into view and then apply the image. This is an advanced feature found in many premium performance plugins.

How do I stop a specific image, like my logo, from lazy loading?

You must prevent your logo, header images, and any “above the fold” content from lazy loading. The best way is to use a plugin that allows you to specify exclusions. Some plugins let you add a CSS class, like no-lazy, to an image tag. This tells the script to skip that specific image.

If your plugin has an option to “exclude leading images”, you can set it to exclude the first one or two images automatically. This ensures your most important visual elements load immediately for a better user experience.

How can I check if deferring offscreen images is working on my site?

You can use your browser’s developer tools to verify it is working. In Chrome or Firefox, right-click your page and select “Inspect.” Go to the “Network” tab and select the “Img” filter.

Now, reload your page. You should only see a few images load at the top of the list. As you scroll down the page, you will see new image files appear in the network log as they are loaded. If you see all of your page’s images load at the same time right at the beginning, then it is not working correctly.

Does deferring images work for modern formats like WebP or AVIF?

Yes, deferring images works for all image formats, including modern ones like WebP and AVIF, as well as older ones like PNG and JPG. Lazy loading does not care about the file type of the image.

The process works by delaying the loading of the HTML element itself, regardless of the image source file. This means you can combine the benefits of modern, smaller image formats with the speed improvements of lazy loading for an even faster website. It is a best practice to use both together.

Besides images, what else can I defer to improve page speed?

Deferring images is a great start, but you can also defer other assets. The most common are JavaScript files and videos. You can defer non-critical JavaScript to prevent it from blocking the rendering of your page content. This is often called “delaying” or “deferring” JS.

For videos, especially YouTube embeds, you can replace the heavy video player with a lightweight preview image. The full video player only loads after a user clicks the play button. Deferring these assets further reduces initial load times and improves your Core Web Vitals.