Let us look at the error Magento error Defer Offscreen Images. With the support of our Magento support services at Bobcares we will give you a complete guide on the error. And we will also learn how to speed up Magento by managing the error.

Error: Magento error Defer Offscreen Images

That is not a secret. Not only does website speed affect user experience, but it is also one of the most crucial SEO ranking elements. As a result, we must continually analyze website speed using various tools to identify the issues slowing down the Magento 2 store.

Google PageSpeed Insights, or PSI for short, is the most well-known tool. It passes the URL via Google’s servers and returns a report on the website’s performance.

What is “Defer Offscreen Images” Message?

In Google PageSpeed Insights, the notice “Defer Offscreen Images” displays all pictures that should be lazily loaded on the requested URL. It also illustrates the possible space reduction by lazily loading these photos. Google’s comprehensive explanation is as follows:

When a website visitor opens it, the page is divided into two sections: above the fold (ATF) and below the fold (BTF). The former refers to the area displayed on the screen in PSI snapshots that Googlebots provide us. In other terms, it is the region visible to visitors.

The latter then refers to the region that was not visible during the first loading or everything that appeared after we began scrolling over the website.

All of the page images are loaded before the page is displayed if lazy loading is not used. That creates a delay, especially when loading a category or product page with several photographs.

That’s why Google’s “Defer Offscreen Pictures” warning recommends loading the media files viewable just above the fold first and then lazily loading the rest of them.

Loading all of the photos at once will not be an issue in this situation because just those within the viewport will be loaded initially.

It is also worth noting that the “Defer Offscreen Pictures” errors emerge more frequently on mobile websites than on desktop websites. It is critical since the mobile experience is highly dependant on loading speed, and mobile consumers may not be prepared to wait for a page to render for that long.

What are the Reasons for the “Defer Offscreen Images”? 

The major reason why the Google Page Performance Insights “Defer Offscreen Pictures” notice arises is because we don’t utilize image lazy loading at all on the shop.

It is obvious that we should load all of the page assets before allowing people to view it, but this is not explicitly stated. As previously said, as long as we load all of the critical components into the viewport, the remainder of the assets may be delayed.

That is why Google advises you use lazy loading or postponed loading of pictures. As a result, the picture files are not loaded until the user begins scrolling. It contributes to an increase in your PSI score and user experience.

How to Fix “Defer Offscreen Images”?

As a result of the reasons why “Defer Offscreen Pictures” displays in PSI, we must implement lazy loading for the shop. This step is done to resolve this notification.

We might take the “hard” route and add the following property to the HTML code of the photos “below the fold”:

<img src="https://yourwebsite.com/images/image-title.jpg" alt="Image Alt Tag" style="width:100%" loading="lazy">

Nevertheless, it should be noted that it does not function for older browsers or any version of Safari. This is one of the reasons why this approach is not generally utilized.

Another reason this approach is underutilized is because there are technologies. These tech include Magento 2 Image Lazy Load. The tech can handle this automatically. All we need to do now is specify the Lazy Load Block. And after this the module will take care of the rest.

It is worthwhile to attempt to resolve the “Defer Offscreen Pictures” issue on the Magento website.

Nevertheless, this will not result in a Google Page Speed Insights score in the green zone.

[Need assistance with similar queries? We are here to help]

Conclusion

To sum up we have now seen how to manage the error Magento error Defer Offscreen Images. With the support of our Magento support services we have seen how to remove the error. And we have also seen how it helps boost the Magento performance.