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.
- 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.
- 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.
- 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 %}
- 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.
- 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.
- 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.
Comentários