How to fix defer offscreen images

Save the bandwidth, and speed up the page rendering by avoiding loading images that aren't visible to the user.

The browser loads all the files necessary for the page to render the site as you expect. This implies that all items, including those images that aren’t visible and haven’t got the lazy loading technique, will be requested.

If all of your images are attempting to load at the same time this can cause loading performance issues:

• The event onload attached to the window the global object will be called with a long delay because of waiting to load all dependent resources such as stylesheets and images.
• Browsers limit the number of HTTP connections with the same domain name (usually between 2 and 8) at the same time. Opening too many HTTP requests for images slows down loading them.
• More bandwidth will be required from the website visitors to see your page.

Fixing defer offscreen images: The ultimate solution

To fix the issue add loading="lazy" attribute to the image:

<img loading="lazy" src="example.webp" alt="Alternative image description" width="600" height="600" />

Additionally, you may consider using an attribute fetchpriority="high" to your Largest Contentful Paint (LCP) image to get it to load sooner:

<img src="example.webp" fetchpriority="high" alt="Alternative image description" width="600" height="600" />

Note that if no dimensions are specified for the image, or if the image needs to be resized (too big or too small), the browser will require a reflow and repaint once the image is downloaded. To prevent reflows, when possible specify the width and height of all images, either in the image HTML element or in CSS.

Determining loaded and rendered images outside the viewport: An automatic approach

To help determine images that are loaded and rendered outside of the visible part SiteLint Platform has the rule invisible-image-loaded.