Reporting this issue means that at least one internal URL on your site contains images that are fully getting by the browser, even if they are not displayed in the user’s viewing area. In other words, without lazy loading instructions set for these images.
What Does “Defer Offscreen Images” Mean?
Defer offscreen image is a process that allows you to avoid wasting resources and page load speed on loading JavaScript content that is out of the user’s line of sight.
The lazy method is a set of website and app design tools that allow you to delay getting content on a page until later. When the user reaches that content, that’s when the content is filled. This method effectively improves page performance as well as optimizes resources.
Learn more about deferring offscreen images in this article:
https://web.dev/offscreen-images/
hat triggers this issue?
This tip will be triggered during a site scan for any internal URL that contains images that do not load with lazysizes format. You will get a notification that you could use the lazy loading method to reduce page resource consumption and speed up the site.
How to check the issue?
To check which of the images on the pages of your site are not loading with delayed loading, use crawlers or other services to find errors on the site. In the report, after the scan is complete, you will find a list of all the internal pages that contain this error.
Detect not only offscreen images but also other kind of technical issue on your site!
Crawl your site and find out all kind of issues that can hart your users or your website SEO.
Remember, if you’re not using rocket loading, that means your site is loading slower than it potentially could be. Watch this video by Moz to easily find out what other factors affect content loading speed on site pages.
Why is this important?
When a user opens a page with no deferring image filling method configured, loading all the content increases. Therefore, the later the user will be able to interact with the page. Use the lazy loading method to reduce the time it takes to load content on the page and not load images in the user’s React browser viewing window.
How to fix the issue?
To solve the issue of slow page loading, you can use the delayed image loading method plugin in WP. It ensures that the mobile or desktop browser loads only the user’s content to see in the browser’s viewing area. Use the lazy method of images after all necessary resources and scripts have finished loading.
There are several ways to implement lazy loading. You can choose the best way based on the platform (like plugins in WordPress, Joomla, Shopify, or Magento 2) your site is running on. Consult with your developers to do it.
