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.
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.
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
- Leverage Browser Caching in WordPress with or without Plugin
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. 
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. 
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
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:
- Install and activate Lazy Load Optimizer plugin here.
- Go to WordPress Dashboard > Settings > Lazy Load Optimizer settings.
- Change the plugin setting as per your requirement or refer to the screenshot given below for basic setup.
- From the plugin’s settings page, you can tweak CSS classes to exclude lazy loading, enable/disable iframes lazy load and few other settings.
- 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.
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:
- Install and activate this plugin.
- Navigate to WordPress Dashboard > Settings > Autoptimize.
- Click the Image Tab Autoptimize Settings page.
- Check the box against Lazy-load images option to enable it as shown in the screenshot below.
- 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.
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
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.
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?
In addition to image lazy loading, this plugin supports lazy loading for videos and iframes too.
You can also tweak the image loading effect: spinning or fade in.
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.
Native Lazyload by Google
Native Lazyload adds new
loading="lazy" attribute to the images so that the website starts supporting native lazy-loading.
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.
You might like: