What counts as a good INP score, and how do you fix a slow one?

Google treats an Interaction to Next Paint under 200ms as good. A global accommodation booking platform sitting at 380ms brought it down to 175ms by profiling long React commits in the Chrome DevTools Performance panel, code-splitting with React.lazy() and Suspense, debouncing scroll and resize handlers, and memoising expensive computations with React.memo() and useMemo.

Does Interaction to Next Paint affect Google rankings?

Yes. INP became a ranking signal in Google's March 2024 algorithm update, so a poor score puts organic reach at risk alongside user experience. A booking platform measuring 380ms was losing visitors during the delay on their first click, and those users went to competitors that answered their query faster and did not come back.

How much can code splitting reduce a React bundle size?

Dynamic imports with React.lazy() and Suspense cut the initial JavaScript payload by 60% on a global accommodation booking platform. That mattered because most of its traffic was mobile, where large bundles do the most damage. After the work, desktop performance reached 93% and mobile 90%.

Why does a browser recalculate page layout repeatedly?

Resizing a page forces the browser to recompute layout so content fits the new dimensions, and an unthrottled handler runs on every event in that stream. Debouncing scroll and resize handlers with a short delay stops the repeated recalculation, and using event delegation for clicks reduces the number of listeners the browser tracks.

What business results come from fixing front-end performance?

On a global accommodation booking platform, GA4 recorded bounce rate falling by 7% and average engagement per user rising by 30 seconds once INP dropped from 380ms to 175ms. Users described the interface as noticeably more responsive. The platform had been losing traffic to competitors specifically because its interface felt slow.

Faster INP & UX Wins for Global booking platform

Client Overview

The client is a global accommodation booking platform. They connect travellers with hotels, vacation rentals, and other lodging options. The platform handles millions of users, with peak usage during holiday seasons. The client has some significant competitors to whom they often lose traffic due to a slow interface.

TL;DR

We helped a global booking platform cut INP from 380ms to 175ms, reduce JavaScript by 60%, and boost mobile UX using React 18 and advanced performance profiling—resulting in lower bounce rates, higher engagement, and a faster, more competitive user experience.

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.

Technologies and Tools

Frontend Framework

React, React 18 (Concurrent Features)

Performance Analysis

Chrome DevTools Performance Panel, Lighthouse

State Management

Redux (with selector optimizations)

Routing

React Router (optimized with window.location)

Results

INP improved dramatically from 380ms to 175ms (well under Google's 200ms threshold).
Initial JavaScript payload reduced by 60%.
Eliminated unnecessary re-renders as shown in React profiler.
Desktop performance improved to 93%, and mobile performance improved to 90%.
User feedback indicated a noticeably more responsive interface.
According to GA4 reports, the bounce rate reduced by 7% and the average engagement rate per user increased by 30 seconds.

Words of Appreciation

"We knew the site felt slow but not why, and we had been losing traffic to competitors because of it. The work was diagnostic before it was anything else — the team profiled the actual bottlenecks rather than guessing, and the interaction delay on first click went from something users abandoned to something they did not notice. Our engagement numbers moved within weeks of release."

CTO

Future Scalability

We have made some significant architectural changes to our system. These changes enable us to monitor and improve our performance continually. It makes sure that our application always runs smoothly and efficiently.

Our new architecture also includes scalable code-splitting, which means we can add new features as our project grows. It also allows us to provide a more dynamic experience for users.

We have also created a well-organized component structure, which makes it much easier for our team to work together, encouraging creativity and efficiency. Finally, we've made enhancements at the framework level. These improvements not only enhance our current capabilities but also prepare us for future React updates.

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

Industry

Core Technologies