Optimising Web Page: A Simple Step with intersection observer

Bill Luo
Bill Luo
Feb 5, 2018 · 3 min read

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, 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:

without (left) and with react simple img (right)

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 👏👏👏

Web page under network throttle

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!

Thanks Will Po and Zahid Sumon for reviewing the blog article 👍


Pragmatic js dev

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store