Eleve sua loja ao próximo nível: dicas para otimização de desempenho com VTEX IO

Após migrar o e-commerce para o VTEX IO é necessário sustentar a sua performance. Por isso, algumas práticas precisam ser adotadas para que o site continue apresentando um bom desempenho. 

Neste conteúdo, traremos algumas dicas práticas para otimizar o desempenho da sua loja com VTEX IO. Confira!

O que é o VTEX IO?

O VTEX IO nada mais é do que uma plataforma SaaS da VTEX. Trata-se de uma ferramenta que permite o desenvolvimento em nuvem do sistema da sua loja. Por conta dessa infraestrutura, garante uma excelente experiência do usuário e, principalmente, a integração bem-sucedida do e-commerce.

Ou seja, só com uma aplicação, é possível prevenir problemas com atualizações, desenvolver o site com mais autonomia e praticidade, além de ganhar agilidade na integração.

Todas essas vantagens podem ser convertidas em benefícios em vendas e faturamento do negócio. Por esse motivo, é possível observar o VTEX IO como um investimento de ótimo retorno para os e-commerces.

Por que fazer a otimização de desempenho da loja é importante? 

Ter um site otimizado é fundamental para o sucesso da loja e abaixo você confere os principais motivos para começar a otimizar o seu e-commerce agora mesmo:

  • Melhora a conversão: Um site com carregamento rápido e otimizado proporciona ao usuário uma experiência de compra fluida, sem atritos ou impedimentos para finalizar a compra, aumentando assim as chances de conversão no e-commerce.
  • Beneficia a estratégia de SEO: Sites otimizados geralmente alcançam melhores classificações nos buscadores, aumentando assim, o tráfego orgânico para a loja.
  • Aumenta a sua competitividade: Um site bem otimizado certamente se destaca entre os concorrentes, possibilitando atrair mais e reter os clientes no comércio digital.
  • Otimiza a experiência do usuário: Ter um site lento, onde as páginas demoram para carregar ou que são difíceis de navegar, certamente causará frustrações em seus clientes, fazendo com que eles abandonem o site, aumentando assim a taxa de rejeição. Priorize ter um site rápido e acessível para garantir ainda mais vendas e uma experiência satisfatória aos seus clientes.

Como otimizar o desempenho da loja com VTEX IO

Antes de colocarmos a mão na massa e aplicarmos todas as dicas de otimização, é necessário analisar a loja virtual da forma que ela é hoje, ou seja, examinar a estrutura de blocos, os componentes customizados, o carregamento das imagens, o carregamento das fontes e etc.

Após isso, baseado nas análises levantadas, podemos iniciar o processo de ajustes e melhorias.

A seguir mostraremos a ordem utilizada para investigar e realizar as mudanças conforme a necessidade da loja. Todavia, não existe uma regra, até porque, cada e-commerce possui estruturas e necessidades diferentes.

1 – Analisar as configurações de performance no Admin VTEX

Existem várias opções de configurações de performance no Admin da VTEX (confira aqui os detalhes das opções na documentação). Essas opções podem ajudar ou prejudicar a performance da sua loja, portanto, é importante testar muito bem antes de alterar essas configurações.

Além disso, mesmo que exista uma particularidade em cada loja virtual, é possível estabelecer alternativas que são necessárias para fazer um processo adequado. As principais são:

Otimização do OrderForm (de: desativado / para: ativado)

Caso a loja já utilize os blocos minicart.v2, add-to-cart-button e checkout-cart, não há necessidade de carregar o OrderFormProvides legado. Portanto, podemos ativar essa opção para não carregar a versão legado do OrderForm. Caso a loja ainda utilize minicart (v1) e buy-button (v1), ainda sim é necessário que seja carregado o OrderForm legado. Verifique antes de alterar essa opção.

Aqui você pode conferir mais sobre a documentação do OrderForm.

Otimização de CSS crítico (de: desativado / para: ativado)

Para não impactar o tempo de carregamento inicial da primeira dobra, a otimização de CSS crítico identifica os blocos de códigos essenciais e necessários, mostrando na página o que está restando de maneira assíncrona.

Habilitar carregamento de forma lenta de ativos abaixo da dobra (de: desativado / para: ativado)

Abaixo da segunda dobra da loja, o JS dos componentes são carregados lentamente.

2 – A sua loja utiliza o bloco __fold__?

O conjunto __fold__ é responsável por definir quais componentes do site serão carregados primeiro para renderização e quais serão carregados junto com a rolagem do usuário. Essa funcionalidade é muito importante para melhorar o desempenho da página.

Exemplo de como utilizar:

 “store.home”: {

“blocks”: [

“carousel#home”,

“shelf#home”,

“info-card#home”,

“__fold__”,

“rich-text#question”,

“rich-text#link”,

“newsletter”.

Neste exemplo, a primeira renderização irá acontecer até o bloco “info-card#home” e o restante dos componentes abaixo do “__fold__” serão carregados apenas quando o usuário rolar a página.

Aqui você pode conferir mais sobre a documentação de Using the fold blocks.

3 – Analisar carregamento das imagens

Quando falamos em performance, um dos principais detratores com certeza são as imagens. Se elas estão mal compactadas e com tamanho incorreto, podem gerar quedas de desempenho da vitrine virtual. Dessa forma, o que precisa ser analisado?

São três, os principais itens a serem analisados quando se trata de carregamento de imagens, e são eles: 

  • Peso da imagem
  • Largura e altura
  • Lazy Loading

A seguir, confira o detalhamento de cada um:

Peso da imagem

Esse é o principal detrator quando olhamos para o funcionamento. Pois, tal fator somado a uma péssima adequação, resultam em um carregamento da página totalmente prejudicado, ainda mais para usuários com conexão lenta (3G).

O ideal é ter imagens o mais desenvolvidas possível, de preferência abaixo de 100kb. Quanto mais otimizada, mais rápido será o seu carregamento.

Existem diversos sites para que ajudam a conseguir o que deseja, um bastante recomendado é o da Tiny PNG.

Largura e Altura

Existem dois pontos que precisamos analisar referente à largura e altura de uma imagem. O primeiro deles é identificar se o tamanho é o que realmente está sendo renderizado para o usuário.

Por Exemplo: tenho um banner no site com as dimensões 1700px x 500px, porém só é mostrado para o usuário o tamanho total de 1500px x 300px, ou seja, não há necessidades da imagem ter as dimensões de 1700px x 500px.

Isso impacta diretamente na performance, já que provavelmente uma imagem de 1700px x 500px terá um peso maior que uma de 1500px x 300px.

Assim, peças com largura e altura incorretas também impactam na métrica “Melhores práticas”, justamente por estar renderizando uma quantidade e originalmente ter outra.

Em segundo lugar, é necessário definir a métrica para reduzir mudanças de layout na tela do usuário. Afinal, dimensões definidas nas imagens melhoram o CLS da loja.

Para mais detalhes sobre dimensões, acesse aqui.

Lazy Loading

Muita atenção ao aplicar lazy loading nas imagens, principalmente naquelas da primeira dobra.

Estas devem ser carregadas imediatamente, portanto, evite usar lazy loading. Troque a propriedade loading=”lazy” para loading=”eager”. Dessa forma, a peça será carregada imediatamente.

Para modelos LCP, como por exemplo um banner grande na primeira dobra, utilize a propriedade fetchpriority=”high” para que elas tenham um carregamento ágil e prioritário.

Uma observação muito importante é analisar o impacto ao utilizar essa propriedade.

Você usa o bloco image em seu projeto?

Embora a documentação não mostre todos os domínios que você possa enviar como props para o grupo “image”, ao analisar o código no Github, é possível identificar que props como loading e preload também são aceitas, ou seja, reconheça seus blocos de imagens e utilize esses caracteres para buscar melhorar o desempenho delas.

4 – Analisar carregamento das fontes

Fontes mal otimizadas podem afetar a renderização de textos atrasados e nas métricas LCP e FCP, além de causar mudanças de layout (CLS).

As fontes no e-commerce são recursos muito importantes e que devem ser carregados o mais cedo possível, pois sem elas o conteúdo não poderá ser visto. São quatro itens que precisamos analisar, sendo eles:

  • Formato e peso
  • Carregamento
  • Subconjuntos
  • Font faces

A seguir, confira o detalhamento de alguns deles:

Formato e peso

Existem diversos formatos de fontes, como: ttf, otf, woff2, entre outros. Porém a mais moderna e que oferece melhor compactação é a woff2. Ela reduz o tempo de download por oferecer boa compactação, causando um melhor desempenho.

Portanto, se você ainda não usa esse modelo de fontes, considere-o já para melhorar ainda mais a compactação e o comportamento.

Com woff2:

Sem woff2:

Só de utilizarmos esse formato, o peso de várias fontes reduziram em mais de 50%, oferecendo download muito mais rápido e minimizando possíveis impactos de CLS, FCP e LCP.

Carregamento

As fontes são prioridades no carregamento da página. Portanto, garantir que ela apareça o mais breve possível, possibilita que o usuário possa visualizar o conteúdo da página rapidamente.

Verifique se elas realmente estão com prioridade no carregamento. Então, para analisar o tempo que leva, abra o DevTools, acesse a aba Rede (Network), selecione pelo filtro “Font”.

Será listado as carregadas e ao clicar sobre elas, basta ir na aba “Timing”. Assim, é possível visualizar todos os tempo da que foi selecionada, como o início de carregamento, o período que levou para carregar, etc.

5 – Analisar códigos CSS duplicados ou não utilizados

Ao acessar uma página da loja virtual, o CSS de todos os componentes custom e da VTEX, são carregados. O CSS também possui carregamento prioritário e deve ser otimizado para evitar longas esperas.

Verifique todos os códigos CSS usados a fim de buscar aqueles que não estão mais ativos, que estejam duplicados ou até mesmo mal empregados.

Faça uso da ferramenta de coverage do próprio navegador para encontrar códigos inativos. Outra dica que ajuda muito durante todo processo dentro do VTEX IO, é começar verificando e removendo grupos que não estão sendo mais efetivos, pois customizamos muitos deles através da propriedade “blockClass”. Quando encontramos códigos CSS que estão em um blockClass que não existe, é muito provável que esse trecho não esteja fazendo nenhum efeito na loja, sendo assim, poderia ser removido.


Um lembrete importante é para que faça esse processo com muito cuidado, a fim de evitar quebras de layout na loja. Mantenha sempre um backup.

6 – Analisar códigos JavaScript não utilizados ou mal estruturados

Assim como o CSS, o JavaScript também possui carregamento prioritário e é um dos principais responsáveis pela performance do site.

É comum as páginas terem diversos componentes custom para suprir as necessidades da loja, porém códigos mal estruturados podem ocasionar lentidão, vazamento de memória, entre outros problemas.

No cenário VTEX IO, vamos analisar dois aspectos:

  1. Componentes React custom: analise se os seus componentes estão bem otimizados. Recomendo utilizar a extensão React Developer Tools.
  2. Script de terceiros: geralmente as páginas de e-commerce possuem integrações de terceiros e que são necessárias para o bom funcionamento, porém, esses scripts podem estar afetando o seu funcionamento. É importante verificar todos os scripts de terceiros que são carregados.

7 – Analisar bibliotecas utilizadas no projeto

As bibliotecas parecem inofensivas, porém pode atrapalhar e muito no desempenho da loja. Elas estão instaladas no projeto e também precisam ser carregadas durante o carregamento da página, assim como Javascript, CSS, fontes e demais elementos.

Examine as dependências do projeto, removendo aquelas que não estão mais em uso e analise se as que estão em uso, realmente não estão impactando no comportamento da loja virtual.

Para descobrir o peso e o tempo de carregamento de cada biblioteca, utilize o site Bundlephobia.

Se você identificar alguma biblioteca que possa prejudicar o desempenho da loja, considere remover ou substituir por outra que seja melhor otimizada.

8 – Analisar carregamento de componentes, principalmente componentes no header

O header é outro importante item no e-commerce, pois é carregado em praticamente todas as páginas da loja. Sendo assim, se algum elemento custom não estiver implementado de forma adequada e deixando a execução lenta, ele afetará todas as páginas da loja que possui o header. 

Aqueles que possuem um componente custom que precisa ser carregado no header, fiquem muito atentos, ele pode estar impactando a performance do site.

  • Observe se realmente ele precisa ser carregado em todas as páginas e estar dentro do header.
  • Verifique se os componentes que precisam estar dentro do header estão bem otimizados.

9 – Tags GTM

O GTM é carregado em todas as páginas do site, dentro dele contém diversos scripts, eventos, entre outros itens, que são carregados e disparados.

É importante analisar o GTM como um todo e remover principalmente tags que não estão sendo utilizadas, a fim de otimizá-lo.

10 – Consultas GraphQL

É muito comum utilizarmos queries e mutations do GraphQL nos sites. O GraphQL nos permite uma abordagem mais eficiente e flexível. Além disso, para consumir os dados da API, utilizamos o React Apollo, que é uma biblioteca para integração do GraphQL com React, facilitando o gerenciamento de dados.

Leve em consideração algumas possibilidade de melhoria para as consultas:

  • Evite trazer dados desnecessários. Por exemplo: precisamos consultar as informações de um cliente e retornar apenas o CPF, nesse caso, não é preciso trazer todo o restante das referências de forma desnecessária. Ao montar sua query, você consegue definir apenas os campos que precisam ser retornados.
  • Utilize a política de cache no lado do servidor.
  • Conte com bibliotecas de memorização, como “memo” ou “useMemo”, para evitar renderizações desnecessárias de componentes quando os dados ainda não foram alterados.
  • Use o fetchPolicy apropriado para as requisições. Atualmente existem as opções: cache-first, network-only ou cache-and-network. Leia a documentação.

Há diversas outras abordagens que também podem ser utilizadas para melhoria na performance das requisições.

Veja as melhores práticas recomendadas pelo Apollo Graphql, acessando aqui.

Abaixo temos exemplos de antes e depois da loja Sam’s Club após as melhorias aplicadas baseadas neste artigo.

Métricas no Lighthouse antes das alterações (HomePage):

Métricas no Lighthouse após as alterações (HomePage):

Houve uma melhora significativa principalmente na métrica de Performance, além de diversas outras melhorias nas métricas de Acessibilidade, Melhores Práticas e SEO.

Manter um site otimizado é fundamental para garantir uma boa performance do e-commerce e cada um desses pilares são igualmente importantes para permitir isso. Espero que essas recomendações sejam úteis para que você possa aplicar em sua loja VTEX IO. 

Se inscreva em nossa newsletter para receber mensalmente os principais conteúdos sobre tecnologia, experiência e marketing para e-commerce e aproveite para visitar outros artigos sobre e-commerce VTEX, acessando abaixo: 

➡️ Implementando LiveScale com VTEX IO

➡️ Desenvolvimento em VTEX IO: 2 ferramentas que você precisa conhecer e que vão facilitar sua rotina

➡️ Recurso de regionalização da VTEX: saiba como funciona para o segmento de Grocery!

➡️ B2B na VTEX: conheça sua arquitetura e como configurar!

➡️ Headless da plataforma VTEX: como aproveitar essa tecnologia na sua loja virtual?

➡️ Desenvolvimento VTEX: 8 APPs que contribuem para um melhor aprimoramento da página

Escrito por:
João Goulart, Desenvolvedor VTEX IO
at Corebiz