Desempenho Web Móvel: Otimização e Melhores Práticas

Por que o desempenho móvel é diferente

Dispositivos móveis têm menor capacidade de CPU e memória. O tempo de parse e compile de JavaScript é maior.

Condições de rede: 3G/4G/5G, WiFi. Largura de banda e latência variáveis. Usuários móveis podem estar em conexões mais lentas.

Bateria: JavaScript pesado e animações consomem bateria. Desempenho = duração da bateria.

Tamanho de tela: Imagens e layout otimizados para telas pequenas. Mobile-first em vez de desktop-first.

Design Mobile-First

CSS mobile-first: Estilos móveis primeiro, depois override com media query para desktop. @media (min-width: 768px) para telas grandes.

Meta tag viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Escalonamento correto no mobile.

Touch targets: Botões e links de pelo menos 48x48px. Facilmente tocáveis com o dedo. 8px de espaço entre elementos próximos.

Tamanho de fonte: Mínimo 16px. iOS faz zoom em inputs menores que 16px. Isso quebra a UX.

Navegação: Menu hamburguer, navegação inferior, barra de abas. Navegação acessível no mobile.

Otimização de Imagens

Imagens responsivas: Tamanho correto com srcset e sizes. Não carregue imagens grandes no mobile.

Compressão de imagens: Formato WebP/AVIF. Quality 75-80 suficiente para mobile. Comprima com TinyPNG, Squoosh.

Lazy loading: Carregue de forma lazy as imagens abaixo do fold. Atributo loading="lazy".

Placeholder: Placeholder blur-up ou skeleton. Mostre placeholder enquanto a imagem carrega.

CDN: Nodo CDN mais próximo para usuários móveis. CDN globais como Cloudflare, Fastly.

Otimização de JavaScript

Tamanho do bundle: Bundle menor no mobile. Carregue apenas o código necessário com code splitting.

Tree shaking: Remova o código não utilizado. Use ES modules.

Lazy loading: Carregue de forma lazy os módulos pesados (chart, editor, map). Com dynamic import().

Polyfill: Remova os polyfills desnecessários. Use APIs nativas em vez de core-js (os navegadores modernos as suportam).

Web Workers: Separe os cálculos pesados do thread principal. Não bloquee o thread de UI no mobile.

Otimização de Rede

HTTP/2 ou HTTP/3: Processamento paralelo de múltiplas solicitações. Reduz a latência no mobile.

Compressão: Comprima os recursos baseados em texto com Gzip/Brotli. Economia de 60-80%.

Caching: Cache offline com Service Worker. Carregamento rápido em visitas repetidas com estratégia cache-first.

Prefetch/Preconnect: Precarregue os recursos críticos. Estabeleça a conexão DNS e TCP antecipadamente.

Resource hints: Precarregue CSS e fontes críticas com <link rel="preload">.

Testes e Monitoramento

Testes em dispositivo real: Teste em dispositivos móveis reais. A emulação de dispositivo do Chrome DevTools não é suficiente.

Lighthouse mobile: Auditoria de desempenho móvel. Teste com throttling (CPU 4x slowdown, slow 4G).

WebPageTest: Teste com dispositivo móvel e perfil de conexão. Análise de filmstrip e waterfall.

RUM: Dados de usuários móveis reais. Segmentação por tipo de dispositivo, velocidade de conexão.

Core Web Vitals: Métricas separadas para mobile e desktop. Relatório mobile no Google Search Console.