Wow customers with a React based user experience to boost revenue

Enhancing user experience is not just about aesthetics; it directly correlates with improved business outcomes. A React-based Single Page Application (SPA) offers a distinct advantage over traditional websites by providing a seamless dynamic user interface without constant page reloads. This improvement in site performance, a crucial aspect of user experience, has been shown to significantly impact business metrics such as conversion rates and revenue. To vividly illustrate this point, we put together the following video comparing a typical user journey. On the left is the traditional site, on the right is a React-based SPA. We hope this illustrates how a better user experience can make website visits more enjoyable and profitable.

Site Speed Means Business

We all know that site performance impacts business results. There are countless reports about the relationship between speed and revenue. An analysis by Portent in 2023 found that “A site that loads in 1 second has an e-commerce conversion rate 2.5x higher than a site that loads in 5 seconds.” The still relevant 2020 Deloitte study found an 8.4% increase in conversion from just a 0.1 second improvement in site speed. By running an A/B test specifically focused on optimizing Web Vitals, Vodafone found in 2021 that a 31% improvement in largest contentful paint (LCP) led to 8% more sales.

But what does increased speed look like? We set out to show this by recording the same shopping journey on two differently architected sites. In the video on the left is the traditional web application. On the right, the React-based single page application. The journey incorporates some standard ecommerce tasks: browse, search, add to cart. We used Chrome’s mobile emulation mode to simulate a phone user – 4G connection, and a slightly slower processor, which helps to highlight some of the differences (Who can notice a 0.1 second difference?).

Breaking down the video

As you watch the video look for these key moments:

• Product listing: the left appears to still be loading images.  The right side is already scrolling!
• Product detail: the right is almost immediately interactive, and the shopper is looking at multiple images. On the left, still waiting for more than just the first image.
• The cart page: the SPA on the right is immediately viewable and the shopper can see their basket details, but the left side is again waiting!

React architecture explained

But why is the React-based experience faster? After the first page load, React is built to only update what needs changing based on user actions. Using a virtual DOM, React can quickly determine the minimal set of changes needed when the application state changes, and update the real DOM in the most efficient way. This means that while navigating from the home page to the product listing, React doesn’t rebuild the header and footer. Instead, it makes an API call to get data, and updates the body of the page to show the product listing. A traditional web app reloads the entire page – header and footer too, which makes for more data transfer and rendering time.

Our example site, based on Salesforce’s Composable Storefront, is built as a Progressive Web Application (PWA). This is an additional optimization that uses a service worker to minimize and cache data exchanged with the server, as well as using the minimal set of HTML, CSS, and JavaScript required to power the user interface.

How do you get there from here?

If you’ve read this far, you definitely have the site on the left and want the one on the right! RSM can help you there. We have a Hybrid Upgrade that can help you leverage a React-based storefront one step at a time and start seeing immediate gains. You can put those gains back into migrating the rest of your site. Contact us today to join the other retailers who have already seen a 29% increase in conversion by moving to Salesforce Commerce Cloud’s Composable Storefront!

Lawrence Walters

Lawrence Walters leads the Salesforce Commerce Cloud practice helping retailers achieve digital commerce success through faster growth, improved omnichannel experiences, international expansion and streamlined digital marketing operations on the leading cloud based ecommerce platform for medium to large retailers. RSM’s practice provides both implementations for clients new to the platform as well as consulting and managed services for those already on Salesforce Commerce Cloud.