App demora para abrir? Onde investigar o tempo de inicialização

O usuário toca no ícone e fica olhando o logo. Dois segundos. Três. Quatro. Em algum momento ele desiste ou, pior, se acostuma a não abrir o app. Tempo de inicialização é a primeira impressão de toda sessão — e uma das métricas que as lojas observam.

O que acontece quando o app abre

1. 1.O sistema carrega o processo nativo.
2. 2.O motor de JavaScript sobe e lê o pacote do app.
3. 3.O código inicial executa: configurações, bibliotecas, estado salvo.
4. 4.A primeira tela renderiza e, muitas vezes, busca dados.

Cada etapa pode ser o gargalo.

Os suspeitos mais comuns

• Trabalho demais antes da primeira tela: inicializar analytics, SDKs de pagamento, mapas e chat antes de mostrar qualquer coisa. Adie o que não é necessário para a primeira tela.
• Pacote JavaScript inchado: bibliotecas grandes importadas inteiras para usar uma função. O raciocínio é o mesmo da web, em Bundle JavaScript pesado: como descobrir quem está engordando o seu site.
• Leitura pesada do armazenamento local: carregar todo o histórico no início em vez do essencial.
• Esperar a rede para mostrar algo: mostre a interface com dados em cache e atualize em seguida — princípio do Offline-first: apps que continuam funcionando sem internet.
• Imagens grandes na primeira tela (Imagens pesadas no app: cache, tamanhos e formatos).

Medir antes de mexer

Meça o tempo até a primeira tela útil em aparelhos de entrada, não só no seu. Ferramentas de perfil do Android Studio e do Xcode mostram onde o tempo vai. Monitore também em produção, junto com os crashes (Crashes em produção: como descobrir o que quebrou no celular do cliente).

Percepção também conta

Uma tela de abertura que se transforma suavemente na primeira tela, com skeleton no conteúdo, parece mais rápida do que um logo parado. Veja Skeleton e shimmer no React Native: carregamento que parece rápido.

A We Codex constrói e otimiza apps em React Native para iOS e Android. Veja aplicativos nativos ou conte o que está acontecendo.