Core Web Vitals: como deixar a loja virtual mais rápida e estável

Você abre a sua loja no celular, no 4G do ônibus, e a primeira coisa que aparece é um espaço em branco. Depois surge o banner, empurrando o texto para baixo bem na hora em que você ia tocar em uma categoria. Você toca, nada acontece por um segundo, e só então a página reage. Esse incômodo tem nome e tem medida: são os Core Web Vitals, as métricas que o Google usa para avaliar se uma página entrega uma boa experiência para quem está do outro lado da tela.

Para o lojista, isso não é tema de programador. Cada segundo de espera e cada clique que sai no lugar errado custa venda e, com o tempo, custa posição na busca. A boa notícia é que a maior parte dos problemas nasce de escolhas simples do dia a dia: o tamanho do banner, a quantidade de scripts instalados, a forma como os blocos da página foram montados.

Neste guia você vai entender o que significam LCP, INP e CLS na linguagem de quem vende, como medir cada um na sua loja, quais são as causas mais comuns em e-commerce e que correções práticas resolvem cada uma. No fim, mostro como organizamos isso no Hotel das Lojas para que você foque no que é seu: produto, vitrine e cliente.

O que são os Core Web Vitals, em português claro

Os Core Web Vitals são três medições feitas a partir da navegação de pessoas reais, principalmente no Chrome. Cada uma responde a uma pergunta que o seu cliente faz sem perceber:

• LCP (Largest Contentful Paint): quanto tempo leva para o maior elemento visível aparecer? Em loja virtual, quase sempre é o banner principal ou a foto do produto.
• INP (Interaction to Next Paint): quando eu toco em algo, quanto tempo a página demora para mostrar uma reação? Vale para o botão de comprar, a seleção de tamanho, o menu e o filtro.
• CLS (Cumulative Layout Shift): o conteúdo fica parado ou pula enquanto carrega? Um banner que entra atrasado e empurra a vitrine é o exemplo clássico.

Repare que nenhuma das três mede o tempo total de carregamento. Elas medem percepção. Uma página pode terminar de carregar em seis segundos e ainda ter LCP bom, se o que importa aparece logo. E pode carregar em dois segundos e ter CLS péssimo, se tudo se mexe no caminho.

Os limites de cada métrica e o que eles significam na loja

O Google classifica cada métrica em três faixas. Guarde esta tabela, porque é ela que você vai consultar sempre que testar uma página.

A avaliação considera a experiência da maioria das visitas, e não o melhor caso. Por isso, testar no seu computador com internet de fibra engana. O que conta é o cliente com um celular intermediário e sinal irregular, que é justamente quem compra muito no Brasil.

Como medir os Core Web Vitals da sua loja passo a passo

Antes de mexer em qualquer coisa, tire uma fotografia do estado atual. Assim você sabe se a mudança funcionou. Faça assim:

1. Escolha três páginas-modelo: a página inicial, a categoria que mais vende e o produto mais visitado. Elas representam quase todo o tráfego da loja.
2. Rode o PageSpeed Insights no modo celular para cada uma. No topo aparecem os dados de campo, quando existem, e embaixo o diagnóstico de laboratório.
3. Anote os três números de cada página em uma planilha simples, com a data. Exemplo fictício: home com LCP de 3,8 s, INP de 180 ms e CLS de 0,22.
4. Abra o relatório de Core Web Vitals no Search Console para ver quais grupos de URLs estão com problema. Ele agrupa páginas parecidas, o que ajuda a perceber se o defeito é do modelo de produto ou de uma página isolada.
5. Veja a gravação de uma sessão real. Ferramentas como o Microsoft Clarity com mapas de calor mostram cliques repetidos e toques frustrados, que costumam apontar para INP ruim.
6. Defina a meta por página: qual métrica está pior e qual é a primeira correção. Uma coisa de cada vez.

Dica de quem acompanha muitas lojas: os dados de laboratório servem para diagnosticar, os de campo servem para julgar. Se o laboratório diz que está ótimo e o campo diz que está ruim, acredite no campo, porque ele vem do celular do seu cliente.

LCP: como fazer o conteúdo principal aparecer rápido

Na maioria das lojas, o elemento de LCP é uma imagem. Então o trabalho de LCP é, em boa parte, trabalho de imagem.

Causas mais comuns

• Banner da home exportado direto do programa de design, com 2 ou 3 MB e largura de 4.000 pixels, para ser exibido em uma tela de 400 pixels.
• Carrossel com cinco banners pesados, em que todos carregam juntos, embora só o primeiro apareça.
• Fonte personalizada que segura o texto do banner até terminar de baixar.
• Scripts de terceiros carregando antes do conteúdo e disputando a conexão.

Correções práticas

Comece pelo banner. Uma regra que usamos como referência: banner de topo com até 200 KB no celular e foto de produto com até 150 KB. Se o seu banner tem texto, não coloque o texto dentro da imagem em letras miúdas; além de pesar, fica ilegível no celular. Prefira um banner limpo e textos como elementos da própria página.

Reduza o carrossel. Se ninguém espera o terceiro slide, ele só existe para pesar. Muitas lojas vendem mais com um único banner forte e uma vitrine de produtos logo abaixo. No guia de banners em destaque no topo você vê como trocar e organizar essas imagens.

Na página de produto, a foto principal é o LCP. Fotografe com fundo limpo, recorte bem e envie em boa resolução, mas sem exagero. Siga as orientações de foto principal e galeria do produto para que a primeira imagem seja a melhor e a mais leve possível.

INP: a loja precisa responder ao toque na hora

O INP mede o atraso entre a ação do cliente e a resposta visual. Um INP ruim aparece assim: a cliente toca no tamanho M e a página demora meio segundo para marcar a opção. Ela toca de novo, desmarca sem querer e desiste. Isso é muito comum em lojas de moda e calçados, em que a escolha de variação é obrigatória.

O vilão costuma ser o excesso de scripts

Cada ferramenta instalada roda código no navegador do cliente: chat, pixel de anúncio, pop-up de cupom, contador de visitantes, widget de avaliações de terceiros. Isoladamente, cada uma parece leve. Somadas, ocupam o processador do celular justamente quando o cliente tenta interagir.

Faça um inventário. Liste todos os scripts e pergunte, para cada um: eu uso o dado que ele gera? Quando foi a última vez que olhei? Se a resposta for nunca, remova. Para os que ficam, centralizar a gestão no Google Tag Manager facilita controlar quando cada tag dispara e evita códigos duplicados. O tutorial de Analytics, Pixel e códigos extras mostra onde ficam esses códigos na sua loja.

Outras causas de INP alto

• Pop-up que abre no primeiro toque e bloqueia a página enquanto carrega.
• Menus enormes, com centenas de subcategorias renderizadas de uma vez.
• Filtros que recarregam a lista inteira a cada clique, em categorias com muitos produtos.

Para menus, a regra é simples: até dois níveis e no máximo sete ou oito itens no primeiro nível. Além de responder mais rápido, o cliente encontra o que procura com menos esforço.

CLS: acabe com a página que pula

O CLS é a métrica mais irritante para o cliente e a mais fácil de corrigir. Ela soma todos os deslocamentos inesperados de conteúdo durante a visita. O exemplo que vemos toda semana: a barra de frete grátis aparece no topo um segundo depois da página e empurra tudo para baixo. Quem ia tocar em um produto toca no produto vizinho.

Checklist anti-CLS

1. Toda imagem deve ter proporção definida. Use sempre o mesmo formato de foto de produto, por exemplo quadrado, em toda a loja.
2. Barras de aviso e selos devem ocupar o espaço desde o início, e não entrar depois.
3. Banners de campanha devem ter a mesma proporção do banner que substituem.
4. Pop-ups devem sobrepor a página, e não empurrá-la.
5. Evite blocos que só aparecem depois que um script de terceiro responde, como vitrines externas no meio da home.

Um teste rápido: abra a página no celular com o modo de rede lenta do navegador e observe. Tudo o que se mover depois de aparecer é candidato a correção.

Erros comuns que derrubam os Core Web Vitals em e-commerce

Alguns padrões se repetem tanto que vale listar separadamente:

• Otimizar só a home. A maior parte das visitas que vem do Google entra direto em produto ou categoria. Teste essas páginas primeiro.
• Vídeo no topo da página inicial em reprodução automática, pesado e sem imagem de capa leve.
• Ícones e selos como imagens grandes, quando poderiam ser elementos leves.
• Instalar e esquecer: aplicativos de teste que ficam ativos meses depois da campanha.
• Medir uma vez e nunca mais. Cada banner novo, cada campanha e cada script pode mudar os números.

Como o Hotel das Lojas ajuda a manter os Core Web Vitals no verde

Aqui no Hotel das Lojas, a base técnica da loja já vem pronta: a loja é responsiva, roda em nuvem e as fotos de produto são otimizadas automaticamente quando você envia. Isso tira do seu caminho boa parte do trabalho de LCP que antes exigia programa de edição e paciência.

O ponto mais forte para quem cuida da própria vitrine é o editor visual de arrastar e soltar. Você monta a página com blocos prontos e vê a prévia no computador e no celular antes de publicar. E existe uma verificação antes de publicar que aponta imagens pesadas, problemas de contraste e imagens sem texto alternativo. Na prática, o editor avisa antes que o banner de 3 MB chegue ao seu cliente. O passo a passo está no tutorial de teste A/B e verificação da página.

O teste A/B de blocos também ajuda nessa conta: você pode comparar uma home com carrossel de cinco slides contra uma home com banner único e ver qual converte melhor, em vez de decidir no achismo. E, se algo der errado, o histórico de versões permite voltar à página anterior.

Outro ponto: os temas foram pensados para celular desde o início. O tema Vitrine para multissegmento, por exemplo, organiza banner, categorias e vitrines com hierarquia clara, o que facilita manter o layout estável. Veja todos os recursos da plataforma para entender o que já vem incluído no plano único, sem comissão sobre as vendas.

Plano de 30 dias para melhorar LCP, INP e CLS

Se você quer transformar este artigo em rotina, use este cronograma de exemplo. Ajuste à realidade da sua loja.

Depois do primeiro mês, inclua uma checagem rápida sempre que publicar uma campanha nova. Leva dez minutos e evita que a Black Friday comece com a loja lenta.

Conclusão: velocidade é parte da vitrine

Os Core Web Vitals traduzem em números aquilo que o seu cliente sente: a página aparece rápido, responde ao toque e fica parada no lugar. Cuidar do LCP é cuidar das imagens, cuidar do INP é cuidar dos scripts e cuidar do CLS é cuidar do layout. Nenhuma das três exige saber programar, mas todas exigem atenção constante.

Se você quer uma loja que já nasce com fotos otimizadas, temas responsivos e um editor que avisa sobre imagens pesadas antes de publicar, crie a sua loja no Hotel das Lojas e teste grátis por 7 dias, sem cartão de crédito. Depois, é um plano único de R$ 59,90 por mês, com produtos e visitas ilimitados.