How to Defer Offscreen Images in WordPress by Lazy Loading Images

Updated on

Do you know how to Defer Offscreen Images in WordPress by Lazy Loading Images to improve pagespeed? Learn how to lazy load images and videos in WordPress to speed up your website. PageSpeed has become an important element for user experience as well as search engine rankings. Therefore, every blogger and webmaster wants a fast loading website. Of course, you also want maximum PageSpeed for your WordPress site. By the end of this guide, you will learn how to fix Defer Offscreen Images warning in Google Pagespeed Insights by Lazy Loading Images in ­­WordPress.

How to Defer Offscreen Images in WordPress by Lazy Loading Images
How to Defer Offscreen Images in WordPress by Lazy Loading Images

In this article, I will take you through how to lazy load images and videos to Defer Offscreen Images in WordPress – to speed up your site.

Fastest WordPress Hosting Anywhere!

You might ask, why lazy loading?

Because Lazy Loading Images is an easy and tested trick to unlock more speed for your WordPress website.

This article will cover what is lazy loading & how does it work, benefits of lazy loading images (& videos) in WordPress, how to Easily Lazy Load Images in WordPress to Speed Up Your Website and how to Defer Offscreen Images in WordPress, plugin(s) to use.

Do you know? How to

What is Lazy Loading? And How Does it Work?

If you have not come across this before, let me tell you ‘what is lazy loading?

Lazy Loading means loading of the specific resource (in this case: images, videos, etc.) when the user scrolls down to that particular resource. In some cases, lazy-loaded (deferred) resources load at a specified time or on-click of a button. [1]

In conclusion, if you have enabled lazy loading for images in WordPress, the web browser will download an image only when the user scrolls down to that image or at a certain time or on-click of a button (as you have defined).

Benefits of Lazy Loading Images in WordPress

Why you should implement lazy loading in WordPress – the advantages.

As I have mentioned above the idea is, to improve pagespeed and load webpage faster.

Let’s see, how lazy loading helps to improve pagespeed.

Images and videos have become an integral part of today’s web content. The biggest demerit they bring is – increase in payload of the webpage.

Lazy loading images and videos are one of those solutions which lower the initial payload and load time without affecting the text content.

When lazy loading is implemented for images and videos – the HTML, CSS, JS and other resources of a webpage will be downloaded in the first attempt by web browsers. After that, the images will be downloaded at the specified place or time.

Hence lazy loading pre-optimized images and videos help to lower initial payload and load time in order to improve page speed.

And a fast loading website means better user experience and more love from search engines because Google already started taking into account PageSpeed as one of the ranking factors.

Defer Offscreen Images in WordPress by Lazy Loading

Google PageSpeed Insights might have showing Defer Offscreen Images waring for your WordPress site. The warning text says,

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

To fix this warning,

Google recommends the use of IntersectionObserver to implement lazy loading offscreen images more preciously. [2]

Here the catch is if you’re neither a coding ninja nor in a position to hire a programmer to made a custom solution using IntersectionObserver to lazy load images in WordPress to defer offscreen images.

Then you’re left with an easy and popular solution i.e. using a reliable plugin to defer offscreen images in WordPress by lazy loading them.

How to Lazy Load Images in WordPress

We will Lazy Load Images to Defer Offscreen Images in WordPress.

There are several plugins in the WordPress repository to Lazy Load Images in WordPress. Here I am listing the plugins which I found distinct based on their features and usability.

If you are not sure how to install a WordPress plugin, you can refer to this guide How to install WordPress Plugins Easily.

Plugins to Use to Lazy Load Images and Videos in WordPress

Lazy Load Optimizer

Defer Offscreen Images in WordPress using Optimizer plugin
Defer Offscreen Images in WordPress using Lazy Load Optimizer plugin

Lazy Load Optimizer is a free plugin that lazy loads images, iframes in order to improve pagespeed. This plugin can lazy load images of posts, pages, custom post types, widgets and image gallery, etc.

Also, the plugin is WooCommerce compatible hence it can lazyload product images, product category images in WooCommerce sites.

In addition to that, the plugin improves PageSpeed Insights score, by fixing defer offscreen images error.

How To Use Lazy Load Optimizer: Settings & Usage Guide

Step by step instructions to lazy load images in WordPress to fix defer offscreen images warning – Using Lazy Load Optimizer plugin:

  1. Install and activate Lazy Load Optimizer plugin here.
  2. Go to WordPress Dashboard > Settings > Lazy Load Optimizer settings.
  3. Change the plugin setting as per your requirement or refer to the screenshot given below for basic setup.
  4. From the plugin’s settings page, you can tweak CSS classes to exclude lazy loading, enable/disable iframes lazy load and few other settings.
  5. Also, you can access other plugin settings from WP Customizer > Lazy Load Setting. From here you can enable/disable lazyload spinner image & select its size, can choose from image transitions for lazy loading.
Defer Offscreen Images in WordPress using Lazy Load Optimizer Plugin
Lazy Load Optimizer Plugin Settings
Customizer Settings – Lazy Load Optimizer
Customizer Settings – Lazy Load Optimizer

Autoptimize

Defer Offscreen Images in WordPress using Autoptimize Plugin
Defer Offscreen Images in WordPress using Autoptimize Plugin

Autoptimize WordPress plugin is one of the most popular WordPress speed optimization plugins. You can use this free plugin to defer offscreen images in WordPress. Let’s see Autoptimize settings to defer offscreen images in WordPress.

How to Defer Offerscreen Images in WordPress

Step by step process to Defer Offscreen images in WordPress by Lazy Loading Images Properly:

  1. Install and activate this plugin.
  2. Navigate to WordPress Dashboard > Settings > Autoptimize.
  3. Click the Image Tab Autoptimize Settings page.
  4. Check the box against Lazy-load images option to enable it as shown in the screenshot below.
  5. Finally, click Save Changes and you’re done.

Now clear your website cache & browser cache and then test your site using pagespeed tool again to see the changes.

Defer Offscreen Images in WordPress using Autoptimize plugin
Defer Offscreen Images in WordPress using Autoptimize plugin

Lazy Load

Lazy Loading WordPress Plugin
WordPress Plugin – Lazy Load

Lazy Load is quite popular and lightweight plugin. Automattic is one of the contributors & developers of this plugin. This plugin is written by WordPress VIP team, the TechCrunch 2011 Redesign team, and Jake Goldman. Literally, this plugin is a real plug and play thing. As all you need is to install and activate this plugin. That’s all. All the images will start Lazy Loading. There are no settings in this plugin.

A3 Lazy Load

Plugin for Deferring Offscreen Images in WordPress
Plugin for Lazy Loading Images in WordPress – A3 Lazy Load

A3 Lazy Load is newer as compared to other plugins in this list. The major reason for the inclusion of A3 Lazy Load plugin in this list is that it has some really good features. Also, this plugin has 5 out of 5 user rating in WordPress plugin repository.

Unlike above Lazy Load plugin, A3 Lazy Load allows you to tweak settings/options for lazy loading images.

A3 Global Settings & Activation
Global Settings & Lazy Load Activation

With A3 Lazy Load you can configure to lazy load specific types of images like Images in content, Images in widgets, post thumbnails, gravatar images, etc.

Do you know?

Defer Offscreen Images in WordPress using A3 Plugin
A3 Lazy Load – Lazy Loading Image Settings

In addition to image lazy loading, this plugin supports lazy loading for videos and iframes too.

Videos and iFrames with A3 plugin
Lazy Load Videos and iFrames with A3 Lazy Load plugin

You can also tweak the image loading effect: spinning or fade in.

Effect & Style - A3 WordPress plugin
Lazy Loading Effect & Style

BJ Lazy Load

BJ WordPress Plugin to Defer Offscreen Images in WordPress
WordPress Plugin – BJ Lazy Load

BJ Lazy Load is also another popular plugin to Lazy Load Images in WordPress. This plugin also has settings page similar to the previous plugin, you can change plugin settings based on your requirement. Furthermore, see the detailed settings menu in the images below.

Defer Offscreen Images in WordPress using BJ Plugin Settings
BJ Lazy Load Plugin Settings
BJ Plugin Settings Menu
BJ Lazy Load Plugin Settings

Native Lazyload by Google

Defer Offscreen Images in WordPress by using Native Lazyload Plugin by Google
Native Lazyload Plugin by Google

This WordPress plugin is offered by Google to allow you lazy load images in WordPress without using a JavaScript.

Native Lazyload adds new loading="lazy" attribute to the images so that the website starts supporting native lazy-loading.

There is no setup in the plugin. All you need is to install the plugin and you’re ready to roll. The plugin is also bundled with a fallback mechanism (based on a minimal custom JavaScript) so that the lazy-loading feature does not break on the browser that does not support native lazy loading.

Bottom Line

Lazy Loading Images in WordPress is definitely a performance-boosting feature that everyone should implement to his website. As far as the question is which plugin you should use. The answer is purely dependent if you want a tiny plugin then you should go with Lazy Load plugin. On the flip side, if you want to play with the Lazy Loading settings then you should try A3 Lazy Load plugin and if you are looking for a fix for Defer Offscreen Images warning, you should give a shot to Lazy Load Optimizer plugin or Autoptimize.

Do you know that you can also lazy load other resources in WordPress? Like you can Lazy Load Comments in WordPress. What if, you are using Facebook Comments in WordPress? The good news is, you can Lazy Load Facebook Comments as well.

I hope you find this article helpful to Lazy Load Images in WordPress. If you have a question regarding this topic, feel free to ask via comments. I will be happy to help.

Cheers!

You might like:

Photo of author
Shashank Singh
Shashank is a web addict and amateur blogger. His current interests include blogging, SEO, and WordPress. See his social profiles to know him even better.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

7 thoughts on “How to Defer Offscreen Images in WordPress by Lazy Loading Images”

  1. Avatar of Anette Mossbacher

    Thanks for the great tips in your post. My question: is there a lazy load I can use for my blog page as well?
    For images that is great. My blog makes automatic pages which end with “/2” or “/3”. Google sees that as duplicate. I would like to get rid of that!
    Thanks a lot
    Ciao Anette

    Reply
  2. Avatar of Damon Moats

    Great! It’s a very informative blog post, here I would like to say that I found it very easy to follow the instructions for setting up WordPress lazy loading through a plugin on WP blog. I hope others will find it helpful too. Thanks

    Reply
  3. Avatar of Aric Thomas

    Hi Shashank, I really like this post. I fixed defer offscreen images for my blog.
    Thanks.

    Reply
    • Avatar of Shashank Singh

      Hey Aric,

      Thanks for reading this. I’m glad that you made it.

      Reply
  4. Avatar of Lakshmi

    May I know how to fix Defer offscreen images in WordPress website without using any plugin.

    Reply
    • Avatar of Shashank Singh

      Hey Lakshmi,

      I’ll try to cover that in upcoming updates till then make use of Google. 😉
      Thanks for dropping by!

      Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.