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 is the Problem ?
To fix this issue we need to understand that 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 gonna 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.