Defer Offscreen Images


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





What it means?

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. Read on here if you want to use this library with responsive images or WebP images or both.



To ensure that the deferred off-screen images are indexed by search engine, check-out 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


Defer offscreen images on Shopify Site:

To defer loading of offscreen images in your Shopify site, you will have to modify your Theme (theme.liquid file) to leverage the lazySizes library. Here’s how:

1. Download the lazysizes Javascript library from here and upload it to your theme’s /assets folder.

2. Add the following lines to your theme.liquid just before the </head> tag:

<script src=“{{ ‘lazysizes.min.js’ | asset_url }}” async=“async”></script>

3. Change the image tags in your theme by adding class “lazyload” to the image tags and changing the src attribute to data-src attribute:


{% for img in product.images %}
 {% assign img_url = img | img_url: ‘1x1’ | replace: ‘1x1.‘, ‘{width}x.’ %}
 <img class=“lazyload”
 src=“{{ img | img_url: ‘300x’ }}”
 data-src=“{{ img_url }}”
 data-widths=”[720, 1080]”
 data-aspectratio=“{{ img.aspect_ratio }}”
 data-sizes=“auto”>
{% endfor %}



Defer offscreen images on React Web App:

To defer loading of offscreen images (or any offscreen component, for that matter) in your React SPA, react-lazy-load-image-component is our recommended package (npm, github). At 5 kB gzipped & minified, this is a lightweight solution to achieve the desired lazy loading. It provides you with a LazyLoadImage component that you can used instead of the regular image component. This ensures that the image file is downloaded only when the component is in the user’s viewport:


import { LazyLoadImage } from ‘react-lazy-load-image-component’
.
.
.
render() {
    …
    return (
        ……
        <LazyLoadImage
          alt=“provide your alt text here”
          height=“specify image height”
          src=“specify img src path here”
          width=“specify image width” />
        );
      }



The component also comes with a bunch of other options to execute code before or after rendering component, have a placeholder element for the image, etc.




Didn't find what you are looking for?

Just let us know what you are looking for & we'll add it to the article soon: