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?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
