# Carregamento na home 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: ### **1 . Reduza o tamanho das imagens** 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: \ ### **2. Faça upload das imagens no tamanho em que serão utilizadas.** 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. ### **3. Adie o carregamento de imagens não visíveis** 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. ### **4. 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 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 ```twig {% spaceless %} ``` *E a linha abaixo, na última linha desse mesmo arquivo:* ```twig {% endspaceless %} ``` Segue um exemplo de como ficaria: ```html {% spaceless %} ... ... {% endspaceless %} ``` ### **5. 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 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. ### **6. Faça o carregamento de scripts js ao final da página** 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. ### **7. Acompanhe as métricas de performance da sua loja** 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 [Core Web Vitals: saiba tudo sobre essa nova atualização e o que você pode fazer para melhorar sua pontuação](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6758305031707-Core-Web-Vitals-saiba-tudo-sobre-essa-nova-atualiza%C3%A7%C3%A3o-e-o-que-voc%C3%AA-pode-fazer-para-melhorar-sua-pontua%C3%A7%C3%A3o)