Como melhorar a velocidade da loja virtual

Vários fatores afetam a velocidade da loja virtual. Alguns deles podem ser controlados.

Se você ainda não sabe como está o desempenho hoje, visualize o relatório Velocidade da loja virtual.

Fatores não controláveis

Dispositivo, rede e localização do cliente

Os clientes que visitam a loja vivem em lugares do mundo todo e têm diferentes dispositivos e conexões de Internet. Essa variedade faz com que o carregamento da loja seja mais rápido ou mais lento, dependendo desses fatores.

Se um cliente entrar em contato com você sobre a velocidade da loja, peça para ele verificar se está usando a versão mais recente do navegador, se limpou recentemente o cache e se o provedor de acesso à Internet não apresenta interrupções ou degradação do desempenho.

Infraestrutura da Shopify

A Shopify hospeda sua loja virtual em servidores globais rápidos e não limita a largura de banda. Verifique o status da loja da Shopify em Status da Shopify.

Abaixo estão alguns recursos que afetam a velocidade da loja virtual.

Rede de entrega de conteúdo (CDN, na sigla em inglês)

A CDN é uma rede de entrega de conteúdo. A Shopify oferece aos lojistas uma CDN de nível internacional operada pela Fastly que possibilita o carregamento rápido da loja virtual em todo o mundo. Verifique o status da CDN na página de status da Fastly.

Cache do navegador local

A loja armazena em cache ou salva alguns elementos no armazenamento local do cliente temporariamente. Na próxima vez que o cliente visita a loja virtual, o navegador carrega recursos do cache em vez de enviar outra solicitação para o servidor.

A Shopify configura o cache do navegador para recursos armazenáveis da loja em um ano para cada arquivo. Podem ser armazenados em cache, entre outros, arquivos de imagem, PDFs, arquivos JS e arquivos CSS.

Cache da página no lado do servidor

Além do cache do navegador local, a Shopify armazena em cache páginas no lado do servidor. Uma página pode ficar mais lenta na primeira vez que é carregada. No entanto, os carregamentos posteriores são mais rápidos, pois os clientes estão recebendo uma cópia em cache.

Os ativos dentro da tag do Liquid content_for_header

A tag {% content_for_header %} do Liquid insere ativos usados por vários recursos da loja virtual, incluindo análises de desempenho e recursos opcionais como botões de checkout dinâmico. O carregamento dessa tag e dos ativos relacionados afeta a velocidade da loja. A Shopify está otimizando a tag e os ativos para torná-los mais rápidos.

Fatores controláveis

Veja abaixo alguns fatores que podem afetar a velocidade da loja virtual e maneiras de lidar com eles.

Apps

Quando você inclui apps para alterar a funcionalidade ou a aparência da loja virtual, eles adicionam códigos de programação ao tema para que funcionem. Alguns códigos podem ser removidos ou reordenados a fim de melhorar o desempenho da loja virtual. Portanto, se você não está usando um app, remova-o.

Se você acha que um app está deixando a loja mais lenta, siga estas etapas:

Temas

Os temas são constituídos por códigos de programação Liquid, HTML, CSS e JavaScript. Ao editar ou personalizar temas, o tamanho dos arquivos pode aumentar e afetar a velocidade da loja.

Se você acha que algum componente do tema está deixando a loja mais lenta, siga estas etapas:

Recursos do tema ou do app

Determinados recursos, quando habilitados, também podem afetar a velocidade da loja. Por exemplo, alguns pop-ups de visualização rápida carregam informações de todas as páginas de produto quando uma página de coleção é carregada. O carregamento de dados extras que os clientes não estão usando pode afetar a velocidade da loja sem agregar valor.

Se você acha que um recurso está deixando a loja mais lenta, siga estas etapas:

Código de programação Liquid complexo ou ineficiente

O código de programação Liquid usado no processamento da loja pode ser quase todo editado. Existem maneiras eficientes e ineficientes de escrever o código Liquid. Operações complexas repetidas podem aumentar o tempo de processamento do Liquid, afetando a velocidade geral da loja.

Por exemplo, se você quer ordenar os produtos de uma coleção por preço, faça isso antes de processar os produtos da coleção em loop, e não como parte do código do loop, já que a ordem dos produtos não muda para cada produto, e o cálculo da ordem dos produtos aumenta o tempo de processamento da solicitação.

Caso você tenha dúvidas se o código está otimizado, siga estas etapas:

Imagens e vídeos

Imagens superdimensionadas ou ocultas podem interferir no carregamento de outros componentes mais importantes de uma página. Se os usuários precisam esperar o carregamento de imagens grandes, eles podem ter a percepção de perceber que a loja é lenta.

A Shopify inclui algumas salvaguardas para evitar que você sobrecarregue a loja virtual com imagens ou vídeos. Por exemplo:

  • Não é possível ter mais de 50 produtos em uma página de coleção ou 25 seções na página inicial.
  • Muitos temas adiam o carregamento de imagens que não estão na tela no momento.
  • Muitos temas também carregam um tamanho específico da imagem com base no tamanho da tela em que ela é exibida.

No entanto, essas salvaguardas não impedem inteiramente que o desempenho da loja virtual seja afetado por imagens ou vídeos.

Se você acha que um as imagens estão deixando a loja mais lenta, siga estas etapas:

  • Analise o guia de otimização de imagens.
  • Mantenha as apresentações de slides de imagens em destaque com 2 ou 3 slides ou use uma imagem em destaque.
  • Consulte o desenvolvedor de seu tema para obter conselhos sobre a melhor maneira de usar imagens com o tema.
  • Contrate um Especialista da Shopify para auxiliar você.

Ferramentas para solução de problemas

Use as ferramentas abaixo para descobrir a velocidade da loja virtual.

Lighthouse

O relatório Velocidade da loja virtual da Shopify usa o Lighthouse para medir a velocidade da loja. É possível executar seu próprio relatório do Lighthouse usando o PageSpeed Insights do Google para visualizar métricas mais detalhadas das páginas. Para saber mais sobre o significado dessas métricas, consulte a documentação da pontuação de desempenho do Google Lighthouse. Outra opção é contratar um Especialista da Shopify para ajudar você a entender as métricas e sugerir melhorias.

Inspetor de temas da Shopify para o Chrome

O Inspetor de temas da Shopify para o Chrome é uma ferramenta de criação de perfis que usa um gráfico de chama para exibir o desempenho de processamento do Liquid. Essa ferramenta ajuda a identificar as linhas de código que retardam as páginas na loja virtual. Saiba como usar o Inspetor de temas da Shopify.

Onde procurar atendimento

Se você usa um tema gratuito da Shopify, fale com o atendimento ao cliente se precisar fazer melhorias básicas de desempenho.

Se você usa um tema de terceiros e precisa de ajuda, entre em contato com o desenvolvedor do tema ou contrate um Especialista da Shopify.

Se você tem uma equipe de desenvolvimento ou uma agência parceira, entre em contato com ela para obter mais ajuda.

Pronto para começar a vender com a Shopify?

Experimente de graça