Atualmente o tempo carregamento das páginas da loja virtual é muito importante, quanto mais eficiente é esse carregamento, mais chances a loja tem de converter novas vendas.

Para melhorar a performance da sua loja, segue abaixo 7 dicas para melhorar ainda mais o tempo de carregamento:

1 . Reduza o tamanho das imagens

Imagens muito grandes com uma resolução muito maior do que a necessária pode prejudicar o carregamento da sua loja, pois sempre que a pagina é carregada é feito o download dessas imagens, impactando no carregamento das demais informações na loja.

Nesse caso, é possível utilizar algumas ferramentas para otimizar essas imagens sem interferir na sua qualidade.

https://tinypng.com/

  1. Faça upload das imagens no tamanho em que serão utilizadas.

Principalmente para Banner, é recomendado que seja carregado exatamente o tamanho que será exibido na loja, o redimensionamento diretamente através do css pode atrasar o carregamento, além de ter um tamanho bem maior do que o necessário.

  1. Adie o carregamento de imagens fora 

Mesmo as imagens que não estão visíveis podem prejudicar o tempo de carregamento, pois mesmos não estando visíveis elas são carregadas de um vez assim que a página é acessada, dessa forma para evitar esse gargalo, o ideal é adiar o carregamento das imagens que não são exibidas.

Com isso as imagens vão aparecendo à medida em que ocorre o rolamento da página ou carrosséis de imagens, hoje há um recurso chamado lazy load que deve ser utilizado nesses casos. 

Atualmente há diversas bibliotecas de scripts que aplicam essa funcionalidade.

  1. Minifique HTML, CSS, e Javascript

Nos arquivos do tema, mesmo os "espaço em branco" e "quebras de linhas" são tidos como caracteres, dessa forma é recomendável que esses espaços sejam removidos, já que não influenciam no conteúdo e ocupam um espaço no tempo de carregamento.

Hoje ha diversas ferramentas, tanto de desenvolvimento quanto manuais para realizar esse processo.

Na plataforma no caso dos arquivos HTML, você pode adicionar a tag abaixo a primeira linha do arquivo layouts/default.html:

{% spaceless %}

 

 E a linha abaixo, na última linha desse mesmo arquivo:

{% endspaceless %}

  1. Elimine Recursos que impedem a renderização

Apesar de ser um pouco complexo, é algo primordial com relação ao carregamento das páginas da loja, alguns scripts bloqueiam a renderização de páginas, ou seja enquanto esses scripts não são carregados por completo, nenhum outro elemento é carregado.

Para resolver essa questão, é necessário carregar esses scripts de forma assyncrona, ou seja, de forma que o seu carregamento, não impacta no carregamento de elementos posteriores para isso à algumas técnicas de desenvolvimento que devem ser adotadas para que esse problema não ocorra, como por exemplo a utilização da tag async na chamado desse script.

  1. Faça o carregamento de scripts js ao final da página

As páginas do site são lidos sempre em ordem, ou seja inicialmente é lido o head, só então conteúdo do body, dessa forma é recomendado que os arquivos de estilização sejam carregados primeiramente para que no momento do carregamento a página não fiquem desconfiguradas.

Como os arquivos de scripts são responsáveis pelas ações da página, ele deve ser carregado apenas após todos os outros elementos.

  1. Acompanhe as métricas de performance da sua loja

Acompanhar o que pode ser melhorado é essencial, para isso há diversas ferramentas como o pagespeed, lighthouse e o GTmetrix, com essas ferramentas é possível verificar quais arquivos impactam no carregamento, além de ter um caminho para melhorar a performance da sua loja. 

Acompanhar essas plataformas é essencial, no entanto não deve ser uma obsessão alcançar 100/100, pois diversos fatores são levados em consideração nessa análise além de ser quase impossível, pois muitas vezes para melhorar a pontuação é prejudicada outros pontos como a experiência do usuário por exemplo.

 

Com essas dicas sua loja vai conseguir melhorar o tempo de carregamento e conquistar a performance desejada.

Taynara Sene 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção

    Desenvolvido por Zendesk