Right now, however, optimisation 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 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 😘.
You only need to run the
initSimpleImg() once at your app or client level and your entire app’s
<SimpleImg /> will be lazy loaded with animation 💥
This is what the placeholder part of react simple img achieves:
Super simple right!!
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 👏👏👏
So, if you looking for a way to optimise 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 question in the comment section below too.
Finally, I really appreciate for 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!