Defer offscreen images
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:
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.