Core Web Vitals para Shopify: Guia Completo (2026)

Shopify e Core Web Vitals: Você Não Controla o Servidor

O Shopify é fundamentalmente diferente do WordPress ou sites criados de forma customizada quando se trata de otimização dos Core Web Vitals. No WordPress, você controla tudo: o servidor, o banco de dados, a camada de cache, cada linha de código. No Shopify, você está trabalhando dentro de uma plataforma gerenciada onde algumas coisas estão totalmente fora do seu alcance.

De acordo com o Core Web Vitals Technology Report, o Shopify lidera o WordPress nas taxas de aprovação de CWV em dispositivos móveis (cerca de 65% contra 44% no final de 2025). Isso ocorre porque a infraestrutura do Shopify é excelente por padrão: servidores rápidos, uma CDN global via Cloudflare, conversão automática de formato de imagem e temas base pré-otimizados. A plataforma lida bem com o lado do servidor.

Os problemas vêm do que os lojistas adicionam por cima: aplicativos, scripts de terceiros, modificações de temas customizados, imagens superdimensionadas e carregamento excessivo de fontes. É aí que as lojas Shopify falham nos Core Web Vitals. E como você tem acesso limitado ao servidor e ao código principal, sua estratégia de otimização deve ser diferente.

Core Web Vitals do Shopify em Números

O Shopify está em 2º lugar no geral no CrUX Technology Report para taxas de aprovação dos Core Web Vitals, atrás apenas do Duda (uma plataforma menos usada). Os números do CrUX e de dados de benchmark independentes:

Fontes: CrUX Technology Report (junho de 2025), análise de CMS do SearchEngineJournal, benchmark da Shero Commerce com 1.000 lojas (novembro de 2025). *Valores medianos do benchmark da Shero, não o p75 do CrUX.

O benchmark da Shero Commerce de 1.000 lojas reais no Shopify descobriu que apenas 48% passam em todos os três Core Web Vitals no mobile. Isso é menor do que o CrUX Technology Report mostra para o Shopify em geral, o que sugere que as lojas que aparecem no CrUX (exigindo tráfego suficiente do Chrome) são tendenciosas para lojas maiores e mais bem otimizadas. A mediana de LCP no mobile de 2.26 segundos paira perigosamente perto do limite "bom" de 2.5 segundos, o que significa que até mesmo pequenas adições (mais um aplicativo, uma imagem de destaque não otimizada) podem empurrar uma loja da aprovação para a falha.

CLS e INP não são o problema. O CLS mediano do Shopify de 0.01 é excelente, e o INP mediano de 153ms está confortavelmente dentro da faixa boa. O LCP é onde as lojas Shopify falham nos Core Web Vitals.

Dados reais de usuários do CoreDash de lojas Shopify confirmam esse padrão. As lojas que falham no CWV quase sempre falham no LCP. Lojas carregando mais de 8 scripts de aplicativos de terceiros mostram um LCP mediano no mobile acima de 3.0 segundos. Lojas com 3 ou menos scripts de aplicativos mantêm um LCP mediano abaixo de 2.0 segundos. A correlação entre a contagem de aplicativos instalados e o LCP é o indicador mais forte de falha de CWV no Shopify que vemos nos dados.

O Que Você Não Pode Controlar no Shopify

Antes de otimizar, entenda as restrições. No Shopify, você não pode:

• Mudar o servidor ou hospedagem. O Shopify roda em sua própria infraestrutura. Você não pode mudar para um host mais rápido, configurar o cache no nível do servidor ou ajustar as configurações do PHP. A boa notícia: o TTFB do Shopify é geralmente excelente (abaixo de 300ms para a maioria das regiões).
• Remover o content_for_header. O Shopify injeta JavaScript obrigatório em todas as páginas através desta tag Liquid. Isso inclui as próprias análises do Shopify, scripts de checkout e infraestrutura de carregamento de aplicativos. Você não pode removê-lo, e adiá-lo corre o risco de quebrar o checkout e a funcionalidade dos aplicativos.
• Controlar a CDN. O Shopify usa a Cloudflare como sua CDN. Você não pode configurar regras de cache, edge workers ou cabeçalhos personalizados da maneira que faria na sua própria configuração da Cloudflare.
• Acessar o banco de dados ou código de backend. A linguagem de template Liquid do Shopify roda no lado do servidor, mas você não pode otimizar as consultas do banco de dados ou a renderização no lado do servidor além do que o Liquid fornece.

Isso significa que toda a sua estratégia de otimização se concentra no que você pode controlar: o código do seu tema, seus aplicativos instalados, suas imagens, suas fontes e seus scripts de terceiros.

O Problema Número 1 de CWV no Shopify: Excesso de Aplicativos

Os aplicativos Shopify instalados são a maior causa individual de falha nos Core Web Vitals em lojas Shopify. Todo aplicativo pode injetar JavaScript e CSS em cada página de sua loja, mesmo em páginas onde esse aplicativo não é usado. Um aplicativo de avaliações sendo carregado em sua página inicial. Um widget de recomendação de produtos sendo carregado em sua página de contato. Um cronômetro de contagem regressiva sendo carregado em cada página de produto, mesmo quando nenhuma promoção está ativa.

Como os Aplicativos Injetam Código

Os aplicativos do Shopify injetam código de várias maneiras, e isso é importante para a limpeza:

• App Embeds (editor de tema): podem ser desativados no editor de tema em "App Embeds". Este é o método mais limpo e fácil de gerenciar.
• Snippets de tema: alguns aplicativos adicionam código diretamente aos arquivos do seu tema durante a instalação. Desinstalar o aplicativo pode não remover este código. Você precisa verificar manualmente as pastas snippets/ e sections/ por arquivos remanescentes.
• ScriptTag API: os aplicativos podem injetar scripts programaticamente sem tocar nos arquivos de tema. Eles carregam através do content_for_header do Shopify. Desinstalar o aplicativo os remove, mas o script pode estar em cache.
• Carregadores de terceiros: alguns aplicativos carregam JavaScript externo a partir de sua própria CDN, criando pesquisas adicionais de DNS e solicitações de rede.

O Processo de Auditoria de Aplicativos

É assim que eu audito aplicativos do Shopify em relação ao impacto no desempenho:

1. Execute sua página inicial, uma página de produto, uma página de coleção e a página do carrinho no PageSpeed Insights. Registre as pontuações de LCP, INP e CLS.
2. Abra o Chrome DevTools e vá para a aba Coverage. Recarregue a página e observe a porcentagem de JavaScript não utilizado. Em lojas Shopify sobrecarregadas, de 60% a 80% do JavaScript carregado não é utilizado em uma determinada página.
3. Verifique a aba Network filtrada por JavaScript. Classifique por tamanho. Identifique quais scripts vêm de aplicativos versus seu tema. A coluna "Initiator" informa o que carregou cada script.
4. Desative os aplicativos um de cada vez (ou desligue seus App Embeds) e teste novamente. Meça o impacto de INP e LCP de cada aplicativo individualmente.
5. Para cada aplicativo, decida: o valor comercial vale o custo de desempenho? Ele pode ser substituído por uma alternativa mais leve? Ele pode ser carregado apenas em tipos de página específicos?

Dados do CoreDash de projetos de otimização do Shopify mostram o impacto típico da limpeza de aplicativos: remover um único script de widget de avaliações desnecessário melhorou o INP mediano em 45ms em uma loja. Remover três aplicativos não utilizados (uma ferramenta de popup previamente desativada, um programa de fidelidade e um widget de chat desativado) reduziu o JavaScript total da página em 380KB e melhorou o LCP no mobile em 1.1 segundos. Todo aplicativo que você não usa ativamente está deixando sua loja mais lenta por nada. Remova-o.

Corrigindo o LCP no Shopify

Em lojas Shopify, o elemento de LCP é quase sempre a imagem do banner de destaque na página inicial, a imagem do produto em destaque nas páginas de produtos ou o banner da coleção nas páginas de coleções. A CDN do Shopify serve imagens automaticamente no formato WebP, o que ajuda. Mas há várias otimizações que você precisa lidar por conta própria.

Faça o Preload da Imagem de Destaque

O filtro Liquid image_tag do Shopify possui um parâmetro embutido de preload. Quando definido como true, o Shopify envia um cabeçalho HTTP Link com rel=preload do servidor. O navegador recebe isso antes mesmo de começar a analisar o HTML, tornando-o o sinal de preload mais antecipado possível. Ele também inclui automaticamente o imagesrcset e o imagesizes da tag, para que o preload responsivo funcione corretamente sem risco de incompatibilidade de URL.

Combine isso com fetchpriority: 'high' na tag <img> e loading: 'eager' para substituir o carregamento preguiçoso padrão do Shopify para as seções abaixo da dobra. Para a imagem de destaque, seria algo assim:

{{ section.settings.hero_image | image_url: width: 1200 | image_tag:
    preload: true,
    fetchpriority: 'high',
    loading: 'eager',
    sizes: '100vw'
}}

Essa única linha lhe fornece: preload por cabeçalho HTTP (o mais cedo possível), fetchpriority="high" na <img>, carregamento antecipado (eager) em vez de preguiçoso (lazy), atributos width e height automáticos (evitando CLS) e geração automática de srcset. Sempre defina fetchpriority="high" na imagem de destaque, mesmo se você não usar o preload.

Se Seu Tema Usa uma Imagem de Fundo CSS para o Destaque

Alguns temas do Shopify renderizam o banner de destaque como um background-image CSS em vez de uma tag <img>. Este é um antipadrão para o LCP. Você perde o fetchpriority, perde o srcset automático, perde o preload de cabeçalho HTTP do Shopify, e o navegador sequer pode começar a buscar a imagem até que tenha feito o download e analisado o arquivo CSS.

A correção adequada é converter o fundo CSS em uma tag <img> para que você possa usar o image_tag corretamente. Essa é uma mudança no código do tema, mas é a coisa certa a fazer.

Se você absolutamente não puder alterar o template, você pode adicionar uma dica manual de preload em theme.liquid:

{%- if template == 'index' -%}
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 1200 }}">
{%- endif -%}

Fique avisado: a URL no preload deve corresponder exatamente à URL em seu CSS, incluindo o carimbo de versão ?v= do Shopify e o parâmetro &width=. Se eles diferirem em até um parâmetro, o navegador faz o download da imagem duas vezes, tornando o desempenho pior em vez de melhor.

Para a estratégia completa de preload da imagem LCP, veja como fazer o preload da imagem de Largest Contentful Paint.

Não Use Lazy Load Acima da Dobra

Muitos temas do Shopify aplicam loading="lazy" em todas as imagens, incluindo a de destaque. Isso instrui o navegador a despriorizar a imagem mais importante da página. Garanta que o seu tema exclua as imagens acima da dobra do lazy loading. Para temas modernos usando o filtro image_tag do Shopify, use loading: 'eager' para imagens de destaque.

Otimize o Tamanho das Imagens

A CDN do Shopify pode redimensionar imagens em tempo real usando parâmetros na URL, mas seus templates Liquid precisam solicitar o tamanho correto. Não carregue uma imagem com 2000px de largura quando ela é exibida apenas em 800px. Use a marcação de imagem responsiva do Shopify com os devidos atributos srcset e sizes. Veja o nosso guia sobre como otimizar imagens.

Corrigindo o INP no Shopify

Falhas de INP no Shopify são quase inteiramente causadas por JavaScript bloqueando a thread principal. A injeção do content_for_header do próprio Shopify já adiciona JavaScript de base que você não pode remover. Tudo o que você adiciona em cima disso agrava o problema.

Adie Scripts Não Críticos de Terceiros

Widgets de chat (Tidio, Zendesk, Intercom), aplicativos de avaliações (Judge.me, Yotpo, Loox), ferramentas de personalização (popups do Klaviyo, Privy) e análises (Google Analytics, Facebook Pixel, Hotjar) não devem carregar durante a renderização inicial da página. A abordagem correta é o requestIdleCallback: o navegador carrega esses scripts apenas quando a thread principal estiver ociosa, geralmente alguns segundos após a página ser renderizada.

Não use o adiamento baseado em interação (carregar os scripts no primeiro scroll, clique ou toque). Quando um usuário toca em um botão e seu site responde carregando 500KB de JavaScript de terceiros naquele mesmo evento, a thread principal é bloqueada e essa interação recebe uma pontuação de INP terrível. O propósito do adiamento é justamente manter a thread principal livre para as interações do usuário, não competir com elas.

Substitua o atributo src por data-src nos scripts não críticos, e então reverta-os de volta quando o navegador estiver ocioso:

<script>
(window.requestIdleCallback || function(cb) { setTimeout(cb, 1); })(function() {
  document.querySelectorAll('script[data-src]').forEach(function(s) {
    s.src = s.dataset.src;
  });
});
</script>

O fallback do setTimeout cobre o Safari, que não oferece suporte para o requestIdleCallback. Diferente do requestIdleCallback, ele não espera por uma janela ociosa real. Mas isso ainda divide o trabalho da thread principal e os scripts injetados dinamicamente contornam o preload scanner de qualquer forma, tornando-o um fallback bom o suficiente na prática.

Para mais estratégias de adiamento de JavaScript, veja 14 métodos para adiar o JavaScript.

Reduza o JavaScript do Tema

Os temas do Online Store 2.0 do Shopify (como o Dawn) foram criados para serem enxutos, mas muitos temas de terceiros adicionam JavaScript pesado para mega menus, sliders de produtos, modais de quick view e animações. Audite o JavaScript do seu tema usando a aba Coverage do Chrome DevTools. Se o seu tema carrega mais de 200KB de JavaScript, procure por recursos que você pode desativar ou substituir por alternativas em CSS.

Corrigindo o CLS no Shopify

A alteração do layout cumulativo (Cumulative Layout Shift) em lojas Shopify é geralmente causada por três coisas: imagens sem dimensões, troca de fontes e conteúdo injetado dinamicamente por aplicativos.

Defina as Dimensões das Imagens nos Templates Liquid

Verifique seus templates Liquid para tags <img> que não possuem atributos width e height. O filtro image_tag do Shopify pode inserir esses atributos automaticamente:

{{ product.featured_image | 
   image_tag: widths: '200,400,800', sizes: '(max-width: 768px) 100vw, 50vw' }}

Isso gera imagens responsivas com proporções adequadas, prevenindo a mudança de layout conforme as imagens são carregadas.

Reserve Espaço para Conteúdo Dinâmico

App embeds que injetam estrelas de avaliações, selos de confiança, cronômetros de contagem regressiva ou barras de anúncios após o carregamento da página causam CLS. Para cada elemento dinâmico, reserve espaço com o min-height do CSS, de forma que o conteúdo ao redor não mude de lugar quando o elemento aparecer. Isso é especialmente importante para elementos injetados acima do conteúdo já existente.

Otimize o Carregamento de Fontes

Se o seu tema do Shopify carrega web fonts personalizadas, certifique-se de que elas usem font-display: swap com uma fonte de fallback bem compatível. Faça o preload dos seus arquivos de fontes principais para reduzir o tempo antes do texto ser renderizado na fonte correta. Carregue apenas os pesos e estilos de fonte que você realmente usar. Veja o nosso guia sobre otimização de fontes.

Seleção de Tema do Shopify e Desempenho

A escolha do seu tema define a linha de base de desempenho para sua loja. O projeto ThemeVitals acompanha dados do CrUX no mundo real para temas do Shopify. Principais descobertas:

• O Dawn (tema gratuito padrão do Shopify) tem consistentemente um bom desempenho em Core Web Vitals porque foi construído tendo o desempenho como prioridade.
• Temas com muitas seções, animações e recursos nativos (mega menus, product quick view, gavetas de carrinho AJAX) tendem a ter mais JavaScript e um INP pior.
• Temas da Online Store 2.0 geralmente são mais rápidos que os temas antigos porque utilizam a arquitetura moderna de seções do Shopify e carregamento de assets.

Se você está escolhendo um novo tema, verifique os dados do CrUX do mesmo no ThemeVitals antes de comprá-lo. A otimização de desempenho mais barata é começar com um tema rápido.

O Que o Shopify Faz Bem Por Padrão

O Shopify faz muitas coisas de forma correta assim que sai da caixa:

• Infraestrutura rápida: Os servidores e a CDN do Cloudflare do Shopify fornecem de forma consistente um TTFB baixo globalmente.
• WebP Automático: A CDN do Shopify converte as imagens para o formato WebP automaticamente quando o navegador possui suporte.
• HTTP/2 e Brotli: ativados por padrão em todas as lojas Shopify.
• CDN de Imagem com redimensionamento em tempo real: você pode requisitar qualquer imagem em qualquer largura por meio de parâmetros da URL.
• Dicas de preconnect: O Shopify adiciona dicas de preconnect para os domínios de sua CDN automaticamente.

Esses padrões são a razão pela qual o desempenho base do Shopify é bom. O seu trabalho é não desfazer essas vantagens com aplicativos e scripts excessivos.

Monitorando Sua Loja Shopify

O painel de administração do Shopify inclui uma "Speed Score" mas este é um número simplificado baseado no Lighthouse que não representa seus Core Web Vitals reais. Para monitoramento de desempenho de fato:

• Google Search Console: confira o relatório dos Core Web Vitals para obter dados de campo (field data) de toda a sua loja
• CoreDash: instale o snippet leve de RUM (uma linha de código em theme.liquid) para ter dados dos Core Web Vitals em tempo real segmentados por tipo de página, dispositivo e país
• PageSpeed Insights: teste URLs individuais de produto, coleção e da página inicial para obter dados de diagnóstico

Faça o monitoramento após cada instalação de aplicativo, atualização de tema e lançamento de campanha sazonal. Regressões de desempenho no Shopify quase sempre são causadas por algo que foi adicionado recentemente.

Dados de monitoramento do CoreDash demonstram que a causa mais comum de regressão do CWV no Shopify é a instalação de um novo aplicativo que injeta JavaScript globalmente. Em média, um novo aplicativo Shopify acrescenta 50KB a 150KB de JavaScript em todo carregamento de página. Em uma loja que está bem no limite de LCP (2.3 a 2.5 segundos), a instalação de apenas um aplicativo pode estourar esse teto. A segunda causa mais comum são as mudanças sazonais: banners de campanhas de Black Friday, popups de datas festivas, e cronômetros de promoções que são acrescentados em ocasiões especiais e que depois são esquecidos.