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:
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!
