isotropic-2022
Share
Blog
Search
Menu

How To Defer Offscreen Images On Your WordPress Website

By James LePage
 on May 11, 2020
Last modified on January 6th, 2022

How To Defer Offscreen Images On Your WordPress Website

By James LePage
 on May 11, 2020
Last modified on January 6th, 2022

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty