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órioVelocidade 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 emservidores globais rápidose não limita a largura de banda. Verifique o status da loja emStatus 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 sigla em inglês que significa "rede de entrega de conteúdo". A Shopify oferece aos lojistas uma CDN de nível internacional operada pelaCloudflareque possibilita o carregamento rápido da loja virtual em todo o mundo. Verifique o status da CDN napágina de status da Cloudflare.

Cache do navegador local

一个loja armazena em缓存或者萨尔瓦•alguns elementosno 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 objetocontent_for_headerdo 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低地inclui应用对位alterar 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 osrecursos do app que você não usaou remova-o caso não precise dele. Avalie oequilí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.

• 缺点ulte o desenvolvedor do app.
• Contrate um Especialista da Shopify para auxiliar você. Saiba mais sobre a contratação deEspecialistas 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 osrecursos do tema que você não usa. Avalie oequilíbrio entre os recursos e a velocidade da loja virtual.
• 缺点idere o uso de umafonte do sistema.
• 缺点ulte o desenvolvedor do tema. Se você usa umtema gratuito da Shopify,之间em contato com Atendimento ao cliente阿para receber orientação.
• Se você usa um tema de terceiros, entre em contato com odesenvolvedor do temaou contrate um Especialista da Shopify.
• 缺点idere a instalação de um tema de desempenho otimizado, como oDawn.
• Contrate um Especialista da Shopify para auxiliar você. Saiba mais sobre a contratação deEspecialistas 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 umaferramenta de mapa de calorpara 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 oequilíbrio entre os recursos e a velocidade da loja virtual.
• 缺点ulte 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 deEspecialistas 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 oInspetor de temas da Shopify para o Chromee 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 temasadiamo 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 oguia 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.
• 缺点ulte 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 deEspecialistas 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 de 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 emShopify.dev(em inglês).

Lighthouse

O relatório develocidade da loja virtualda Shopify usa o Lighthouse para medir a velocidade da loja. É possível gerar seu próprio relatório do Lighthouse com oPageSpeed Insights do Googlepara ver métricas mais pormenorizadas das páginas. Para saber mais sobre o significado dessas métricas, consulte adocumentaçã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 deEspecialistas da Shopify.

Inspetor de temas da Shopify para o Chrome

OInspetor 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. Saibacomo usaro Inspetor de temas da Shopify.

Receber atendimento para a velocidade da loja virtual

Se você usa umtema 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 odesenvolvedor do temaou contrate um Especialista da Shopify. Saiba mais sobre a contratação deEspecialistas da Shopify.

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