← Voltar para o Blog
Performance8 min de leitura

Mobile vs Desktop: Diferenças de Performance

Por que seu site é significativamente mais lento em dispositivos móveis e o que fazer para fechar essa lacuna de performance.

A Realidade Mobile-First

Desde 2019, mais de 60% do tráfego web global vem de dispositivos móveis. Em e-commerce brasileiro, esse número chega a 70-75%.

Mas aqui está o problema: a maioria dos sites tem performance significativamente pior em mobile do que desktop.

Dados Reais (Google, 2023):

  • 🐌 Tempo médio de carregamento mobile: 8.6 segundos
  • 💻 Tempo médio de carregamento desktop: 3.1 segundos
  • 📊 Mobile é 2.7x mais lento que desktop em média
  • 📱 53% dos usuários abandonam sites mobile que levam mais de 3s

Por Que Mobile é Mais Lento?

1️⃣CPU Menos Potente

Smartphones têm processadores 5-10x menos potentes que computadores desktop, mesmo em aparelhos top de linha.

Impacto em Métricas:

  • JavaScript: Execução 3-5x mais lenta
  • INP: 40-60% pior em mobile
  • TBT: Pode ser 10x maior em mobile

2️⃣Conexão de Rede Instável

Mesmo em 4G/5G, redes móveis têm latência maior e variável.

Latências Típicas:

  • Wi-Fi/Ethernet: 10-50ms
  • 4G: 50-200ms
  • 3G: 200-500ms
  • Impacto em TTFB: +100-300ms em mobile

Pior ainda: Usuários frequentemente alternam entre WiFi, 4G e 3G, causando quedas de conexão e timeouts.

3️⃣Menos Memória (RAM)

Smartphones têm 2-4GB de RAM vs 8-16GB+ em desktops, compartilhada entre sistema, apps e navegador.

  • Browser tem menos memória disponível para cache
  • Mais garbage collection pauses (pausas de JavaScript)
  • Páginas pesadas podem causar crashes

4️⃣GPU Menos Capaz

Renderização, animações e scroll são mais lentos em GPUs mobile.

  • Scroll janky (não suave)
  • Animações com drops de frames
  • CLS pode ser pior devido a repaints mais lentos

5️⃣Tela Menor, Mais Scroll

Telas mobile mostram menos conteúdo acima da dobra, então usuários precisam fazer mais scroll.

  • Mais recursos carregados ao scrollar (lazy loading)
  • Mais repaints e reflows
  • Maior probabilidade de CLS

Comparação de Core Web Vitals: Mobile vs Desktop

LCP (Largest Contentful Paint)

📱 Mobile Médio:

3.8s

50% dos sites passam (LCP < 2.5s)

💻 Desktop Médio:

2.1s

78% dos sites passam (LCP < 2.5s)

Diferença: Mobile 80% mais lento em LCP

INP (Interaction to Next Paint)

📱 Mobile Médio:

385ms

40% dos sites passam (INP < 200ms)

💻 Desktop Médio:

145ms

72% dos sites passam (INP < 200ms)

Diferença: Mobile 2.6x pior em INP

CLS (Cumulative Layout Shift)

📱 Mobile Médio:

0.14

62% dos sites passam (CLS < 0.1)

💻 Desktop Médio:

0.08

75% dos sites passam (CLS < 0.1)

Diferença: Mobile 75% pior em CLS

Fonte: Chrome User Experience Report (CrUX), 2024

Como Otimizar para Mobile

1. Reduza JavaScript

Mobile não consegue executar JS pesado. Cada KB de JS custa caro.

Técnicas:

  • ✅ Code splitting - carregue só o necessário
  • ✅ Tree shaking - elimine código não usado
  • ✅ Lazy loading de componentes
  • ✅ Use React Server Components (Next.js 13+)
  • ✅ Evite bibliotecas pesadas (moment.js → date-fns/dayjs)

2. Imagens Responsivas

Não sirva imagens de 2000px para uma tela de 375px.

Next.js Image (automático):

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  priority
/>

// Next.js serve automaticamente:
// - 375w para mobile pequeno
// - 768w para tablet
// - 1200w para desktop
// - WebP quando suportado

3. Priorize Conteúdo Above-the-Fold

Mobile tem viewport menor. Carregue primeiro o que aparece na tela.

Estratégia:

  • ✅ Inline CSS crítico
  • ✅ Preload imagem LCP
  • ✅ Defer JavaScript não crítico
  • ✅ Lazy load imagens abaixo da dobra

4. Use Service Workers

Cache inteligente para conexões instáveis.

Workbox (Next.js PWA):

// next.config.js com next-pwa
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

module.exports = withPWA({
  // sua config
});

Benefício: Usuários mobile com conexão ruim ainda conseguem navegar em páginas já visitadas.

5. Otimize para 3G

Teste sempre em conexão lenta, não só WiFi rápido.

Chrome DevTools:

  1. 1. F12 → Network tab
  2. 2. "No throttling" → "Slow 3G"
  3. 3. Recarregue a página
  4. 4. Sinta a dor do usuário real

6. Reduza Requests

Cada request adiciona latência. Em mobile, isso é 3-5x pior.

  • ✅ Combine arquivos CSS/JS
  • ✅ Use sprites ou SVG icons
  • ✅ Inline assets críticos pequenos
  • ✅ Use HTTP/2 (multiplexing)
  • ✅ Reduza third-party scripts

Armadilhas Comuns de Design Responsivo

❌Carregar Imagens Desktop em Mobile

display: none esconde, mas ainda baixa a imagem! Use srcset ou picture.

❌JavaScript Pesado em Hamburger Menus

Menus mobile complexos com animações pesadas matam INP. Use CSS sempre que possível.

❌Vídeos Auto-play em Mobile

Consome dados, bateria e afunda performance. Sempre exija interação do usuário.

❌Fontes Web Demais

Cada peso/estilo de fonte é um request adicional. Use no máximo 2-3 pesos.

Checklist de Otimização Mobile

  • ✓JavaScript total < 200KB (minificado + gzipped)
  • ✓Imagens em WebP/AVIF com responsive srcset
  • ✓TTFB < 800ms em conexão 3G
  • ✓Menos de 50 requests no carregamento inicial
  • ✓LCP < 2.5s em Slow 3G
  • ✓Lazy loading para imagens e componentes não críticos
  • ✓Service Worker para cache offline

Conclusão

Mobile não é apenas "desktop em tela menor". É um ambiente completamente diferente com constraints de hardware, rede e contexto de uso.

Com 70%+ do tráfego vindo de mobile, otimizar para dispositivos móveis não é opcional - é essencial para sobrevivência do negócio.

Sites que ignoram performance mobile perdem metade dos usuários antes mesmo de carregarem.

Compare Mobile vs Desktop do Seu Site

Use o CheckSpeed para analisar lado a lado a performance mobile e desktop do seu site. Descubra onde está a maior lacuna.

Comparar Mobile vs Desktop Agora