Defer offscreen images
This means that the URL contains images that are fully loaded by the browser even though they are not visible in the user's viewport.
Why is this important?
When a browser loads a page, it will load in all page resources (that are not deferred), including images that are only visible to the user once they scroll down the page. This means that the browser spends time during the initial render downloading images that are not necessary to download right away, which increases the Time to Interactive (the amount of time it takes for the page to become fully interactive).
What does the Hint check?
This Hint will trigger for any internal URL that contains offscreen or hidden images which are not lazy-loaded.
How do you resolve this issue?
You can resolve this issue by lazy-loading images which appear below-the-fold, which ensures that the browser only loads in the images that are actually needed for display in the viewport. In order to lower Time to Interactive, implement lazy-loading for these images after all critical resources have finished loading.
There are multiple different ways to implement lazy-loading, so you should work with your developer to understand the most appropriate one for the website you are dealing with.
Further Reading
- Defer offscreen images (Lighthouse documentation)
- The Complete Guide to Lazy Loading Images
- Tips for rolling your own lazy loading