Quando falamos em desempenho da loja, precisamos prestar atenção na quantidade e tamanho do conteúdo baixado no primeiro carregamento do site, antes de o usuário realizar qualquer interação. Dentre os conteúdos que são baixados neste carregamento, boa parte são as imagens que serão exibidas no site, então a seguir estão algumas dicas para reduzir o impacto das imagens no carregamento da sua loja.
Como identificar se as imagens estão pesadas?
Antes de tudo, como saber se as imagens na minha loja estão muito pesadas? Para conseguir analisar com mais detalhes, vamos usar a ferramenta de inspeção do navegador.
No seu computador, na página inicial da sua loja, aperte a tecla F12 (fica na primeira fileira de teclas do teclado), irá abrir uma área na parte de baixo do navegador, semelhante à esta do print. Navegue até a aba Rede (Network) e atualize a página, não role a página nem interaja com nenhum elemento do site. Selecione a categoria Img, para visualizar somente as solicitações de imagens. Na parte inferior, já conseguimos descobrir quantas requisições de imagens estão sendo feitas, e qual o tamanho total de imagens na página (destacados na imagem).
O valor que costumamos usar como recomendação ideal é cerca de 1MB de tamanho total de imagens (KB é menor do que MB, então se está na unidade KB, está bom!). Se o valor está muito maior do que isso, e a quantidade de requisições é baixa (menos que 50), provavelmente as imagens estão muito pesadas individualmente. Se a quantidade de imagens está muito alta, pode ser que o lazy loading não esteja ativo/funcionando totalmente, vamos entrar em mais detalhes sobre as estratégias para melhorar esses resultados nos próximos tópicos.
Como diminuir o tamanho das imagens?
Para saber as imagens mais pesadas da sua loja, você pode clicar no cabeçalho da coluna Tamanho (Size), para que a ordenação fique por tamanho (certifique-se que a barra de rolagem está no topo da lista). Geralmente as imagens mais pesadas são os banners full, por serem as maiores imagens do site. As recomendações são:
Banner full: até 150kb
Outros banners: até 100kb
Imagens de produto e outras imagens: até 70kb
Quando as imagens são carregadas na plataforma, elas passam por uma compressão feita por um algoritmo que equilibra qualidade de imagem e tamanho de arquivo. Depois, quando é chamada pelo navegador (em navegadores compatíveis, como o Chrome), a imagem passa por uma mudança de formato de arquivo para WEBP, que é um formato otimizado para a web, e devido a esses fatores o tamanho visto no site provavelmente já será menor do que o tamanho da imagem original que você subiu na plataforma. Se mesmo assim o tamanho dessas imagens for muito maior do que o recomendado, o ideal é tentar reduzir o tamanho desse arquivo antes de realizar o upload, para isso, há dois pontos a analisar:
Imagens que sempre serão redimensionadas para um tamanho pequeno na plataforma (ex.: selos, mini banners) não precisam ter um arquivo original com dimensões grandes, então se houver imagens em que isso ocorre, a recomendação é diminuir as dimensões da imagem para deixar somente o necessário;
Utilizar ferramentas de compressão de imagem antes de subir a imagem na plataforma (sugestão: TinyJPG), essas ferramentas diminuem o tamanho do arquivo, buscando alterar o mínimo possível a qualidade da imagem.
Outras dicas e pontos de atenção:
Se o formato da imagem não é WEBP, provavelmente essa imagem não está sendo carregada pela Loja Integrada, e sim por personalização, tema ou ferramentas de terceiros (ex.: feed do Instagram), se for uma personalização a que você tenha acesso, é recomendado converter as imagens para WEBP.
GIFS quase sempre são muito pesados, não é muito recomendado utilizar na sua loja, além de que a plataforma não aceita GIFS animados por padrão, as imagens só terão animação se hospedadas em outro local e chamadas dentro da loja.
Lazy loading
Se o tamanho das imagens da sua loja já está dentro do recomendado e mesmo assim no total o valor está muito alto, ou você não quer/consegue reduzir o tamanho de todas as imagens, o lazy loading pode ajudar. O lazy loading faz com que sejam carregadas apenas as imagens necessárias para a visualização do site naquele momento, e deixando para carregar as demais apenas quando forem necessárias. Ou seja, ao abrir o site, o carregamento será mais rápido, pois há menos conteúdo para carregar.
Todas as imagens carregadas nativamente pela plataforma (mini banners nativos, vitrines da plataforma…) já terão essa funcionalidade habilitada, caso ela esteja habilitada no painel. Para ativar na sua loja, basta entrar no painel, em “Visual da Loja”, e clicar no último item do menu, à direita.
Imagens inseridas pelo tema, personalização ou ferramentas de terceiros (exemplos comuns: mini banners extras e banners entre vitrines, vitrines inteligentes, feed do Instagram, carrossel de blog…) também podem apresentar esse comportamento, desde que possuam o atributo loading=”lazy” no elemento.
Exemplo de uma inclusão correta de imagem no site:
<img src="image.jpg" alt="..." loading="lazy" />