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

Empresas em todo o mundo aumentam sua rentabilidade com o Seller Portal do Marketplace da VTEX

A VTEX sabe que o modelo de marketplace é uma das estratégias mais importantes para os operadores de…

Lalo Aguilar
Lalo Aguilar
Produto

Desbloqueando um novo modelo de vendas com VTEX Gift List

Quem nunca participou de uma boa festa de casamento? Os votos, os docinhos e festa entre amigos e…

Beneson Damasceno
Beneson Damasceno
Digital Insider

Tech, People e Machine Learning: proteção para ecommerce

Estudos recentes, como o da Global Merchants’ Guide To Latin America, realizado pela EBANX, mostram a curva crescente…

Koin
Koin
Produto

Novidades de Marketplace da VTEX: além do ecommerce tradicional

Há mais de dez anos, as funcionalidades de marketplace têm sido um pilar da VTEX Commerce Platform. Nossa…

Lalo Aguilar
Lalo Aguilar
Produto

VTEX e Adyen firmam parceria para levar o comércio unificado aos varejistas online

Seja adicionando novos conteúdos, impulsionando iniciativas de marketing ou investindo na próxima grande tendência, podemos afirmar com segurança…

Gabriela Porto
Gabriela Porto
Produto

Central de Atendimento no WhatsApp: simplifique processos e escale mais vendas

Para empresas que possuem mais de um vendedor atendente no WhatsApp, manter uma Central de Atendimento nesta plataforma…

Isabella Feitosa
Isabella Feitosa
Produto

VTEX Shipping Network: a solução que otimiza a logística para os nossos clientes

O VTEX Shipping Network reúne dezenas de transportadoras e apresenta a melhor opção de entrega com menor custo…

Mariana Boese
Mariana Boese
Produto

QR Code para WhatsApp: facilite a conexão com os seus clientes

Muito utilizado nas campanhas de marketing online e principalmente nas campanhas offline, como  mídias impressas (panfletos, revistas, etc),…

Isabella Feitosa
Isabella Feitosa
Produto

Como utilizar CRM integrado com WhatsApp: passo a passo completo

As integrações entre CRM, softwares e outras plataformas são um dos principais pilares para a automatização de processos…

Isabella Feitosa
Isabella Feitosa
Veja Mais
Registro feito com sucesso