Skip to content
Learn Measure Blog Case studies About
On this page
  • Stack-specific guidance
    • AMP
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Resources

Defer offscreen images

May 2, 2019 — Updated May 29, 2020
Available in: Español, 한국어, Português, Русский, English
Appears in: Performance audits
On this page
  • Stack-specific guidance
    • AMP
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Resources

The Opportunities section of your Lighthouse report lists all offscreen or hidden images in your page along with the potential savings in kibibytes (KiB). Consider lazy-loading these images after all critical resources have finished loading to lower Time to Interactive:

A screenshot of the Lighthouse Defer offscreen images audit

See also Lazy load offscreen images with lazysizes codelab.

Stack-specific guidance #

AMP #

Automatically lazy-load images with amp-img. See the Images guide.

Drupal #

Install a Drupal module that can lazy load images. Such modules provide the ability to defer any offscreen images to improve performance.

Joomla #

Install a lazy-load Joomla plugin that provides the ability to defer any offscreen images, or switch to a template that provides that functionality. Starting with Joomla 4.0, a dedicated lazy-loading plugin can be enabled by using the "Content - Lazy Loading Images" plugin. Also consider using an AMP plugin.

Magento #

Consider modifying your product and catalog templates to make use of the web platform's lazy loading feature.

WordPress #

Install a lazy-load WordPress plugin that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using the AMP plugin.

Resources #

  • Source code for Defer offscreen images audit
Last updated: May 29, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.