Acelere o tempo de carregamento da sua página

O que é velocidade de carregamento?

Velocidade de carregamento, também conhecido como tempo de carregamento da página, refere-se ao tempo total que uma página da web leva para exibir todo o seu conteúdo em um navegador após uma solicitação do usuário. Isso inclui tudo — de imagens e texto a scripts e folhas de estilo.

O Google usa a velocidade de carregamento como um fator de classificação, especialmente para indexação mobile-first. 

Como verificar a velocidade de carregamento do seu site

Antes de otimizar, é fundamental obter um benchmark. Aqui estão duas maneiras confiáveis:

1. Use ferramentas de teste de velocidade online

• Google Page Speed ​​Insights: Fornece pontuações de velocidade para dispositivos móveis e desktops, além de sugestões práticas.
• GTMetrix: Oferece relatórios detalhados, incluindo tempo até o primeiro byte (TTFB), Largest Contentful Paint (LCP) e muito mais.
• Ferramentas Pingdom: Bom para testes em diferentes regiões geográficas.

Geralmente, cada um deles terá suas próprias métricas de cálculo e fornecerá um resultado diferente, mas, no final das contas, eles fornecerão uma estimativa aproximada do desempenho da sua página no front-end — no dispositivo de navegação do seu cliente.

2. Faça testes manuais

Às vezes, a melhor ferramenta de monitoramento é sua própria impressão. Além de usar ferramentas técnicas de medição, você também pode testar o carregamento do seu site a qualquer momento.

Acesse seu site e navegue pelas páginas, em vários dispositivos, em diversas conexões de internet e usando diferentes navegadores, e veja se seu site está funcionando de acordo com seus padrões.

Como otimizar a velocidade de carregamento

Há muitos fatores que são contabilizados para o desempenho da página, alguns controláveis ​​e outros não. Compilamos uma lista de componentes controláveis ​​para você otimizar melhor sua loja.

1. Compactar arquivos de mídia

Certifique-se de que todos os seus arquivos de mídia estejam bem otimizados antes de enviá-los para a loja. Use imagens de alta resolução somente quando necessário, ou seu site causará uma péssima primeira impressão, demorando uma eternidade para carregar.

2. Ajuste a qualidade e a resolução da imagem

Se você estiver usando o GemPages V6, no Bandeira de herói e Paralaxe elementos, você tem a opção de escolher entre Isqueiro e Mais leve resolução para seu banner sob o Qualidade da Imagem menu suspenso.

No elemento Imagem, além de Qualidade da Imagem, você pode escolher uma resolução de imagem em Resolução da imagem menu suspenso. Escolha uma resolução racional que garanta velocidade de carregamento rápida, mas também qualidade de imagem nítida.

No V7, a otimização de imagem agora é tratada automaticamente via CDN, com controles de desempenho adicionais como lazy Loading e pré-carga opções disponíveis por elemento. Isso garante um carregamento mais rápido sem configuração manual, ao mesmo tempo que lhe dá controle sobre imagens específicas do dispositivo.

3. Minimize o código desnecessário

No Shopify

• Otimize o código do seu tema removendo HTML, CSS, JavaScript e código Liquid desnecessários, espaços em branco, comentários, etc.
• Limpe sua lista de aplicativos de terceiros: quando você instala e usa um aplicativo de terceiros da Shopify App Store, o aplicativo gera código no seu tema. Considere excluir os aplicativos que você não usa mais.
• Código de rastreamento de comportamento redundante do Google e do Facebook pode potencialmente deixar seu site mais lento. Tente manter apenas o código que você realmente usa.

In GemPages

• Certifique-se de que não haja elementos não utilizados espalhados em suas páginas.
• Faça uso do lazy Loading recurso.

• Utilize o recurso de pré-carregamento de fontes e folhas de estilo: O Pré-carregar fonte e folha de estilo O recurso `@resource` é uma diretiva que sinaliza ao navegador para solicitar e carregar os principais recursos da sua página (como fontes e folhas de estilo) antecipadamente, melhorando significativamente a velocidade de carregamento. GemPages Versão 7, essa funcionalidade já está Integrado e ativado por padrão.

4. Reduza as cadeias de redirecionamento

Embora o Redirecionamentos de URL são úteis, mas muitos podem adicionar solicitações HTTP extras e atrasar o processo de carregamento. Melhores práticas:evite redirecionar de uma página para outra, a menos que seja necessário.
Se você alterou um URL, atualize os links internos em vez de depender de redirecionamentos.

5. Use uma CDN de alta velocidade

GemPages implementa uma CDN (Content Delivery Network) de alta velocidade para armazenar conteúdo em cache em todo o mundo, fazendo com que seu site carregue mais rápido onde quer que seus clientes estejam.

Para mecanismos de busca populares como Google ou Bing, o desempenho de páginas para dispositivos móveis tem sido um fator importante de ranqueamento há muito tempo, com sua versão para desktop sendo considerada um fator-chave de ranqueamento mesmo antes disso. Além disso, a velocidade também desempenha um papel inegável na melhoria da experiência do visitante, reduzindo as taxas de rejeição e, consequentemente, aumentando sua receita. Em outras palavras, se você deseja converter mais, otimizar a velocidade de carregamento da sua página é algo que você simplesmente não pode ignorar.

Perguntas frequentes

1. Como posso aumentar a velocidade das minhas páginas de coleção no Shopify ou no GemPages?

As páginas de coleção costumam carregar mais lentamente porque exibem muitas imagens de produtos e, às vezes, incluem recursos de filtragem ou classificação. Para melhorar o desempenho, você pode:

• Compacte e redimensione as imagens dos produtos antes de fazer o upload.
• Uso lazy Loading no GemPages para atrasar o carregamento de imagens até que elas apareçam na tela.
• Reduza o número de produtos por página ativando a paginação.
• Limite aplicativos ou scripts pesados ​​de terceiros em páginas de coleção.
• Sempre que possível, confie na filtragem integrada do Shopify em vez de aplicativos que exigem muitos recursos.

• Compactar imagens de banner e seção.
• Use o carregamento lento para imagens e vídeos.
• Minimize aplicativos e scripts usados ​​na página inicial.
• Pré-carregue fontes e folhas de estilo importantes no GemPages.

• Compacte imagens e miniaturas de produtos.
• Ative o carregamento lento para imagens abaixo da dobra.
• Limite aplicativos extras e scripts de terceiros.
• Pré-carregue fontes e folhas de estilo críticas.