Produto

Store Framework: como a VTEX tem otimizado a performance de lojas utilizando React

Rodrigo Affonso
Rodrigo Affonso June 10, 2020
Store Framework: como a VTEX  tem otimizado a performance de lojas utilizando React

O desafio de melhorar a performance de um e-commerce não é trivial.  Perder vendas por ter um site lento é algo que está entre os pesadelos de qualquer negócio que possui uma loja online. Por isso, na VTEX, otimizar o desempenho e a velocidade de carregamento são prioridade máxima. 

Este artigo não é uma receita de sucesso para performance, mas sim um relatório que expõe uma empreitada corajosa em busca da inovação. Uma trajetória que conteve erros, acertos, testes e aprimoramentos, mas que já impacta a vida de clientes diariamente.

Por que performance é importante para o e-commerce?

Inevitavelmente, performance é um dos fatores críticos para o sucesso de um e-commerce. De acordo com a Radware, 20% dos consumidores abandonam os seus carrinhos por conta da velocidade do site. Além disso, também sabemos que o tempo de carregamento da página e o seu rankeamento (posição em que são mostradas pelo Google, de acordo com SEO) estão intimamente relacionados. Por isso, desenvolvedores de todo o mundo trabalham vigorosamente buscando otimizar seus sites.

De métodos simples até ferramentas extremamentes complexas, há diversas maneiras de lidar com problemas de performance: reduzir tamanhos de imagens, reduzir o número de requisições HTTP e armazenar o máximo de dados possível no cache são excelentes maneiras de lidar com isso. Mas na VTEX, decidimos ir além:

Performance de lojas VTEX: indo além com Store Framework e React

Nossos desenvolvedores trabalham incansavelmente buscando maneiras disruptivas de lidar com a necessidade de otimização da performance. No caso do Store Framework, nossa solução para implementação de lojas baseado em componentes React, a resposta foi o Partial Hydration do React — um método inovador para lidar com a velocidade de carregamento de componentes não-estáticos.

Se você está se perguntando “o que é React?”, eu explico: React é uma biblioteca JavaScript criada pelo Facebook voltada para front-end e é a base para diversos websites como Netflix, Walmart e Airbnb. Na VTEX, ele é a base dos componentes do nosso admin e agora também do Store Framework.

Agora, imagine que você entre em uma página que tem elementos interativos como um carrossel. O carrossel, por ser um elemento dinâmico, exige que os dados associados a ele sejam baixados para que só depois possamos vê-lo. No entanto, não é possível fazer o download apenas do código do carrossel — todo o conteúdo da página tem que ser baixado, o que provoca lentidão. É nesse contexto que surge o Partial Hydration do React, que permite que apenas o conteúdo necessário seja baixado. 

Em termos técnicos: quando uma página construída usando React é acessada, o código JavaScript presente em cada componente precisa ser executado para retornar um elemento HTML. Para fazê-lo, realizamos o Server Side Rendering (SSR), processo no qual os componentes JavaScript e CSS de uma página são renderizados no servidor de maneira estática em vez de serem carregados no browser (client-side). Esse processo reduz o tempo de carregamento, fazendo com que o usuário, quase instantaneamente, tenha acesso a esse conteúdo. 

O único problema do SSR é que ele retorna somente componentes estáticos — o conteúdo é tornado dinâmico no client side através do processo denominado “Hydration”. No entanto, isso acontece para todo o conteúdo da página, é tudo ou nada: todo o código da página é baixado e executado no usuário, o que provoca lentidão de carregamento. 

Esse é o problema que o Partial Hydration resolve. Com ele, conseguimos baixar e executar apenas as partes do código que são necessárias – nesse caso, o conteúdo visível para o usuario, acima do scroll da página. Abaixo do scroll, os componentes são carregados “on demand”, ou seja, apenas quando o usuário desce na página elas são baixadas e executadas. Dessa forma, ao baixar apenas o código necessário, conseguimos reduzir o tempo de carregamento. 

No exemplo abaixo, o código do componente ProductSummary não é carregado em um primeiro momento, quando ele está abaixo do scroll da página. Apenas quando o usuário desce na página ele é baixado e executado.

Um novo paradigma para os times de negócio e desenvolvimento

Lucas Bebber, desenvolvedor VTEX que tem liderado a frente de performance no time de produto, destaca que essa mudança é um novo paradigma no uso do React. Além disso, ele nos contou um pouco mais sobre a tecnologia que envolve o Partial Hydration:

Por que o React foi a tecnologia escolhida pela VTEX para construir lojas no Store framework? 

“O React é muito popular no universo da tecnologia, mas não exatamente por motivos de performance. Na VTEX, o escolhemos pois com ele somos capazes de componentizar muito bem as partes do nosso código. Isso permite que sejam criados componentes independentes e atualizáveis. E, com o uso do Partial Hydration, conseguimos encontrar o melhor dos dois mundos: ter componentes React, mantendo a renderização no servidor e baixando apenas os componentes não-estáticos.”

Se o Partial Hydration é tão proeminente, por que é utilizado por tão poucas empresas ao redor do mundo?

“É possível que empresas apliquem Partial Hydration para produtos internos, mas, como uma ferramenta de uma plataforma, de fato é pouquíssimo utilizado. Um dos motivos para isso é que o React, por si só, trabalha apenas com a renderização, não cuida do download dos assets, o que seria necessário para tirar melhor proveito dessa técnica. Por isso, para se fazer o Partial Hydration, é preciso de controle sob todo o stack, ou seja, precisa-se de uma plataforma que cuide tanto do back-end quanto do front-end. Esse é um dos nossos diferenciais com o VTEX IO.”

Os resultados de utilizar o Store Framework e a tecnologia React

Na VTEX, a ideia de usar o Partial Hydration foi formulada e implementada nos últimos 4 meses e ainda planejamos desenvolvê-la ainda mais. No futuro, evoluiremos para reduzir ainda mais a necessidade de download e execução no lado do cliente: os componentes estáticos nunca precisarão ser baixados e executados. Paralelamente, existem diversas outras melhorias de performance em progresso, como a otimização das customizações CSS. 

Reconhecemos que os processos de melhorias de performance estão em progresso. Temos trabalhado e efetivamente conseguido resultados, com consciência de que essa jornada de aprimoramento é constante.

Os resultados são animadores: temos feito uma série de testes para validar este método e aprimorá-lo, como por exemplo na loja Al’s Sporting Goods:

Gráfico que expressa a melhoria de desempenho devido ao Partial Hydration: +80% no Desktop e +118% no mobile

Esses resultados nos dão a certeza de que estamos no caminho certo e aos poucos os benefícios vão se materializando: recentemente, liberamos um Release sobre melhorias de performance e nos próximos meses pretendemos munir todos os desenvolvedores do Store Framework com mais ferramentas para garantir a performance que sempre desejamos. 

Quer saber mais sobre o Store Framework, o framework de implementação de loja com tecnologia de ponta e o menor time-to-market? Clique aqui!

Continue lendo: artigos relacionados
Produto

“Kon’nichiwa Japan!” Agora a plataforma da VTEX também está disponível em japonês

Depois de abrir um escritório em Singapura para melhor atender os clientes globais na região da Ásia Pacífico,…

Cassiane Vilvert
Cassiane Vilvert
Produto

Documentação de software em uma empresa de tecnologia em crescimento acelerado

A VTEX aprendeu muito, nos últimos anos, sobre a importância da documentação para produtos ganharem escala global. Tudo…

George Brindeiro
George Brindeiro
Produto

Pix e o impacto no ecommerce: do lançamento à Black Friday

O novo meio de pagamento instantâneo do Banco Central, o Pix, entrou em vigor dia 16 de novembro.…

Juliana Sales
Juliana Sales
Produto

Além do esperado: os times de produto poderosos da VTEX

Como pessoas comprometidas, um mindset de produto e uma linguagem baseada no futuro geram resultados além do que…

Guilherme Rodrigues
Guilherme Rodrigues
Estrategia

Conversational commerce: o potencial de conversas relevantes e humanizadas para o varejo

Já sabemos que a transformação digital vem provocando mudanças substanciais em todos os segmentos de mercado ao longo…

Take Blip
Take Blip
Produto

Como o Pix promete eliminar cinco ineficiências operacionais do e-commerce

O Pix é o novo meio de pagamentos instantâneos do Banco Central (Bacen) que entra em vigor dia…

Juliana Sales
Juliana Sales
Marketing

Black Friday: ajude seu cliente a encontrar o que procura com o VTEX Intelligent Search

Como ajudar seu cliente a encontrar o que procura? Melhorando a Busca do seu e-commerce! Neste artigo, você…

Gustavo Vedotti
Gustavo Vedotti
Gestão

Black Friday: o guia definitivo para criar Promoções na VTEX

Estamos há poucas semanas da Black Friday, um dos maiores evento de vendas do ano no Brasil. A…

Natalie Tang
Natalie Tang
Estratégia

Marketplace e a magia em vender através dos Shoppings virtuais

Vender pela internet nunca esteve tão em alta como nos tempos atuais.  Termos como “Quero vender mais”, “Como…

Caetano Maffra
Caetano Maffra
Veja Mais
Registro feito com sucesso