January 22, 2019
Jeffery Zhen
Recently, I came across a problem in a project where the loading of a page was throttled by the number of large components being initialized. The page hosted a large form which included many custom input fields, dropdowns, radio buttons, and checkboxes.
A study by Google states that:
53% of mobile site visits leave a page that takes longer than three seconds to load.
Clearly, an average time of 6 seconds for a page to load is incredibly poor user experience. I needed to increase the performance without sacrificing or removing all of the necessary input fields on the page.
react-infinite-scroller is a package that is usually used to implement infinite scroll pagination, with images being the most common use case. When you get to a certain threshold on the bottom of the page, it will make a request to fetch more images.
For my use case, I implemented it by using it to stagger the loading of components.
InfiniteScroller takes 3 arguments:
With this implementation, our load times for the page reduces drastically:
With an average time of 1.66 seconds versus the previous 5.90 seconds, that’s a 72% increase in speed!
The retention rate of new users is highly correlated to the loading speed of your webpage (especially on mobile devices). When you realize that 53% of visitors abandon a webpage if it takes over 3 seconds to load, performance becomes a top priority.
Lazy loading can be beneficial to your application if you have a large number of assets. If you are seeing poor performance on your application, consider staggering the loading of your assets or components as a possible solution.
