Defer Offscreen Images

Delay loading images that appear below-the-fold for faster rendering of above-the-fold page content.

Deferring off screen images means delaying loading of images that appear below-the-fold on the page. This ensures that above-the-fold content on the page renders faster. This how-to details how we can defer off-screen images in various situations:

Defer off-screen images on a regular website

If you have complete control over the page's HTML code, you can defer off-screen images through lazySizes Javascript library as explained below:

1. Download the lazysizes Javascript library from here. Once downloaded, include it in your page through following script tag:

<script src="lazysizes.min.js" async=""></script>

2. Within your HTML <img> tags:

<!--Use data-src. And, specify lazyload class -->
<img data-src="image.jpg" class="lazyload" />

The above change will ensure that the loading of image.jpg is deferred in case if it is offscreen else it will be loaded immediately. So, the above change shall be applied to all the images on the page. In case if you want to use this library with responsive images, webp images or in any other way, please refer this how-to.

Defer off-screen images on a Wordpress website:

If you seek defer loading of off-screen images on your wordpress website, a3 Lazy Load is the Wordpress Plugin of our choice. The plugin allows you to setup lazy loading within a few clicks with SEO friendly no-script tags, custom loaders, capability to lazy load videos, feature to exclude specific images, etc. The plugin has 100k+ installations with a rating of 4.4

Setting up a3 Lazy Load Wordpress Plugin
Setting up a3 Lazy Load Wordpress Plugin

Defer offscreen images on a Magento site:

If you seek to setup deferred loading of offscreen images for your Magento site, we recommend WeltPixel's lazy loading extension. Once installed and enabled from Magento admin, this extension works out of the box with Magente 2 product pages, search pages and listing pages. The extension is SEO friendly and can be used with custom images within the store as well.

Setting up WeltPixel Lazy Loading Magento Extension
Setting up WeltPixel Lazy Loading Magento Extension

Looking to improve your website's speed? Let Tezify team take care of your website's performance intricacies.