Offscreen Images

Overview

Offscreen images are images that appear below the fold. Since users can't
see offscreen images when they load a page, there's no reason to download the
offscreen images as part of the initial page load. In other words, deferring the
load of offscreen images can speed up page load time and time to interactive.

Recommendations

To pass this audit, refactor your pages to only download above-the-fold images
during the initial request. Applying this strategy to your JS, HTML, CSS, and
other resources can also speed up page load time. See Critical Rendering
Path to learn more.

Consider using an IntersectionObserver to intelligently determine when to
lazy-load offscreen images. For example, suppose you have some images at the
bottom of a very long page. With an IntersectionObserver, you can load the
images only when the user has scrolled halfway down the page. See Intersect
all the things! for more on this approach.

If you do use an IntersectionObserver, make sure to include the
polyfill, because native browser support is limited.

More information

Lighthouse flags offscreen images that were requested before the
Time To Interactive (TTI) event.

Feedback

Was this page helpful?

Great! Thank you for the feedback.
Sorry to hear that. Please open an
issue and tell us how we can improve.