How to fix Defer Offscreen Images in Pagespeed Insights

Defer offscreen images is one of the most common recommendations.
If you’re a Developer, SEO then you might be familiar with pagespeed insights.

If you’re new to this Topic, Pagespeed insights is a Metrix developed by Google to analyse a webpage performance based on various factors.

Defer offscreen images, What does it mean ?

Defer offscreen images simply means to load images on a page only when they enters the viewport ( Screen ). This improves the page speed and user experience.

How it looks like

how to load images on scroll

So what the Problem is ?

To fix this issue we need to understand how a page is loaded. A typical webpage loads the DOM, Scripts, Styles, Content, and Images in the order they are written in code. But images are responsible for most of the page weight. So, instead of loading all the images at once, why don’t we load images only when they enter the visible area (viewport).

How to fix it ?

We are going to use lazysizes library for this purpose.

#1 WordPress Website

optimize wordpress website

If you’re having a wordpress website like most of the bloggers out there, it’s cool.

Lazysizes plugin for wordpress

All you need to do is to install the plugin called lazysizes and activate it.

#2 HTML Website

Step 1 : Include the lazysizes library

<script src=”https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes.min.js” ></script>

Add it in the <head> of your HTML

Step 2 : Replace src in the <img> tag with data-src and add class=”lazyload” .

<img src=”flower.jpg”>

Before

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

After

Live Demo

That’s all you can check results in Chrome Dev Tools that images are now loading on scroll

Conclusion

Images account for more than 60% of entire page weight. Normally, all the images in a page load with the rest resources. Images that are not in the viewport are called offscreen images. To improve Pagespeed we should images only when they enter the viewport.

Did we missed Anything ?

we have fixed defer offscreen images issue

Let us know in the comment section if there is something that is missing.

Reference Links

https://iamsteve.me/blog/entry/nice-and-easy-lazy-loading-with-lazysizes-js

https://web.dev/fast/use-lazysizes-to-lazyload-images

https://www.isitwp.com/change-image-src-to-data-src-for-lazy-load-using-image_send_to_editor-filter/

Add a Comment

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