How To Defer Offscreen Images On Your WordPress Website

Authored By: James LePage
Published On: May 11, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

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.

What Your IMG HTML Would Look LikeThe JS That Enables Lazy Load
<imgsrc="1x1.gif" class="lazy" data-src="real-image.jpg" alt="Laziness"width="300px" />var lazy = document.getElementsByClassName('lazy');
for(var i=0; i<lazy.length; i++){ lazy[i].src = lazy[i].getAttribute('data-src');}

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.

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.