[Solved] Defer offscreen images [100% Working Solutions ]

Lazy Load Images: Implement a lazy loading technique on your website, which defers the loading of offscreen images until they are about to come into the user's view. This helps to prioritize the loading of visible content and improves the initial page load time. There are several lazy loading plugins and libraries available for different platforms that you can integrate into your website.

2. Use "loading" Attribute: Utilize the "loading" attribute for your image tags. Setting the "loading" attribute to "lazy" instructs the browser to defer the loading of images that are offscreen, improving the page's loading speed. For example:

  `<img src="image.jpg" loading="lazy">`. 

Or Paste this code in theme.liquid file

<script type=”text/javascript”>
var yourImg = document.querySelectorAll("img");  
for (var i = 1; i < yourImg.length; i++) 
{   
yourImg[i].setAttribute("loading", "lazy");  
}
</script>

Optimize and Compress Images: Ensure that your images are properly optimized and compressed for the web. Use image optimization tools or plugins to reduce the file size of your images without significantly compromising their quality. This reduces the overall page size and helps in faster loading.

Implement Responsive Images: Serve appropriately sized images based on the device's viewport. Use responsive design techniques and HTML/CSS media queries to deliver the correct image sizes for different screen sizes. This prevents unnecessary large image downloads on smaller devices and improves performance.

Consider Content Delivery Networks (CDNs): Utilize a content delivery network (CDN) to distribute your images across multiple servers located in different geographic locations. CDNs help deliver images faster by serving them from the nearest server to the user's location, reducing latency and improving overall page load times. By implementing these techniques, you can defer the loading of offscreen images, prioritize the loading of visible content, and enhance the performance of your website according to PageSpeed Insights and GTmetrix recommendations.