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
Other plugins that also support lazy loading:
- 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>
- 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
<div class=”bg-stage lazyload”>
<!– content –>
<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