Melhorar o desempenho da loja virtual

Vários fatores afetam o desempenho da loja virtual. Alguns deles podem ser controlados.

Para saber como está o desempenho da loja virtual hoje, consulte o relatório Desempenho na web.

Fatores não controláveis

Esses fatores podem afetar o desempenho, mas não podem ser controlados em nenhuma configuração ou ajuste na loja na Shopify. Isso inclui elementos relacionados a clientes, como o dispositivo ou a velocidade da internet, bem como causas relativas à Shopify, como atualizações na infraestrutura da plataforma.

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 a loja virtual em servidores globais rápidos e não limita a largura de banda. Verifique o status da loja em Status da Shopify.

A Shopify está constantemente aprimorando o código e a infraestrutura. Algumas dessas melhorias podem afetar as métricas de desempenho.

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

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

CDN é uma sigla em inglês que significa "rede de entrega de conteúdo". Esse recurso armazena imagens e outros arquivos, como o que você guarda na página Conteúdo > Arquivos no admin da Shopify. A Shopify oferece aos lojistas uma CDN de nível internacional operada pela Cloudflare que possibilita o carregamento rápido da loja virtual em todo o mundo. Verifique o status da CDN na página de status da Cloudflare.

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 do objeto content_for_header do Liquid

O objeto `` 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. Como o carregamento desse objeto e dos ativos relacionados afeta a velocidade da loja, a Shopify está trabalhando em uma otimização deles para agilizar o processo.

Fatores controláveis

Confira abaixo alguns fatores que podem afetar o desempenho da loja virtual e saiba como 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:

  • Desative os recursos do app que você não usa ou remova-o caso não precise dele. Avalie o equilíbrio entre os recursos e a velocidade da loja virtual.
  • Caso você esteja removendo um app, considere excluir o código adicionado durante o processo de instalação. A maioria dos apps elimina o código automaticamente para você, mas é possível consultar o desenvolvedor para ter certeza. Para ajudar nesse processo, alguns apps envolvem o código em tags {% comment %} que mencionam o nome do app. Uma prática recomendada é remover o código de apps não utilizados, pois evita que seja executado para recursos não usados, além de tornar o tema mais fácil de ler.
  • Consulte o desenvolvedor do app.

Temas

Os temas são constituídos por códigos de programação Liquid, HTML, CSS e JavaScript. Quando você edita ou personaliza os 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 ativados, também podem afetar o desempenho 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 o desempenho geral da loja na web.

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. Isso porque 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:

  • Execute o Inspetor de temas da Shopify para o Chrome e identifique as linhas de código que estão deixando as páginas da loja virtual mais lentas.
  • Contrate um Parceiro da Shopify para ajudar você a localizar o código de programação ineficiente ou inútil.

Imagens e vídeos

Imagens superdimensionadas ou ocultas podem interferir no carregamento de outros componentes mais importantes de uma página. E, se os usuários precisam esperar o carregamento de imagens grandes, eles podem ter a percepção de 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:

  • Reveja 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.

Fontes

Há várias fontes disponíveis para usar na loja virtual. No entanto, se você escolher uma fonte que ainda não existe no computador do cliente, será preciso baixá-la para exibir o texto, afetando o tempo de carregamento da loja.

Use uma fonte do sistema e evite fazer download de novas opções para o dispositivo do cliente. As fontes do sistema já estão instaladas na maioria dos computadores.

É possível selecionar uma fonte entre as famílias mono, serif ou sans-serif. O uso de estilos, como negrito ou itálico, também é permitido nesse caso.

A exibição no computador do cliente depende do sistema operacional usado. A seguir estão alguns exemplos de fontes que podem ser usadas para processar um texto ao selecionar uma família do sistema:

  • Mono: Menlo, Consolas, Monaco, Liberation Mono ou Lucida Console.
  • Sans-Serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu ou Helvetica Neue.
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times ou Source Serif Pro.

Ferramentas de solução de problemas

Use a ferramentas a seguir para saber mais sobre o desempenho da loja virtual.

Caso você seja um desenvolvedor e queira otimizar ainda mais o tema para desempenho, use as ferramentas e práticas recomendadas da Shopify. Saiba mais em Shopify.dev (em inglês).

PageSpeed Insights

O relatório Painel de controle Desempenho na web da Shopify usa as Core Web Vitals para mensurar a experiência real dos usuários na loja virtual. É possível gerar seu próprio relatório do Google PageSpeed Insights para ver métricas mais pormenorizadas das páginas.

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. Dessa forma, é possível identificar as linhas de código que deixam as páginas da loja virtual lentas. Saiba como usar o Inspetor de temas da Shopify.

Receber atendimento referente ao desempenho da loja virtual

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 Parceiro da Shopify. Saiba mais sobre como contratar um Parceiro da Shopify.

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

Tudo pronto para começar a vender com a Shopify?

Experimente de graça