Resposta rápida: na maioria das lojas Shopify, o problema de velocidade são as apps e as imagens, por essa ordem, e a solução é a remoção e compressão em vez de engenharia sofisticada. Ignore a pontuação de velocidade do administrador; meça o Largest Contentful Paint, Interaction to Next Paint e Cumulative Layout Shift a partir de visitantes reais, porque são esses que o Google utiliza e que têm correlação com a conversão.

Meça os três números certos

O administrador do Shopify mostra uma pontuação de velocidade. É uma pontuação de laboratório do Lighthouse — uma carga simulada num dispositivo simulado — e varia por razões que nada têm a ver com os seus visitantes. Útil para comparar a sua loja consigo mesma no mês passado; não é o que o Google utiliza.

O Google utiliza dados de campo: o que realmente aconteceu a pessoas reais em conexões reais.

Métrica Mede Aprovação Culpado habitual no Shopify
LCP Quando a imagem principal ou o cabeçalho é pintado < 2.5s Imagem hero carregada tardiamente, não comprimida, ou atrás de um slider
INP Quão rápido a página responde a um toque < 200ms JavaScript de app a executar na thread principal
CLS Quanto o layout salta < 0.1 Imagens sem dimensões, banners injetados tardiamente, troca de fontes

O relatório Core Web Vitals do Search Console mostra estes dados dos seus próprios visitantes. O PageSpeed Insights mostra tanto dados de campo como de laboratório para um URL — leia primeiro a seção de campo e trate a seção de laboratório como um diagnóstico do porquê.

As apps são geralmente a maior linha única

Cada app que injeta um script adiciona bytes para download, análise e execução, e isso acontece em todas as páginas, quer essa página use a app ou não. Doze apps não representam doze pequenos custos; são doze a competir pelo mesmo thread principal.

Audite corretamente:

  1. Liste todas as apps instaladas e anote o que cada uma lhe proporciona. Qualquer coisa que não consiga justificar é uma candidata.
  2. Desinstale as candidatas.
  3. Depois verifique o tema para restos. Este é o passo que as pessoas pulam. Desinstalar uma app nem sempre remove a tag de script que foi adicionada ao theme.liquid, então pode estar a pagar o custo de carregamento de uma app que já não tem. Procure no tema o nome da app e o domínio CDN.
  4. Reavalie após cada remoção, não no final, para saber qual delas teve impacto.

O simulador Googlebot mostra o HTML bruto que um crawler recebe, o que é uma maneira rápida de ver quanto da sua página é script de terceiros antes de qualquer coisa ser renderizada.

Imagens: comprimir, dimensionar e parar o lazy-loading do hero

As imagens são geralmente os maiores bytes numa página Shopify e a coisa mais fácil de reduzir pela metade.

A CDN da Shopify já faz mais do que a maioria dos comerciantes percebe. Serve WebP automaticamente para navegadores que o aceitam e redimensiona mediante parâmetros de URL. O que não pode fazer é desfazer um original de 4 MB — servirá um formato menor, não uma fotografia menor. Comprimir antes de carregar.

Dimensione o pedido para o espaço. Uma imagem de 2,400px exibida numa coluna de 600px desperdiça três quartos dos seus bytes. Os URLs de imagem da Shopify aceitam ?width= — use-o e forneça um srcset para que os telemóveis não descarreguem imagens de desktop.

O hero é a exceção a todas as regras de lazy-loading. É quase sempre o elemento LCP, por isso o lazy-loading adia a única imagem que o Google está a cronometrar. Defina-o como loading="eager" e fetchpriority="high", e faça lazy-load de tudo abaixo da dobra. As lojas que "adicionam lazy loading em todo o lado" e ficam mais lentas quase sempre fizeram exatamente isto.

Defina sempre largura e altura. Sem elas, o navegador não pode reservar espaço, a página reorganiza-se quando a imagem chega, e isso é CLS. SEO de Imagens na Shopify cobre o lado do alt-text e do nome do ficheiro; isto é puramente o lado do desempenho.

Tipografias e o custo invisível

As tipografias personalizadas têm um custo real pago em cada primeira visita. Três regras cobrem a maior parte disso:

  • Envie menos. Duas famílias e dois pesos cada é suficiente. Quatro famílias é uma decisão de design com um custo de desempenho.
  • font-display: swap. Caso contrário, o texto fica invisível enquanto a fonte carrega — uma página em branco que parece quebrada, mesmo quando é rápida.
  • Pré-conectar ao host da fonte. Uma linha em theme.liquid que poupa uma pesquisa DNS e um handshake TLS no caminho crítico.

A própria biblioteca de fontes da Shopify é servida a partir da mesma origem que a loja, o que elimina completamente o custo de conexão. Vale a pena considerar se a fonte da sua marca não é essencial.

O que não pode corrigir e deve parar de tentar

A Shopify controla o tempo de resposta do servidor, a CDN, o checkout e o JavaScript da plataforma principal. Não pode ajustar nada disso, e uma parte significativa de qualquer relatório do Lighthouse será composta por elementos dessa categoria.

Isto é importante para definir expectativas: há um limite, é o mesmo limite para todas as lojas na plataforma, e um "serviço de otimização de velocidade" que promete ultrapassá-lo está a vender outra coisa. O que é genuinamente seu é tudo o que acontece após a chegada do HTML — e numa loja com muitas aplicações, é aí que reside quase toda a perda evitável.

Um plano ordenado

Semana 1 — medir e remover. Registe LCP, INP e CLS a partir do Search Console. Audite as aplicações, desinstale as que não são justificáveis, procure scripts remanescentes no tema. Meça novamente.

Semana 2 — imagens. Comprima e volte a carregar as imagens principais na sua página inicial e nas coleções principais. Adicione largura e altura explícitas. Corrija o atributo de carregamento das imagens principais. Reduza as imagens do slider ao que é realmente visível.

Semana 3 — fontes e terceiros. Reduza as famílias e pesos de fontes. Adicione preconnect. Adie qualquer script de terceiros restante que não seja necessário para a primeira pintura.

Semana 4 — medir novamente e parar. Os dados de campo têm um atraso de até 28 dias, por isso não avalie a semana 1 na semana 2. Quando os três números passarem, pare: mais otimização numa loja aprovada é um esforço que renderia mais noutro lugar.

Onde a velocidade se posiciona em relação a tudo o resto

A velocidade é um fator de desempate. Uma página rápida que responde mal à consulta ainda perde para uma página lenta que a responde bem — é por isso que "melhorar os Core Web Vitals" raramente é o item de maior valor numa loja com 2.000 produtos e sem meta descrições.

Corrija isso porque os visitantes abandonam lojas lentas e porque é um fator real de classificação, mas organize-o de forma honesta. A checklist de SEO para Shopify coloca-o em ordem em relação ao resto, e a auditoria gratuita dir-lhe-á se a velocidade é realmente a sua restrição principal ou apenas a coisa mais visível em que trabalhar.