What Is It?

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

Why Does It Display?

Google will display these suggestions for every single image that is not above the fold, but still loaded when the page loads. This is because implementing a lazy loading solution is super easy,  and doesn't load images until the required which causes less data saving both network payloads and page loading times.

How Do You Fix It?

Fixing this audit is as simple as introducing a lazy loading image solution to your website. You can do this manually, which we’ll introduce to you so you can understand how a lazy loading actually works, but WordPress has dozens of plug-in solutions that do this automatically, with no trade-offs.

You can manually lazy load images with JavaScript:

• Prevent image loading during page load: When you specify the URL or path of the image in the src attribute of the <img> tag, the image will be downloaded by the browser during page load. To prevent the browser from downloading the image, you need to specify the location of the image in the data-src attribute of the <img> tag instead.
• Register event handler functions in JavaScript to check for elements on two events: loading and scrolling.
• When an element comes into the viewport, load the value of the data-src element into the src element, which triggers the browser to load the image.

An awesome plug-in solution that includes the lazy loading functionality is called the Ewww Image Optimization plugin. It includes a suite of tools designed to completely optimize your images in multiple ways. We'll be recommending this plugin for multiple audits in this book, because it's so versatile. 

You can turn on image lazy loading by navigating to the plugin setting section, going to the “Easy Eode” tab and checking “Lazy Load”.

Recently, WordPress announced an update that should make this audit category very rare for WordPress sites. Promised for version 5.4 (though it looks like it didn't make it), a WordPress core committer and developer programs engineer at Google stated the CMS was attempting to natively include lazy loading for all images. Once this feature is shipped, you probably won't even need to install a plugin to fix this audit.