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
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
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.
Step 2 : Replace src in the <img> tag with data-src and add class=”lazyload” .
<img data-src=”flower.jpg” class=”lazyload”>
That’s all you can check results in Chrome Dev Tools that images are now loading on scroll
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 ?
Let us know in the comment section if there is something that is missing.