It's not a secret website speed is one of the most important SEO ranking factors not only because of the loading itself, but its influence on customer experience. That's why you have to constantly test website speed with different tools to determine the issues slowing down your Magento 2 store.
The most common tool everyone is familiar with is Google PageSpeed Insights or PSI. It runs your URL through Google's servers and provides a report on how your website is doing.
Today we want to turn your attention to the "Defer Offscreen Images" that often holds your website from getting into the PSI green zone. We'll discuss what it means and how you can fix it to speed up Magento.
What is "Defer Offscreen Images" Message?
"Defer Offscreen Images" is the message displayed in Google PageSpeed Insights that lists all images that should be lazy loaded on the requested URL. It also shows the potential size savings you'll get from lazy loading these images. The complete description from Google looks like this:
"Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive."
But what it actually means? And what is lazy loading we're talking about?
Your webpage is divided into 2 parts once a website visitor opens it — above the fold (ATF) and below the fold. The former refers to the area visible on the screen Googlebots show you in PSI screenshots. In other words, it's the area within visitors' viewport.
The latter then refers to the area not visible on the initial loading or everything shown after you start scrolling through the page.
Without lazy loading, all of the page images are loaded before the page is rendered. It causes a delay, especially if you're loading a category page or a product page with a lot of images.
That's why Google's "Defer Offscreen Images" message suggests you load the media files visible only above the fold initially and lazy load, defer the loading of the rest of them.
In this case, loading all of the images at once won't be an issue since only those within the viewport will be loaded first.
It is also important to note that the "Defer Offscreen Images" issues appear more on mobile than desktop websites. It is vital since the mobile experience is more reliant on loading time and mobile users simply might not be willing to wait for that long for a page to render.
What are the Reasons for the "Defer Offscreen Images"?
The main reason why the Google Page Speed Insights "Defer Offscreen Images" message appears is that you don't use image lazy loading at all on your store.
It seems logical that you need to load all of the page assets for users to browse it, but it is not strictly defined. As we've started previously, as long as you load all of the vital assets within the viewport the loading of the rest could be deferred.
It simply makes no sense to load all of the page images if the visitor just clicks somewhere at the top and goes to another page, does it?
That's why there is lazy loading or deferred loading of images Google recommends you implement. So the image files are not loaded unless users start scrolling. It helps to improve your PSI score and user experience correspondingly.
How to Fix "Defer Offscreen Images"?
As it follows from the reasons why "Defer Offscreen Images" appears in PSI, to solve this notice you have to implement lazy loading for your store.
You could go the "hard" way and add the corresponding attribute to the HTML code of the "below the fold" images:
<img src="https://yourwebsite.com/images/image-title.jpg" alt="Image Alt Tag" style="width:100%" loading="lazy">
But note it doesn't work for older browsers or any version of Safari which is one of the reasons this method is not widely used.
The other reason why this method is neglected is there are great tools like Magento 2 Image Lazy Load that solve this automatically. All you need is to choose to lazy load ALL blocks or define some Lazy Load Block to ignore. The module will cover the rest.
It's worth a try to fix the "Defer Offscreen Images" issue on your Magento website.
However, that won't ultimately take your Google Page Speed Insights score to the green zone. There are other image optimization steps you have to take to make sure they don't cause a delay in your store loading.
