Store Framework: como otimizar a performance da sua loja usando o React da VTEX

17/122
Store framework

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, para a Imediata otimizar o desempenho e a velocidade de carregamento são prioridade máxima. 

Por que performance é importante para o e-commerce?

Inevitavelmente, performance é um dos fatores críticos para o sucesso de um e-commerce.
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 a Imediata te ajuda de forma diferenciada com na plataforma VTEX:

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

Os desenvolvedores trabalham incansavelmente buscando maneiras disruptivas de lidar com a necessidade de otimização da performance. No caso do Store Framework, a 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.

Então “o que é React?”
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 admin e, 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, visto que 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. No caso, esse processo reduz o tempo de carregamento, fazendo com que o usuário, quase instantaneamente, tenha acesso ao conteúdo.

O Partial Hydration chega para resolver, permitindo baixar e executar apenas as partes do código que são necessárias, sendo 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. Assim, ao baixar apenas o código necessário, conseguimos reduzir o tempo de carregamento.

Os resultados de utilizar o Store Framework e a tecnologia React

No futuro, a plataforma VTEX quer evoluir ainda mais para reduzir 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.

Quer saber mais sobre o Store Framework, o framework de implementação de loja com tecnologia de ponta e o menor time-to-market?
Acompanhe os conteúdos do nosso Blog e fique por dentro de todas essas dicas!

Write Comment...

Name

Email