Plataforma VTEX - Case Milla Gomes

Ao migrar para Plataforma VTEX, E-commerce Milla Gomes ganha performance e flexibilidade.

por Bruno Cury 29 de agosto de 2019 Cases
5 min

Foi registrado 43% de aumento na performance de carregamento
da operação Milla Gomes após migração para plataforma Vtex.
Quer saber como? Leia o case de sucesso!

Um site cada vez mais rápido, estruturado para uma navegação mobile e que ofereça uma experiencia fluida para o cliente, tem se tornado o ponto chave
de sucesso para uma operação online.
Esse cenário certamente influencia positivamente na
permanência do usuário em seu site, que estará mais propenso
a converter visitantes em clientes.

Em pesquisa realizada pelo The State of Online Retail Performance, 2017 by Google/SOASTA, esse assunto foi incisivamente abordado
em vários tópicos do relatório.

Diante destas constatações e com uma grande dificuldade de flexibilizar melhorias em sua plataforma de e-commerce, a Milla Gomes, optou por migrar toda a sua estrutura de e-commerce para plataforma VTEX.

Continue a leitura, e entenda como esse projeto
se tornou um case de sucesso para o cliente,
para a Click Qi e para a VTEX.

O Cenário

A operação da Milla Gomes está em amplo crescimento dentro
do mercado de moda do país, e a muito tempo
passa por grandes problemas em flexibilizar a sua gestão dia-a-dia.
Além disso, notou-se uma grande perda de performance
e sucessivas “quedas” de seu e-commerce.

Esses fatores certamente influenciavam negativamente os indicadores comerciais e, principalmente, o posicionamento de marca.


Tudo isso, juntamente com uma grande dificuldade na integração
de todo o ecossistema digital da empresa e com seu sistema de gestão,
desencadedou à decisão da migração do e-commerce para plataforma Vtex.

O Projeto

Sustentamos este projeto em 3 pilares:

  • Automatização
  • Flexibilidade Gerencial,
  • Performance e Experiencia Mobile

Automatização

Existia uma grande necessidade de integrar o ecossistema online da marca,
com o sistema de gestão das lojas físicas.
Automatizando esse processo, diminuímos erros,
os processos repetitivos e manuais deixariam de existir,
resultando em um ganho exponencial no SLA de atendimento.

Flexibilidade Gerencial

Garantir que as estratégias comerciais pudessem ser amplamente aplicadas em todos os canais da empresa – loja física, e-commerce, marketplace, etc –
foi um grande desafio.

Criamos em parceria com a LinkAPI – além dos processo básicos de integração da plataforma VTEX com o ERP – processos extras na integração,
como a vinculação de promoções via ERP e também o
controle de coleções foram feitas, para que o time consiga
operacionalizar todas as ações comerciais dentro do processo.

Performance e Experiência Mobile

Este foi o ponto em que mais nos aprofundamos, pois as dificuldades em
entregar flexibilidade gerencial, conceito da marca, e uma
grande quantidade de funcionalidades, impactavam na perda de performance
e consequentemente de uma pior experiência a partir de dispositivos móveis.

Para contornar esse cenário totalmente adverso,
foram utilizadas algumas estratégias como:

(1) Uso extensivo de SVG/ vetor ao invés de imagens;

O elemento visual é de extrema importância, é o que torna a narrativa poderosa.
Por isso, optamos pelo uso de SVG, que é colocado diretamente no HTML,
poupando assim recursos do servidor.
Ademais, por ser um vetor, há um ganho considerável de qualidade,
não havendo distorções independentemente do tamanho que se é visualizado.

(2) Uso de Data – Bind;

A utilização de bibliotecas de JavaScripts que consomem dados
de API’s públicas que não consomem cache.
Esse tipo de tecnologia é amplamente difundido
entre os principais players do mercado, na garantia de oferecer
cada vez mais performance para as operações.

(3) Carregamento Progressivo;

Todas as requisições tem seus dados cacheados na sessão do usuário,
afim de diminuir a quantidade de chamadas via API e o consumo de dados.
Assim sendo, a cada novo carregamento o site fica mais rápido,
chegando em casos de de entregar a metade do tempo,
quando comparado ao primeiro acesso do usuário.

carregamento Plataforma Vtex
carregamento Plataforma Vtex

(4) Lazy Load;

O Lazy Load trata de carregar apenas o conteúdo necessário, ou seja,
no acesso do cliente, a página é carregada de forma fragmentada,
oferecendo assim uma percepção de velocidade de rápido
atendimento às solicitações.
Isso economiza a quantidade de requisições de arquivos solicitados no servidor.

requisição ao servidor plataforma Vtex
requisição ao servidor plataforma Vtex

Resultados

Aconteceram evoluções positivas em praticamente todas as áreas do negócio, de maneira mais expressiva em relação á performance.

Veja porque esse projeto se tornou um case de sucesso.

Mesmo com um crescimento no tempo de redirecionamento de servidor, houve a melhora de 43% no carregamento da página,
plataforma Vtex
plataforma Vtex

Apenas esses resultados já bastavam, mas entenda porque esse projeto se tornou também um caso de sucesso dentro de todo ecossistema VTEX.

Dentro da página inicial do administrativo VTEX, há alguns indicadores que comparam todas as plataformas do ecossistema VTEX (aproximadamente 5000 operações), em relação aos dados de sua operação.

Veja a comparação dos indicadores do projeto Milla Gomes,
em comparação a todas as operações VTEX.

Em relação ás métricas de carregamento a loja atingiu na primeira semana 6,7 segundos de carregamento médio de sua home, um indicador 100% melhor que a média de todas as lojas VTEX.
Na página de produto o ganho foi ainda maior, chegando a 150% de superioridade no carregamento, chegando a média de 2,9 segundos.
Uma das principais páginas do site, o checkout, também teve ampla redução no tempo de carregamento, chegando a média de 5,9 segundos.
Em linhas gerais, o site opera com um ganho de performance 66% melhor que a média de todo o ecossistema VTEX.

Gostou? Leve toda essa tecnologia para seu negócio e-commerce.

Além desse case temos muitos outros, confira agora clicando aqui

Fique sempre ligado em nossas novidades, cadastre-se em nossa news e receba tudo em primeira mão!