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 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 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.
44 - Speed Index 5.6 seconds
31 - Speed Index 19.2 seconds
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.
73 - Speed Index 4.7 seconds
71 - Speed Index 4.9 seconds
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:
Your browser doesn't support HTML5 video.
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
I always look for the best-built plugin that won't slow down or break your site.
Remember, the smaller the bytes the quicker it can download.