The React-Powered Turnaround Story of a Global Accommodation Booking Platform

Challenges

When the client connected with us, they mentioned that the slow and outdated interface is the primary reason they are losing users. But we knew that the slow UI is a symptom, not a cause.

We ran a thorough audit of the site, and we identified the following issues behind it:

Analyzing Google's Page Speed Insights report, we identified that the Interaction to Next Paint (INP) score was 380ms. Compared to Google's good threshold of 200ms, it was inferior.

The same INP issue was also a threat to the platform's organic reach on Google, as it became one of the ranking factors according to Google's algorithm update in March 2024.

A significant delay in interaction during the crucial initial click was affecting the user experience. Users seemed to jump to another site while it was loading, and they never returned as the other sites answered their concerns.

When the layout of a web page was being resized, the browser repeatedly recalculated the layout to ensure it was optimized for the new size. It led to unnecessary and repeated updates of the page content, disrupting the user experience and causing performance issues.

The majority of the client's platform users are mobile users. Mobile performance was greatly affected by large JavaScript bundle sizes.

Solutions

Our project manager assembled a team with diverse skill sets to address the issues effectively and give the client a competitive edge over their competitors.

The team dealt with the issue one after the other:

Performance Profiling and Analysis:

• Our team implemented Chrome DevTools Performance panel and Lighthouse to identify bottlenecks.
• Sr. Developers analyzed long React commits to pinpoint performance issues on the platform.

Code Optimization Strategies:

• We implemented dynamic imports with React.lazy() and Suspense for code splitting.
• Then, a developer applied debouncing with delays to the scroll and resize handlers.
• Later, we optimized click handlers using event delegation patterns.
• For expensive computations, we used React.memo() and useMemo hook strategically.

React 18 Upgrade

• To leverage the latest features, Lucent Innovation's React.js developer leveraged the concurrent rendering capabilities of React 18. The team could have gone with React 19, but considering the client's requirements, React 18 was more suitable.
• Later, we implemented yielding to the main thread between operations to break up long tasks into short tasks.

Once all possible issues related to slow speed and user loss were addressed, our QA expert audited the entire site. We were now confident with the bug-free platform, waiting for the users to come and experience the improved performance.

The client shared the results with us after a month, and he seemed very happy with the results he had achieved, including the increased traffic and sales. For regular maintenance and quick fixes, they hired one senior and one junior developer dedicated to working on their platform.