Deferring Offscreen Images in Google Search Console & Core Vitals

If you have a WordPress website, you would know making a website fast is one of the prime goals for ranking higher on google. Excellent performance and relevant products visually are the key to engage users and infatuate them to visit sites again and again. Unfortunately, various roadblocks cause the site to slow down and hinder its performance. Tools like Google Speed Insight and Lighthouse revealed these metrics and provided the best possible solutions to improve your site performance. If you check your WordPress site in Google Speed Insight, you will see a warning “Defer Offscreen Images”. 

Do you know you can defer offscreen images on WordPress sites to improve site speed and ranking? In this post, you will learn what deferring offscreen images is, how to defer offscreen images in WordPress by lazy loading, and how it affects your site performance and credibility. 

What is Deferring Offscreen Images? 

Defer offscreen images refer to the method to delay the loading of the images that are not visible in users viewport until they are needed. By doing this, the browser will focus on the loading of what is necessary, making the website faster. 

When a visitor visits your webpage, their browser downloads all the images present on the page, even the ones that are not visible in the viewport, making the rendering process slower than normal. So if you have a lot of images, it takes even more time to render the page. That’s why we use the deferring offscreen images to increase this rendering process in the viewport. 

When you defer the offscreen images, the browser will download only those images that are visible immediately to the user. It will download the offscreen images only when the user scrolls to them. This makes your website render faster and helps provide a better user experience. 

Note: It is important to note that it is not only images that you can defer; there are many other assets on your site that you can defer to increase the speed, performance and much more. 

Why care about Deferring Images, and what happens if you ignore the issue?

Since images are one of the largest sources on your site and take a long time to download, deferring offscreen images can dramatically increase your site speed, SEO, and user experience. It ensures the images download only when they are needed, reducing the bandwidth. It lightens the page dramatically and creates fewer DOM elements. When visitors hits your page, they begin to interact with the page even when the page is still downloading. They immediately show the images present at the top of the page while the bottom images are still downloading. 

Deferring offscreen images is not like compressing images or the web page size. If you have a web page of 5 MB, it will remain the same size with or without deferring. Instead, it will improve how faster the visitor perceives content or images on your site. It renders faster, which is enough to keep the visitor engaged on your site. Moreover, we know that Google ranks the site higher that are faster and provide a better user experience. By rendering offscreen images, you can improve your site SEO and rank higher at Google. If you are not deferring images on your website, your site will load slower, and it is more likely you will lose visitors and rank lower on Google. 

How to Defer offscreen Images?

Now you have seen how essential it is to defer offscreen images if you want your site to perform faster, rank higher on google, and provide a better user experience. It’s time to learn how you can defer offscreen images on your WordPress site. 

The simplest strategy to defer offscreen images is by lazy loading. Lazy loading ensures that your site downloads images only when needed, making your site run faster. Once you start to lazy load images on the site, you will see the “Defer Offscreen Images” will disappear from speed testing tools. It is a simple and straightforward process that takes only a few minutes and steps. Below we provide a complete breakdown that’ll surely help you. 

Using a Plugin

It is the easiest way to defer offscreen images on WordPress, as there are many plugins available that work perfectly without touching the code. A3 Lazy Load is the best choice plugin with millions of installations. It allows you to set up lazy loading in a few clicks without making any changes in the javascript library. What is incredible about this plugin provides SEO-friendly script tags, the capability to lazy load images & assets, and features to exclude specific images. There are some other plugins also available that work fantastic and provide a good user experience. 

Other plugins that also support lazy loading:

Using Javascript Library

If you are working on a regular site, you can defer offscreen images with or without javascript. You can download a javascript library to help, as there are many options available. Lazysizes javascript library is best in its jobs. Here is a quick guide to get started. 

  1. Download the lazysizes library from the source and add it to your page via the code given below. 

<script src=”lazysizes.min.js” async=””></script>

  1. Next add the class=”lazyload” to all images and change the src attribute to data-src.

<img data-src=”image.jpg” class=”lazyload” />

Deferring Background Images

There are many background images surely you want to defer. For doing this, you will use the similar above technique but with a CSS identifier to target the image. Here is an example

<style>

.bg-stage.lazyload {

background-image: url(lazyloaded-bg.jpg);

}

</style>

<div class=”bg-stage lazyload”>

    <!– content –>

</div>

Without JAvascript

If you don’t want to work with a javascript library, no problem. Thanks to native lazy loading, that allows you to defer offscreen images without javascript. All you need is to add a loading=” lazy” attribute to your img tag. 

<img src=”image.jpg” loading=”lazy” />

This will ensure the deferring of the images when they are offscreen, reducing the time to render a webpage, providing a better user experience. 

The Bottom Line

Deferring Offscreen Images is an easy and fast strategy to boost site speed. It is pretty simple and easy to start deferring images. There are many javascript libraries and plugins available to help you in work. So which method you use is entirely dampened how you feel comfortable. You can also trigger deferring without using a plugin or javascript library. So when you have so many options, why delay. Defer offscreen images on your site from today and take your site to a whole new level. 

Leave a Comment

Your email address will not be published. Required fields are marked *