Carregamento na home
Last updated
Was this helpful?
Documentação de Temas
Last updated
Was this helpful?
O tempo de 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:
Imagens muito grandes com uma resolução muito maior do que a necessária podem prejudicar o carregamento da sua loja, pois sempre que a pagina é carregada, também é 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 em sua qualidade. Seque abaixo algumas sugestões de ferramentas que fazem essa compactação em imagens:
Principalmente para Banners, é recomendado que as imagens sejam carregadas exatamente no tamanho que serão exibidas na loja, pois o redimensionamento através do css pode atrasar seu carregamento, além de ter um tamanho bem maior do que o necessário.
Mesmo as imagens que não estão visíveis podem prejudicar o tempo de carregamento, pois mesmo não estando visíveis aparentemente, elas são carregadas de uma 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.
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 há diversas ferramentas, tanto de desenvolvimento quanto manuais para realizar esse processo.
Para os arquivos HTML, na plataforma utilizamos a tag abaixo para realizar sua minificação e para isso você pode adicionar a tag na primeira linha do arquivo layouts/default.html
E a linha abaixo, na última linha desse mesmo arquivo:
Segue um exemplo de como ficaria:
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 assíncrona/incrona, ou seja, de forma que o seu carregamento não impacte no carregamento de elementos posteriores e para isso a algumas técnicas de desenvolvimento que devem ser adotadas, visando que esse problema não ocorra, como por exemplo a utilização da tag async no chamado de alguns scripts.
As páginas do site são lidas sempre em ordem vertical, ou seja, inicialmente é lido o head, só então conteúdo do body e assim por diante, 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.
Ficar por dentro das novidades do que pode ser melhorado é essencial, para isso há diversas ferramentas como o PageSpeed, Lighthousee, o GTmetrix, e 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 nessas análises, além de ser quase impossível, pois muitas vezes para melhorar a pontuação, outros pontos são prejudicados, como a experiência do usuário por exemplo.
Para outras dicas complementares, você pode acessar o artigo sobre Core Web Vitals, acessando o artigo