# Otimização de e-commerce para mobile: Core Web Vitals, checkout e os ajustes específicos que aumentam a conversão

> De 70% a 85% do tráfego de e-commerce vem do celular. Os dez pontos específicos (Web Vitals, áreas de toque, preenchimento automático, Apple Pay, zona do polegar) que fecham a diferença de conversão entre mobile e desktop, com ferramentas e referências reais.

Ryan Badger - 1 de maio de 2025 - 8 min de leitura

## Por que o mobile é o jogo inteiro

De 70% a 80% do tráfego da sua loja virtual vem do celular. Em boa parte das categorias de consumo, chega a 85%. A conversão no desktop costuma ser de 2 a 3 vezes a do mobile, o que diz menos sobre o desktop ser melhor e mais sobre o mobile estar quebrado na maioria das lojas.

Uma experiência mobile bem otimizada pode fechar essa diferença e, muitas vezes, inverter o placar: algumas marcas DTC já convertem no mobile no mesmo nível do desktop, ou acima. A diferença é específica, mensurável e tem mais a ver com higiene do que com inovação.

Este post mostra o que realmente move a conversão no mobile, com referências, ferramentas e o que corrigir. Nada de "projete pensando primeiro no mobile". São as verificações específicas que geram o ganho acumulado.

## 1. Core Web Vitals e por que o Google presta atenção neles

O Google usa as Core Web Vitals como sinal de ranqueamento e como indicador da qualidade da experiência. Além do ângulo de SEO, essas métricas são ótimas previsoras de conversão.

### LCP (Largest Contentful Paint)

Tempo até o maior elemento visível sem rolar a página (em geral a imagem principal ou o H1) ser renderizado. Meta: menos de 2,5 segundos em 4G no celular.

Causas mais comuns de um LCP ruim:

- Imagem principal sem compressão ou grande demais
- Carregamento de fonte web bloqueando a renderização
- Scripts de terceiros (widgets de chat, analytics, ferramentas de teste A/B) injetados no `<head>`

### INP (Interaction to Next Paint)

Tempo entre uma interação do usuário (um toque) e a atualização visual seguinte. Meta: menos de 200 ms.

Causas mais comuns de um INP ruim:

- Páginas pesadas em JavaScript (lojas em React/Vue sem divisão de código)
- Scripts de analytics ou de chat disparando de forma síncrona na interação
- Atraso de toque em navegadores móveis mais antigos

### CLS (Cumulative Layout Shift)

Elementos pulando pela página enquanto ela carrega. Meta: menos de 0,1.

Causas mais comuns:

- Imagens sem os atributos width/height
- Anúncios ou embeds de terceiros que carregam depois do conteúdo
- Fontes que carregam e mudam o tamanho do texto

### Como verificar

Grátis: o [PageSpeed Insights](https://pagespeed.web.dev/) roda o Lighthouse e reporta as três. Teste a página de produto que mais fatura, não a página inicial. Corrija o que estiver vermelho, aceite o que estiver amarelo e siga em frente.

Pago / mais a fundo: WebPageTest.org para análise em cascata, aba Performance do Chrome DevTools para perfilamento local.

## 2. Velocidade mobile abaixo de 3 segundos (mobile de verdade, não desktop limitado)

O "emulador mobile" de um navegador de desktop usa uma conexão rápida e uma CPU rápida. Celulares de verdade têm conexões e CPUs mais lentas. A diferença é considerável.

Teste em celulares reais, em 4G. Se a sua página leva 2 segundos no emulador mobile do Chrome, provavelmente leva de 4 a 5 segundos em um Android intermediário no 4G.

### Maiores ganhos de velocidade (em ordem)

1. **Otimização de imagens:** comprima a 80% de qualidade, redimensione para as dimensões realmente necessárias, sirva WebP ou AVIF. A Shoprocket faz isso automaticamente via Cloudflare
2. **Carregamento lento (lazy-load) do conteúdo abaixo da dobra.** Imagens, iframes e scripts pesados não devem carregar até que o usuário role até eles
3. **Adie o JavaScript não crítico.** Analytics, widgets de chat e ferramentas de teste A/B não devem bloquear a renderização
4. **Faça cache agressivo de recursos estáticos.** Cache de 1 ano em imagens, fontes, CSS e JS com URLs com hash
5. **Use uma CDN** (Cloudflare, Fastly ou a embutida na sua plataforma). Entrega os arquivos a partir de pontos próximos geograficamente
6. **Reduza os scripts de terceiros.** Cada pixel e tag acrescenta cerca de 50 a 200 ms; revise o que é realmente necessário

## 3. Tamanho das áreas de toque

As Human Interface Guidelines da Apple especificam áreas de toque de no mínimo 44×44 pixels. O Material do Google especifica 48×48. A maioria das versões "mobile" dos temas não atinge nenhum dos dois.

**Correções:**

- Botões com pelo menos 44 px de altura e 8 a 12 px de preenchimento interno
- Links de navegação com pelo menos 44 px de altura
- Campos de formulário com pelo menos 44 px de altura (ajuda também na acessibilidade)
- Espaço de pelo menos 8 px entre áreas de toque vizinhas

Teste: abra a sua loja no celular. Tente tocar na navegação por categorias com o polegar. Você erra o toque? Isso é um problema de área de toque.

## 4. Particularidades do checkout no mobile

O carrinho e o checkout no mobile são onde a maior parte da conversão vaza. Lista de tarefas específica:

### Formulários em coluna única

Formulários em duas colunas funcionam no desktop e falham no mobile. Empilhe todos os campos na vertical. Sem exceções.

### Tipos de campo adequados

- Campo de e-mail: `type="email"` (abre o teclado de e-mail com o símbolo @)
- Telefone: `type="tel"` (teclado numérico)
- CEP: `type="text" inputmode="numeric"` para países com código postal numérico
- Número do cartão de crédito: `type="text" inputmode="numeric" autocomplete="cc-number"` (faz o preenchimento automático funcionar)

A maioria das plataformas acerta isso por padrão. Vale conferir o formulário no celular; se aparecer o teclado errado, corrija.

### Compatibilidade com preenchimento automático

Os navegadores podem preencher automaticamente nome, endereço, e-mail, telefone e dados do cartão se os atributos `autocomplete` do formulário estiverem corretos. Um cliente que toca numa sugestão de preenchimento automático conclui o checkout em 3 segundos. Sem o preenchimento automático, ele digita à mão mais de 12 campos.

Valores padrão de autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Botão Adicionar ao carrinho fixo nas páginas de produto

Role uma página de produto no celular por 3 telas e o botão Adicionar ao carrinho sai da tela. Solução: uma barra fixa na parte de baixo, com o preço e o botão, que aparece quando o botão original sai de vista.

### Apple Pay + Google Pay + Link

Estes são os maiores ganhos individuais no checkout mobile. Pagamento com um toque, sem digitar nada, com autenticação biométrica nativa.

- **Apple Pay:** ativado automaticamente assim que você verifica seu domínio na Stripe (a Shoprocket cuida disso)
- **Google Pay:** semelhante
- **Stripe Link:** preenche o cartão e o endereço a partir da identidade entre sites do Link

Todo checkout mobile sem esses três está perdendo clientes. Ative os três.

## 5. Redução de campos do formulário

Cada campo no seu checkout mobile é um ponto de atrito. Revise seus campos:

**Normalmente necessários:**

- E-mail
- Endereço de entrega (nome, rua, cidade, CEP, país)
- Dados de pagamento (ou Apple/Google Pay)

**Frequentemente coletados em excesso:**

- Número de telefone (só se você precisar dele para a entrega ou para as transportadoras; muitas não precisam)
- Data de nascimento (quase nunca é necessária na compra)
- Nome da empresa (só para B2B)
- Inscrição na newsletter (pré-marcada onde a lei permitir; caixa separada nos demais casos)
- "Como você nos conheceu?" (mova para uma pesquisa pós-compra)

Menos campos = checkout mais rápido = mais conclusões. Cada campo que você remove representa, em média, uma melhora de 5% a 10% na conclusão do checkout mobile, de forma cumulativa.

## 6. Texto legível e comprimento de linha no mobile

- **Texto corrido:** 16 px no mínimo (o padrão do iOS e a diretriz do Material do Google)
- **Comprimento da linha:** de 45 a 75 caracteres
- **Altura da linha:** de 1,4 a 1,6 vez o tamanho da fonte
- **Contraste:** no mínimo WCAG AA (4,5:1 para texto normal, 3:1 para texto grande)

Se os clientes dão zoom com os dedos na descrição do produto, o seu texto está pequeno demais. Se precisam virar o celular de lado para ler, a linha está larga demais ou a fonte está apertada demais.

## 7. Uso com uma mão só

A maioria dos usuários de celular usa o aparelho com uma mão só, com o polegar alcançando a parte inferior direita (ou inferior esquerda, no caso dos canhotos). As interações importantes devem ficar nessa zona do polegar.

- CTA principal (Adicionar ao carrinho, Finalizar compra, Comprar agora) perto da parte de baixo
- Menu hambúrguer no canto superior esquerdo ou direito, ao alcance do polegar
- Botão "Voltar" previsível (o botão voltar do navegador costuma ser melhor do que botões de voltar personalizados)

Não exija toque duplo em áreas difíceis de alcançar. Cada momento de ginástica com o polegar faz você perder clientes.

## 8. Página de produto pensada para o mobile

As páginas de produto no desktop costumam mostrar tudo de uma vez (galeria à esquerda, detalhes à direita, descrição embaixo). Esse layout não se traduz para o mobile; é preciso colocar o conteúdo em sequência.

Sequência eficaz para a página de produto no mobile:

1. Imagem principal (galeria que se desliza com o dedo)
2. Título + preço
3. Seletor de variantes (tamanho, cor)
4. Adicionar ao carrinho (CTA principal)
5. Sinais de confiança (avaliação, frete grátis, devoluções)
6. Descrição (recolhível, dobrada após 3 linhas)
7. Especificações / detalhes (recolhíveis)
8. Resumo das avaliações, com expansão em "ver todas"
9. Produtos relacionados
10. Perguntas frequentes (recolhíveis)

O conteúdo abaixo da dobra deve ter carregamento lento. O cliente mobile costuma decidir a compra nas 3 primeiras seções; carregar tudo atrasa essa decisão.

## 9. Testes em dispositivos reais

Não no DevTools. Não no emulador mobile do navegador. Celulares de verdade, em conexão de dados móveis.

Rodízio mínimo de testes:

- iPhone SE (tela pequena, aparelho mais antigo)
- iPhone 15 Pro (iOS mais recente, Safari)
- Samsung Galaxy intermediário (Android, Chrome)
- Android mais antigo em 4G (revela problemas de desempenho)

Bônus: peça a 3 amigos com celulares diferentes que tentem comprar algo na sua loja. Observe. O que eles tiverem dificuldade para fazer é a sua lista de correções.

## 10. Como evitar os padrões que matam o mobile

Erros comuns que destroem a conversão no mobile:

### Pop-ups intersticiais

O pop-up "Assine e ganhe 10% de desconto!" que cobre a tela logo na chegada no mobile. O Google penaliza isso no ranqueamento da busca mobile. Os clientes dão de cara com ele e saem. Use formulários de inscrição embutidos na página.

### Vídeo com reprodução automática e som

Gasta banda, irrita o usuário e o iOS costuma bloquear de qualquer forma. Reprodução automática sem som é aceitável para um vídeo de destaque; com som, é hostil ao usuário.

### Estados de hover em telas de toque

"Passe o mouse para ver detalhes" não funciona em telas de toque. Se o seu tema ainda tem padrões de revelar ao passar o mouse no mobile, eles estão, na prática, quebrados.

### Botões de "fechar" minúsculos nos modais

Um X de 16 pixels no canto é impossível de acertar com o polegar. Faça botões de fechar de 44×44 ou use botões "Fechar" de largura total na parte de baixo dos modais.

### Rolagem horizontal nas grades de produtos

No mobile, carrosséis de produtos com rolagem horizontal escondem 80% dos produtos abaixo da dobra. Uma grade vertical (2 colunas no mobile) converte melhor.

## O que a Shoprocket resolve para o mobile

A maior parte do básico já vem pronta:

- **Otimização automática de imagens:** redimensiona, comprime, converte para WebP e aplica lazy-load em todas as imagens de produto
- **Gaveta do carrinho (e não carrinho em página inteira)** é o padrão no mobile
- **Botão Adicionar ao carrinho fixo no mobile** com suporte nas lojas com tema
- **Checkout responsivo para mobile** com os tipos de campo corretos, autocomplete e campos empilhados
- **Apple Pay + Google Pay + Stripe Link**, pagamento com um toque via Stripe
- **Widget de chat ao vivo responsivo para mobile**
- **Entrega por CDN** via Cloudflare para todos os recursos
- **Core Web Vitals otimizadas de fábrica** na loja hospedada

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Para quem usa o widget embutido: a velocidade e o design da página ao redor ficam por sua conta. O widget da Shoprocket tem carregamento lento e não bloqueia a renderização da sua página, mas a velocidade geral da página é você quem administra.

> **Dica:** Uma vez por trimestre, rode o PageSpeed Insights nas suas 3 páginas de produto que mais faturam, no mobile. Anote as três pontuações das Core Web Vitals. No trimestre seguinte, compare. Uma tendência de queda é um assassino silencioso de conversão; pegue isso a cada trimestre, e não depois de o estrago estar feito.

## Resumo

- **O mobile é de 70% a 85% do tráfego.** A maioria das lojas o trata como um detalhe; não faça isso
- **As Core Web Vitals são os três números a acompanhar:** LCP, INP, CLS. Abaixo de 2,5 s / 200 ms / 0,1
- **Teste em dispositivos reais em 4G,** e não em um emulador de navegador
- **Particularidades do checkout:** formulários em coluna única, tipos de campo corretos, autocomplete, Apple/Google Pay, CTAs fixos
- **Menos campos no formulário** = mais conclusões. Revise o que é realmente necessário
- **Áreas de toque de no mínimo 44×44.** Espaço mínimo de 8 px entre as áreas
- **A zona do polegar importa.** CTAs principais perto da parte de baixo; menu hambúrguer no canto superior esquerdo ou direito
- **Evite o que mata o mobile:** intersticiais, áudio com reprodução automática, estados de hover, botões de fechar minúsculos

[Comece um teste grátis](https://app-v3.shoprocket.io/signup) e tenha, desde o primeiro dia, otimização automática de imagens, Apple Pay e um checkout nativo para mobile. 14 dias, sem cartão.

---

- HTML version: https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao
- Language: Português (pt)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)