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 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 das melhorias podem refletir na pontuação de velocidade.
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 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
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:
- Desabilite 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 como parte do processo de instalação. Às vezes, a ação é simplificada quando o nome do app é mencionado no código entre tags
{% comment %}.
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.
- Contrate um Especialista da Shopify para auxiliar você. Saiba mais sobre a contratação de Especialistas da Shopify.
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:
- Desabilite os recursos do tema que você não usa. Avalie o equilíbrio entre os recursos e a velocidade da loja virtual.
- Considere o uso de uma fonte do sistema.
- Consulte o desenvolvedor do tema. Se você usa um tema gratuito da Shopify, entre em contato com o Atendimento ao cliente para receber orientação.
- Se você usa um tema de terceiros, entre em contato com o desenvolvedor do tema ou contrate um Especialista da Shopify.
- Considere a instalação de um tema de desempenho otimizado, como o Dawn.
- Contrate um Especialista da Shopify para auxiliar você. Saiba mais sobre a contratação de Especialistas da Shopify.
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:
- Use uma ferramenta de mapa de calor para ver se os clientes estão usando determinados recursos. Desabilite os recursos que não estão sendo usados.
- Desabilite o recurso se não precisar dele. Avalie o equilíbrio entre os recursos e a velocidade da loja virtual.
- Consulte os desenvolvedores dos temas e apps e pergunte se eles estão pré-carregando dados.
- Contrate um Especialista da Shopify para auxiliar você. Saiba mais sobre a contratação de Especialistas da Shopify.
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:
- 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 Especialista 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. 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ê. Saiba mais sobre a contratação de Especialistas da Shopify.
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 das 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 para solução de problemas
Use as seguintes ferramentas para saber mais sobre a velocidade 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).
Lighthouse
O relatório de velocidade da loja virtual da Shopify usa o Lighthouse para medir a velocidade da loja. É possível gerar seu próprio relatório do Lighthouse com o PageSpeed Insights do Google para ver métricas mais pormenorizadas 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. Saiba mais sobre a contratação de Especialistas da Shopify.
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 para a velocidade 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 Especialista da Shopify. Saiba mais sobre a contratação de Especialistas da Shopify.
Se você tem uma equipe de desenvolvimento ou uma agência parceira, entre em contato com ela para obter mais ajuda.