How to Defer Offscreen Images in WordPress by Lazy Loading Images

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.

🚀 Get WP Rocket Now!

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

• Defer Parsing of JavaScript in WordPress with/without plugin
• 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. [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

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.

Autoptimize

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.

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

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?

• How to Cache Gravatar Images to Speed Up WordPress

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

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:

• How to Remove Render Blocking JavaScript in WordPress
• Optimize WordPress Robots.txt file for SEO
• How to Add Subscribe to Comments in WordPress
• How to Add Code in WordPress Header and Footer-with/without plugin