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.
