Quando o assunto é performance de websites, as dicas mais comuns são de redução do tamanho das imagens e remoção de código não utilizado.

E a verdade é, essas correções são muito importantes, mas você não pode se limitar a isso.

Nesse post, vamos trazer 4 táticas para melhorar a velocidade da sua Loja Virtual.

Remoção de Scripts de Terceiros

É muito difícil encontrar um E-commerce que trabalhe 100% com funcionalidades próprias.

Normalmente, as empresas optam por contratar/utilizar serviços externos, por exemplo para:

• Avaliação de produtos
• Busca inteligente
• Vitrines personalizadas
• Carrossel de imagens
• Ferramentas de Análise (G.A, Hotjar, Optimize)

Isso prejudica o desempenho da sua loja, visto que são milhares de linhas de código de fonte externa sendo executadas.

Sabendo disso, é sempre importante garantir que os códigos incorporados na página estão sendo utilizados, e remover os que não estão.

Após isso, vale uma rodada de testes para garantir que nenhum dos scripts chamados estão com peso muito grande no carregamento.

Utilização do async e defer

A utilização do async e defer deve ser feita com muita cautela.

Async e defer são atributos que podem ser inseridos nas tags HTML, visando adiantar ou adiar a execução de um script.

<script async scr="script.js"></script>
// ou
<script defer scr="script.js"></script>

O funcionamento é:

Scripts com async adicionado, fazem o download em paralelo ao carregamento do HTML e bloqueiam a renderização apenas para a execução do código.

Scripts com defer também fazem o download durante o carregamento do HTML, mas executam apenas depois da finalização da análise do HTML.

Não utilize o async para scripts que dependam de algum conteúdo HTML.

Não utilize o defer para scripts que precisam ser priorizados na execução.

Diminuição de elementos do DOM

Essa é uma preocupação que poucas pessoas tem, a quantidade de elementos HTML inseridos.

O excesso de funcionalidades e seções nas páginas, podem ocasionar em uma quantidade exagerada de elementos.

Não existe um valor certo ou errado para número de elementos, sempre vai depender das funcionalidades que o site entrega.

Mas, na maioria das vezes, existem oportunidades para diminuir esse número.

Lazy Loading para imagens

O Lazy Loading é essencial para E-commerces, o funcionamento consiste em priorizar ou adiar o carregamento das imagens.

A ideia é priorizar as imagens que ficam na "primeira dobra" do site, e carregar as outras apenas após o scroll do usuário.

Dessa forma:

<img src="image.png" loading="lazy">
// ou
<img src="image.png" loading="eager">

Imagens com lazy ficam com o carregamento adiado até estar próxima da tela do usuário.

Imagens com eager são carregadas imediatamente, estando no começo ou no final da tela.

Conclusão

As análises individuais sempre serão mais benéficas que dicas gerais, então a dica é utilizar dos pontos citados para levantar oportunidades dentro do seu site.

E lembre-se, melhoria de performance não é uma ação tomada uma vez, deve ser algo sempre revisado, principalmente quando novas funcionalidades são adicionadas.