Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Offscreen Images

Why the audit is important

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.

How to pass the audit

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.

How the audit is implemented

This section explains how this audit is implemented, so that you can understand how the audit's score is calculated.

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

Feedback