Native HTML lazyload in React

The users of your React ecommerce love a speedy experience. One key aspect of ensuring great speed is to load the data the users need when they need it. Lazy loading is a must-have tool in your developer tool belt since it enables you to do just that, elegantly loading the images from your Product Information Management just when the users want to see it.

Embedding an image on an HTML page is straightforward:

<img src=”image.webp” />

If you want to show multiple images, you simply do multiple image tags:

<img src=”image1.webp” />
<img src=”image2.webp” />
<img src=”image3.webp” />
<img src=”image4.webp” />

Now, what is the problem with this approach? It might not be apparent by looking at those lines of HTML, and it has to do with how web browsers render that HTML on the screen and how quickly it is able to do that.

With every image, there is a download cost. The browser picks up all the image tags on the page and downloads them when the page loads. This is the core of the problem. The page-load is the most critical time during a user session. A lot of things are happening at the same time, and all assets are fighting for bandwidth and CPU time.

The more images, the more bandwidth and CPU time they take, delaying the loading of other assets on the page, like videos, fonts, and scripts, essentially blocking major parts of the user journey for all between sub-seconds to minutes.

This might not be a big problem for the code above, but what if you had 400 images instead of 4? In that case, you have a real problem on your hands.

The solution is quite simple. A “loading” attribute is now available for images, which leaves the browser in charge of when to download it.

Here’s how you do it:

<img src=”image.webp” loading=”lazy” />

The image will be loaded when the browser sees it fit, typically when the user has scrolled near to the image. Fantastic! In the latest version of Chrome, an image is now downloaded if it’s 1250px near the viewport edge, giving the browser enough time to download the image before the user has scrolled to it.

The downside of this is that since the browser has not downloaded the image, it will take up no space in the layout, rendered as width=0, height=0. To compensate for that, you have to provide the height and width values:

<img src=”image.webp” loading=”lazy” width="100" height="100" />

This will ensure that the space of the image is reserved and you’ll not get any layout shifts when the browser decides to download the image.

Once the browser determines that your image is ready to be download, this must happen fast. Make sure to use a Content Delivery Network (CDN) or a platform that offers that as part of its service.

You get this out-of-the-box for all your media assets, i.e., images and videos, if you're using Crystallize.

Oh, and if you’re using our react-image module, you pass the loading attribute the same way as you would for a regular img tag:

import { Image } from '@crystallize/react-image';

export const LazyImage = (crystallizeImage) => <Image {...crystallizeImage} loading="lazy" />

Most of the images on any webpage should have loading=lazy by default. Only critical, above-the-fold, images should be loaded at once, and the browser will take care of the heavy lifting for you.

For further details and how to use this feature check out Browser Level Image Lazy Loading article from web.dev.

BTW CDN support for your media is just one of the features you get with Crystallize. Schedule a 1-on-1 demo so we can show you what else you get out of the box with Crystallize and how can we help you future-proof and grow your business.