How to Defer Offscreen Images in WordPress

PageSpeed Insights will suggest that you need to defer offscreen images:

In the above example, deferring these images will speed up the page by 9 seconds!

In this tutorial, I will show you how to defer offscreen images in WordPress to give your site a speed boost.

PageSpeed Insights Results

When PageSpeed Insights finds many images on a page it will suggest that you “defer offscreen images”.

Google's solution to this issue is to:

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

But what does this all mean?

To understand what Lazy loading is we need to talk about the fold. It may sound funny but it is an important concept to understand. Let me first explain “the fold” then we can come back to talking about lazy loading.

The Fold

The fold is the term to describe the end of the web page that is visible on the screen. There are two parts of the web page:

• The part that the user can see, this is above the fold.
• The part that the user cannot see until they scroll, this is below the fold.

It looks something like this:

As the user scrolls down the page the fold moves down the page too.

When you are deferring offscreen images you are only loading the images that are above the fold (or very near to it). All other images below the fold will have lazy loading. This means that they do not load them when the page loads. Instead, they only download as the user scrolls down the page.

If you scroll fast on a page that has lazy loading you may see that the image is missing and then it pops in.

This is lazy loading.

Lazy Loading

Lazy loading will make your web pages faster because you only load the visible images. All other images that are below the fold do not get loaded at first.

It looks something like this:

Where the images that are below the fold are not loaded yet.

As you scroll down the page the browser will load the remaining images.

The effect on load time is dramatic. To see the difference to your page speed let me show you a test.

The page we are going to use has 25 cat images on it.

Let's do a PageSpeed Insights test on this page and see what the result is.

1. 44 - Speed Index 5.6 seconds
2. 31 - Speed Index 19.2 seconds
3. 31 - Speed Index 20.4 seconds

Average performance score of 35.

I always run three tests and take the average as the results can vary.

Now on the second test, we can do the same thing but this time we will use lazy loading on the page. Remember, this is the same page with 25 images of cats the only difference is the images are lazy loading.

1. 73 - Speed Index 4.7 seconds
2. 71 - Speed Index 4.9 seconds
3. 72 - Speed Index 5.5 seconds

Average performance score of 72.

Adding lazy loading has increased the speed of the page load by over double. The page is now 72 instead of 35.

The speed index has also increased. The page with lazy loading takes 5 seconds to load whereas, the original takes closer to 20 seconds. This is a huge difference. 15 seconds is a lifetime on the web and we want the page to load in 3 seconds.

When you see the results side by side you can see the difference in page speed:

Which web page would you rather use?

In this test the lazy loading reduces the image data by half as you can see in this graph:

That is why the page is twice as fast to load as it only has to load half the data of the original page. If the page needs to load less data then it makes sense that the page will load faster.

Next, let's look at how you can add lazy loading to your site.

How to add Lazy loading to WordPress

We are going to install a plugin to add lazy loading to all the images on your site. There are a few plugins available and many install large JavaScript frameworks.

I always look for the best-built plugin that won't slow down or break your site.

The plugin that I currently recommend for lazy loading is WPRocket Lazy Load. This plugin only adds 10kb of JavaScript to your page and is by far the smallest lazy load plugin I have found.

Remember, the smaller the bytes the quicker it can download.

Before installing any plugin make sure that you do a backup of your WordPress site. Better to be safe than sorry.

To install this plugin go to your WordPress Admin area and select the “Add new” link in the plugin section on the menu:

Then search for “rocket lazy load” the plugin has an orange icon and looks like this:

Then click on the “Install now” button. Lastly, click on the “Activate” button:

You will then be taken to the plugins screen where you can see the Lazy load plugin listed:

Click on the “Settings” link so that you can enable image lazy loading. You will see a settings screen like this:

Make sure to check the “images” checkbox like above and then click on the “save changes” button:

With the settings set you are ready to test.

Going back to the cat test page we created earlier we got these original performance scores:

1. 44 - Speed Index 5.6 seconds
2. 31 - Speed Index 19.2 seconds
3. 31 - Speed Index 20.4 seconds

Now with WPRocket Lazy Load plugin enabled we get the following results:

1. 77 - Speed Index 4.7 seconds
2. 76 - Speed Index 4.4 seconds
3. 77 - Speed Index 4.7 seconds

Congratulations, you have enabled lazy loading on your site. In this example, the increase in page speed was 15 seconds you should also see the same speed increase.

Wrapping Up, How to Defer Offscreen Images in WordPress

When running a PageSpeed Insights speed report you may see that you need to “defer offscreen images”.

It is not clear how you do this.

We learned about the fold and how we can use image lazy loading techniques. The fold splits the page to:

• Above the fold the visible part of the web page
• Below the fold the hidden part of the web page

When we add lazy loading we only need to load the images that are near the top of the page or above the fold.

In this tutorial, we have covered how to defer offscreen images in WordPress. This is easy when we use the WPRocket Lazy Load plugin.

We have covered how you can install the WPRocket Lazy Load plugin to enable a dramatic speed boost. Especially, when you add this to image-heavy websites.