Product

Store Framework: How VTEX optimized store performance with React

Rodrigo Affonso
Rodrigo Affonso June 8, 2020
Store Framework: How VTEX optimized store performance with React

The challenge of improving ecommerce performance is not simple. Losing sales due to a slow website is one of the nightmares of any online store. That is why optimizing performance and page load times is a top priority at VTEX – and we’ve achieved it with Store Framework and React. 

This article is not a success script for improving performance, but a report that shows a bold path towards innovation. A path that included hits, misses, tests and improvements, but that already drives impact in our clients’ lives.

Why is performance important for ecommerce?

Performance is a critical factor for ecommerce success. According to Radware, 20% of the customers abandon their shopping carts due to low website speed. In addition, page load time and SEO ranking are intimately related. Therefore, developers from all over the world work hard in order to optimize their websites.

From simple methods to extremely complex tools, there are many ways to deal with performance issues: reducing image sizes, reducing the number of HTTP requests and storing as much data as possible in the cache are excellent ways to manage this. But VTEX decided to go beyond:

Performance in VTEX Stores: going beyond with Store Framework and React

Our developers work tirelessly looking for ways to deal with the need for performance optimization. In the case of Store Framework, our solution for store implementation, which is based on pre-built React components, the answer was React Partial Hydration, an innovative method to manage the load time of non-static components, such as a carousel.

If you are wondering “What is React?”, don’t worry, I will explain: React is a JavaScript library created by Facebook for front-end design and it is the base for many websites, such as Netflix, Walmart and Airbnb. At VTEX, it is the basis of our admin’s components and now also of Store Framework.

Imagine you access a webpage that has interactive elements like a carousel. As a dynamic element, the carousel requires that the data associated with it be downloaded so that we can see it. But it is not possible to download only the carousel’s code; all the content on the page must be downloaded, and it causes slowness. React Partial Hydration comes in this context, allowing only the necessary content to be downloaded.

In technical terms, when a page built using React is accessed, the JavaScript code in each component needs to be executed to return an HTML element. To do this, we use Server Side Rendering (SSR), a process in which the JavaScript and CSS components of a page are rendered on the server in a static way instead of being loaded in the browser (client-side). This process reduces the page load time, allowing users to have access to that content almost instantly. 

The only problem with SSR is that it returns only static components — the content becomes dynamic on the client-side through a process called Hydration. But it is all or nothing: all the code in the page is downloaded and executed in the client-side, which causes slowness in page load time. 

This is the problem that Partial Hydration solves. Using this method, we are able to download and execute only the parts of the code that are necessary — in this case, the content users see, above the page scroll. Below the scroll, the components are loaded on-demand, which means that they are downloaded and executed only when visitors scroll down. So, by downloading only the necessary code, we manage to reduce page load time.

In this example, the code of the  ProductSummary component is not loaded at first, when it is below the page scroll. Only when the user scrolls down it is downloaded and executed.

A new paradigm to development and business teams

Lucas Bebber, the developer who has been leading the performance front in VTEX’s product team, highlights that this change is a new paradigm in the use of React. He also told us a little more about the technology associated with Partial Hydration:

Why was React chosen to build stores in Store framework?

“React is very popular in the tech industry, but not exactly for performance reasons. At VTEX, we chose it because with it we are able to componentize our code very well. It allows us to create independent and upgradeable components. And with Partial Hydration we found the best of both worlds: having React components while keeping server-side rendering and downloading only the non-static components.”

If Partial Hydration is so prominent, why is it used by so few companies around the world?

“It is possible that companies apply Partial Hydration for internal products but, as a platform tool, indeed, few of them use it. One of the reasons for this is that React itself only works with rendering, it does not take care of downloading assets, which would be necessary to take better advantage of this technique. Therefore, to do Partial Hydration, the company needs full control of the stack, a platform that takes care of both the back-end and the front-end. This is one of VTEX IO’s differentials.”

The results of using Store Framework and React technologies

At VTEX, the idea of using Partial Hydration came up was and implemented in the last 4 months, and we still plan to develop it further. In the future, we will evolve to reduce even more the need to download and execute assets in the client-side: static components will no longer be downloaded. Also, there are other performance improvements in progress, such as the optimization of CSS customizations. 

We recognize that the performance improvements are in progress. We have been working hard and effectively achieving some results, but we are aware that this improvement journey is never-ending.

The results are encouraging: we have done several tests to validate this method and improve it, for example at the Al’s Sporting Goods store.

These results give us the certainty that we are on the right path, and little by little the benefits begin to appear. Recently we shared a Release about performance improvements, and in the coming months we intend to provide all Store Framework developers with more tools to guarantee the performance we have always dreamed of.

Keep reading: Related stories
Technology

Harnessing AI for Ecommerce and Retail: Insights from Uri Levine and Zack Kass

In the fast-paced world of ecommerce and retail, staying ahead requires not just keeping pace with technology but…

Thalita Uba
Thalita Uba
Strategy

Decoding Composable Commerce: The Hidden Pitfalls of Unlimited Freedom

So far in our decoding composable commerce series, we’ve uncovered the revolutionary approach to digital commerce technology known…

Kristin Schepici
Kristin Schepici
Strategy

Decoding Composable Commerce: Choosing the right solution for your business

Welcome to part 2 of the Decoding Composable Commerce series. Our first article explored the transformative power of…

Kristin Schepici
Kristin Schepici
Strategy

Decoding composable commerce: Identifying the reality amidst the hype

Imagine a world where businesses have the agility to adapt rapidly, the scalability to grow exponentially, and the…

Kristin Schepici
Kristin Schepici
Institutional

VTEX is the only vendor rated top 5 for all use cases in the 2023 Gartner Critical Capabilities for Digital Commerce Report

Making a platform migration decision is hard. In a world filled with buzzwords and marketing jargon, cutting through…

Mihai Popa
Mihai Popa
Product

The Hottest 2023 Retailer Trend: How Can You Implement It?

When experts forecasted Live Shopping as one of the top ecommerce trends of the future, many were doubtful…

Jessica Bizzoni
Jessica Bizzoni
Product

OOTB, third-party, and customized solutions: How to choose the right one for your business goals

There is no doubt that choosing the right set of tools and platforms to operate an online business…

Guilherme Portela, Paloma Castrioto, Renato Ricardi
Guilherme Portela, Paloma Castrioto, Renato Ricardi
Product

Companies around the world improve profitability with VTEX’s Marketplace Seller Portal

VTEX knows that the marketplace model is one of the most important strategies for ecommerce players, big and…

Lalo Aguilar
Lalo Aguilar
Product

2022 VTEX Marketplace Release: going beyond traditional ecommerce

For more than 10 years, marketplace capabilities have been a pillar of the VTEX Digital Commerce Platform. The…

Lalo Aguilar
Lalo Aguilar
See More