Velocidade na Shopify: tema, apps e imagens

Todas as lojas Shopify rodam nos mesmos servidores e no mesmo CDN, então uma loja lenta é lenta por causa do que ela carrega: o tema, os scripts dos apps, as imagens e os vídeos. Otimizar a velocidade na Shopify significa remover e reduzir essas coisas, não trocar de hospedagem. Na maioria das lojas, os maiores ganhos vêm de remover código de apps que ninguém usa, comprimir a imagem principal do topo e carregar os widgets depois.

Este guia mostra como medir a velocidade do jeito certo e depois passa pelas correções na ordem em que elas costumam dar retorno. Ele faz parte do guia de SEO para Shopify.

Meça as páginas certas

Teste uma página de produto e uma de coleção, não só a home. São essas as páginas que ranqueiam e onde os compradores chegam.

• O Google PageSpeed Insights dá notas de laboratório para um único carregamento e, se a sua loja tiver visitantes suficientes, as Core Web Vitals reais dos usuários do Chrome nos últimos 28 dias. Os números de usuários reais são os que o Google usa.
• O relatório de Core Web Vitals do Search Console agrupa as suas URLs por status, para você ver se todas as páginas de produto têm o mesmo problema.
• O relatório de desempenho web da Shopify, em Analytics, mostra as mesmas métricas de usuários reais ao longo do tempo, o que ajuda a ver se uma mudança funcionou.

Foque nas três Core Web Vitals: Largest Contentful Paint (a rapidez com que a imagem ou o texto principal aparece), Interaction to Next Paint (a rapidez com que a página responde a um toque) e Cumulative Layout Shift (o quanto os elementos pulam na tela). As notas de laboratório variam de um teste para outro; não corra atrás de um 100 perfeito.

1. Remova o código de apps que você não usa

Os apps são a causa mais comum de uma loja Shopify lenta. Cada um que mexe na vitrine pode adicionar JavaScript e CSS a todas as páginas.

• Liste os apps que você tem. Desinstale os que não usa mais.
• Desinstalar nem sempre remove o código que o app adicionou ao tema. Procure o nome do app nos arquivos do tema (Online Store > Themes > Edit code) e remova os snippets e as tags de script que sobraram.
• Prefira apps que usam extensões de tema (blocos de app que você adiciona no editor de temas). Eles saem de forma limpa quando você desinstala e só carregam onde você os coloca.
• Nos apps que você mantém, veja se eles carregam em todas as páginas. Uma tabela de medidas só precisa estar nas páginas de produto.

2. Corrija a maior imagem

Na maioria das páginas de produto e de coleção, o maior elemento é uma foto de produto ou um banner no topo. Deixe-o rápido:

• Envie arquivos de tamanho razoável. Redimensione as fotos para algo entre 2.000 e 2.500 pixels de largura antes de enviar e comprima. O CDN da Shopify entrega versões redimensionadas e formatos modernos como WebP automaticamente, mas um original enorme ainda custa tempo.
• Não use lazy loading na primeira imagem. As imagens do topo da página devem carregar na hora. O lazy loading é para as imagens mais abaixo.
• Use imagens responsivas. Os temas atuais usam os filtros image_url e image_tag da Shopify para entregar o tamanho certo para cada tela. Temas mais antigos podem entregar um único tamanho grande para todos os aparelhos.
• Evite vídeo com reprodução automática no topo. Se precisar de vídeo, mostre primeiro uma imagem de capa e carregue o vídeo depois.

3. Carregue os widgets depois

Avaliações, balões de chat, pop-ups, carrosséis de upsell e feeds de redes sociais raramente precisam carregar antes do produto.

• Carregue o chat e os pop-ups depois que a página estiver interativa ou após um intervalo.
• Coloque os widgets de avaliação mais abaixo na página para que não bloqueiem o conteúdo principal. Mantenha o texto das avaliações no HTML da página para o SEO.
• Remova os pixels de rastreamento de terceiros que você não consulta mais. Cada um é mais um script.

4. Use um tema atual

Os temas feitos para o Online Store 2.0, incluindo os temas gratuitos da Shopify baseados no Dawn, são pensados para blocos de app, imagens responsivas e um JavaScript mais leve. Um tema de vários anos atrás, com sliders pesados e jQuery, pode ser lento não importa o que você remova.

Antes de trocar, teste a página de produto da demo do novo tema no PageSpeed Insights. Um tema que é lento na própria demo também vai ser lento com os seus produtos.

5. Acabe com os deslocamentos de layout

Conteúdo que pula enquanto a página carrega piora o Cumulative Layout Shift e irrita os compradores.

• Defina largura e altura nas imagens (o filtro image_tag da Shopify já adiciona).
• Reserve espaço para banners e barras de aviso que aparecem depois do carregamento.
• Carregue fontes personalizadas com font-display: swap e limite a quantidade de pesos.

O que ajuda pouco

• Apps de aceleração. A maioria adiciona o próprio script à página. Remover código ganha de adicionar código.
• Trocar de hospedagem ou de CDN. Na Shopify você não pode, e nem precisa.
• Minificar alguns kilobytes de CSS. Isso raramente muda as métricas de usuários reais, se comparado a remover um app ou corrigir a imagem principal.

Mantenha a loja rápida

A velocidade piora conforme você adiciona apps e seções. Teste de novo uma página de produto depois de cada app novo e olhe o relatório de Core Web Vitals todo mês. Uma auditoria de site, como a do zaDojo, aponta páginas lentas e imagens grandes demais na loja inteira, para você não testar uma página de cada vez.

Perguntas frequentes

A velocidade da Shopify afeta o SEO? Sim, um pouco. As Core Web Vitals são um sinal de ranqueamento, mas conteúdo e relevância pesam mais. A velocidade pesa mais nas vendas: os compradores abandonam páginas de produto lentas.

Qual é uma boa nota de velocidade na Shopify? Mire em Core Web Vitals "Boas" nos dados de usuários reais (Largest Contentful Paint abaixo de 2,5 segundos, Interaction to Next Paint abaixo de 200 milissegundos, Cumulative Layout Shift abaixo de 0,1). A nota de laboratório de 0 a 100 é uma referência, não uma meta.

Por que a minha loja Shopify é lenta no celular? Os celulares têm processadores e conexões mais lentos, então o JavaScript pesado dos apps atrapalha muito mais neles. Teste primeiro no celular.