Optimising page performance (image) with intersection observer

Single page applications (SPA) has become increasingly mainstream. Thanks to those brilliant Javascript frameworks for making the web application greater and more advanced 👏🏼.

Right now, however, optimization of web page performance is critical. This is because the responsiveness of a page significantly impacts whether a customer will remain on a particular site or not.

Over the past few weeks, our team has been working hard to improve our website performance. Those beautiful but large images on our pages really slow down the page load and delay the meaningful paint time. So we thought of easily lazy loading them with a placeholder to remediate this problem.

The web indeed provides numerous solutions for lazy load images. But they do not support responsive images, placeholders with animation out of the box, and allowing the specification of an image distance threshold to be met before triggering the load. Hence, we decided to tackle this problem and contribute to the React community. ✍️ I would like to thanks Yusinto Ngadiman and Will Po for their wonderful efforts in contributing 🎩.

Introducing React Simple Img: A React component library makes images load on demand and super simple to set up with placeholders and animation. Here is a quick example code on how it works 😘.

import { SimpleImg } from 'react-lazyLoad-images';

export const App = () => <SimpleImg src="your image path" />;

You only need to use the SimpleImg component and the image will be lazy loaded with animation. 💥

This is what the placeholder part of react-simple-img achieves:

Super simple right!! I have also build a demo page, feel free to check it out here.

We now get a much faster meaningful paint time, which happens before the image is fully loaded even with a slow network connection. All images are lazy loaded with placeholders and animation. The page looks even more beautiful 👏👏👏

GIF

So, if you looking for a way to optimize your web page, why not give React Simple Img a quick try! If you find it useful leave me a star on the GitHub. It would definitely make my day. ❤️❤️❤️ Also, please feel free to leave a question in the comment section below too.

Finally, I really appreciate reading the blog. I hope you will find it useful. Let’s all make our web apps a better place to give a more desirable experience to our customers!