Melhorar o desempenho da loja virtual

A loja virtual é composta por um conjunto de recursos, como código do tema, apps, imagens, vídeos, carrosséis, feeds de redes sociais e análises. Esses recursos podem aprimorar a experiência do visitante e ampliar as funcionalidades do site.

No entanto, cada recurso que você adiciona à loja virtual pode afetar o desempenho dela. Alguns recursos podem deixar o site mais lento ou criar comportamentos inesperados que podem prejudicar a experiência do usuário.

O desempenho da web tem como foco otimizar a experiência do usuário. Atualmente, o desempenho da web se concentra em três áreas principais, que também são refletidas nas Core Web Vitals:

Velocidade de carregamento, medida pela Largest Contentful Paint (LCP)
Estabilidade do layout, medida pela Cumulative Layout Shift (CLS)
Capacidade de resposta à interação do usuário, medida pela Interaction to Next Paint (INP)

Otimizar o desempenho da web significa que os clientes têm mais probabilidade de permanecer no site e converter.

Nesta página

Otimizações para a loja virtual

A loja virtual já vem com otimização para a web, que também está incorporada a todos os novos recursos. Não é preciso fazer nada de especial para aproveitar os seguintes recursos:

A loja virtual fica hospedada em servidores rápidos e globais e não limita a largura de banda. É possível verificar o status da sua loja na Shopify na página Status da Shopify.
A loja virtual tem uma rede de distribuição de conteúdo (CDN) gerenciada pela Cloudflare para garantir o carregamento rápido no mundo todo. É possível consultar o status da CDN na página de status da Cloudflare.
Para manter o tempo de carregamento rápido, as imagens são otimizadas automaticamente com o uso da CDN de imagem. Em combinação com o código do tema, a CDN de imagem pode veicular o melhor formato de imagem, que também é redimensionado e compactado para manter os arquivos pequenos.

Fatores que afetam o desempenho da web

Para as lojas da Shopify, os maiores fatores que afetam o desempenho da web são:

O tema da loja virtual
Os apps instalados
Qualquer código adicional de terceiros adicionado manualmente à loja, incluindo gerenciadores de tags e as tags neles contidas

Isso significa que você deve se concentrar nos seguintes pontos para melhorar o desempenho da web:

Use um tema atualizado e otimizado. Todos os temas da família Horizon e os temas da Online Store 2.0 da Shopify são gratuitos e otimizados para o desempenho na web. Além disso, muitos outros temas de terceiros também são otimizados para o desempenho na web. É possível consultar os dados de desempenho de temas mais recentes.
Se o tema oferecer transições de página ou outras animações, compare o desempenho da web antes e depois de ativá-las. As animações podem deixar as páginas mais lentas.
Evite adicionar muitas seções aos modelos de página no tema. Um número elevado de seções nas páginas pode diminuir o desempenho da web.
Se você tiver coleções com um grande número de produtos, pense em ativar a paginação para limitar o número de produtos que carregam de uma só vez.
Avalie os apps instalados e o código de terceiros para garantir que eles agreguem valor suficiente para compensar possíveis perdas de desempenho.
Audite o gerenciador de tags para remover as que não são utilizadas ou que têm baixo valor. Saiba mais sobre as práticas recomendadas para tags e gerenciadores de tags.

Ferramentas de teste

Use as seguintes ferramentas para investigar o desempenho da loja virtual:

Relatórios de desempenho da web: os relatórios de desempenho da web da Shopify usam as Core Web Vitals para medir como os usuários reais vivenciam a experiência na loja virtual.
PageSpeed Insights: você pode gerar seus próprios relatórios com o PageSpeed Insights do Google para ver métricas mais detalhadas das páginas da loja.

Informações sobre as recomendações de desempenho de terceiros

As ferramentas de verificação de desempenho de terceiros podem sugerir alterações para melhorar a velocidade da loja. No entanto, muitas dessas recomendações já foram implementadas pela Shopify ou não se aplicam a lojas da Shopify.

Otimizações já incluídas na Shopify

Sua loja na Shopify inclui automaticamente as seguintes otimizações de desempenho:

Rede de distribuição de conteúdo (CDN): a Shopify oferece uma CDN de alto nível sem custo adicional para garantir um desempenho rápido em todo o mundo. Todos os ativos são veiculados por HTTP/2, o que reduz a sobrecarga em comparação com protocolos mais antigos.

Cache do navegador: a Shopify define o cache do navegador para recursos armazenáveis em cache por um ano, a duração máxima possível. Isso significa que os visitantes recorrentes da loja terão tempos de carregamento mais rápidos.

Compactação Gzip: a Shopify emprega a compactação Gzip em arquivos CSS, JavaScript, documentos e páginas para reduzir a largura de banda e melhorar os tempos de carregamento. O Keep-alive também está ativado para a recuperação de vários arquivos.

Otimização de imagem: a Shopify compacta automaticamente imagens JPG com algoritmos avançados, equilibrando a compactação e o apelo visual. As imagens costumam ser veiculadas no formato WebP para uma melhor compactação e um carregamento mais rápido.

Minificação de arquivos: a Shopify minifica automaticamente os arquivos CSS e JavaScript quando eles são solicitados pela vitrine virtual, o que reduz o tamanho dos arquivos sem afetar a funcionalidade.

Quando as recomendações de terceiros não se aplicam

As ferramentas de verificação de terceiros podem sugerir alterações que não são relevantes para as lojas da Shopify:

Configurações no nível do servidor: as recomendações sobre configuração do servidor, cabeçalhos HTTP ou políticas de cache já estão otimizadas pela infraestrutura da Shopify.
Implementação da CDN: as sugestões para adicionar uma CDN são desnecessárias, pois a Shopify já inclui uma CDN de alto desempenho por padrão.
Configurações de compactação: as recomendações sobre como ativar a compactação já estão implementadas em toda a plataforma da Shopify.

Como usar as recomendações relevantes

Concentre-se nas recomendações relacionadas ao conteúdo e aos recursos específicos da sua loja:

Otimização de imagens: verifique se as imagens carregadas têm o tamanho adequado e use os formatos recomendados.
Avaliação de apps: analise se os apps instalados agregam valor suficiente para compensar o impacto no desempenho.
Otimização de temas: escolha temas otimizados para o desempenho e limite o número de seções nos modelos de página.

Solução de problemas de páginas de carregamento lento

Se a sua loja estiver carregando lentamente, siga estas etapas para identificar e resolver o problema:

Etapa 1: verificar o problema

Teste a velocidade de carregamento da sua loja em diferentes dispositivos e conexões de internet.
Peça para outras pessoas testarem sua loja para confirmar que não se trata de um problema local com sua conexão de internet.
Use ferramentas de teste como o PageSpeed Insights para obter métricas de desempenho específicas.

Etapa 2: identificar a causa

Verificar excesso de apps: muitos apps carregando ativos na vitrine virtual podem reduzir o desempenho. Analise os apps instalados e remova os que não forem essenciais para as vendas.

Analisar imagens grandes: páginas com muitas imagens de alta qualidade podem demorar para carregar. Otimize as imagens ou reduza o número exibido. Saiba mais sobre os tamanhos de imagem recomendados.

Identificar scripts lentos: se o site travar em uma página em branco antes de carregar tudo de uma vez, use as ferramentas de desenvolvedor do navegador para identificar os scripts de carregamento lento. Entre em contato com o desenvolvedor do app ou do tema para resolver o problema.

Etapa 3: agir

Remover apps desnecessários: desinstalar um app não remove o código dele do tema automaticamente. Talvez seja necessário entrar em contato com o desenvolvedor do app para obter instruções completas de remoção.

Otimizar imagens: use os formatos de arquivo apropriados (JPG para fotos, PNG para gráficos com transparência) e redimensione as imagens para corresponder ao tamanho de exibição.

Avaliar o desempenho do tema: considere mudar para um tema otimizado para o desempenho se o tema atual estiver causando lentidão significativa.

Receber atendimento para o desempenho da loja virtual

Se você usa um tema gratuito da Shopify, o Atendimento ao cliente da Shopify talvez possa ajudar com melhorias básicas de desempenho.

Se você usa um tema de terceiros e precisa de ajuda, entre em contato com o desenvolvedor do seu tema, contrate um especialista em desempenho na web da Shopify ou um Parceiro da Shopify para desempenho e velocidade do site. Saiba mais sobre como contratar um Parceiro da Shopify.

Se o problema de desempenho for causado por um app, entre em contato com o desenvolvedor do app.

Se você tiver uma equipe de desenvolvimento ou uma agência parceira, também poderá entrar em contato para obter mais ajuda.

Informações técnicas e recursos para a solução de problemas

Se você for um desenvolvedor que busca melhorar o desempenho de uma vitrine virtual, um tema ou um app da Shopify, analise os recursos a seguir para cada Core Web Vital. Saiba mais sobre as práticas recomendadas de desempenho para temas da Shopify.

Velocidade de carregamento

A Largest Contentful Paint (LCP) mede a velocidade de carregamento com base na rapidez com que o maior elemento na tela se torna visível. O Time to first byte (TTFB) e a first contentful paint (FCP) são métricas de apoio que ajudam a entender melhor a causa-raiz do problema. Saiba mais sobre como depurar causas comuns de carregamento lento em vitrines virtuais do Shopify Liquid.

Estabilidade visual

A Cumulative Layout Shift (CLS) mede a estabilidade visual com base na quantidade de conteúdo que se move inesperadamente durante o carregamento. Para uma análise detalhada sobre a depuração da CLS, leia Como otimizar a Cumulative Layout Shift (CLS) em sites da Shopify.

Interatividade

A Interaction to Next Paint (INP) mede a interatividade com base no tempo que a página leva para se tornar responsiva à maioria das ações do usuário. Por exemplo, ações do usuário como clicar em um link ou botão.

Se você está com uma INP insatisfatória, provavelmente há excesso de JavaScript na loja por causa do código do tema, do app ou do gerenciador de tags/terceiros. Elimine os principais responsáveis. Saiba mais em 3 maneiras de encontrar os piores JavaScripts que afetam o carregamento da página. Se os problemas com a INP persistirem, consulte os recursos em web.dev.