O documento discute a otimização de performance em aplicações web móveis. Apresenta problemas comuns como lentidão e travamentos em apps desenvolvidos com HTML5 e PHP. Explica como fatores como a arquitetura de comunicação móvel e versões diferentes do Android podem afetar o desempenho. Também fornece dicas sobre o uso estratégico de recursos como o Memcache para melhorar a velocidade e reduzir a carga nos servidores.
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Otimizando WebAPPs para dispositivos móveis
1.
2. Palestrante
■ Programador PHP há mais de 10 anos
■ Trabalhou em grandes projetos nacionais
para o governo e telecomunicações
■ Interesse em P&D/Performance
3. Projeto Web APP Mobile
■ Web APP desenvolvido em HTML5 e PHP
■ Problemas de performance
✗ Lentidão na abertura inicial
✗ Travamentos
4. Arquitetura de
comunicação mobile
■ Maior latência (Round-trip delay time)
✓ Wifi: 2ms ✓ 3G: 100ms ✓ EDGE: 300ms
300ms 30ms
5. ■ Utilizar como base 300ms RTT (EDGE)
■ EDGE: 250Kbps = 31,25KBps
■ Google Devtools
Meta (6 hits/requisição)
1 Hit Dinâmico > 300ms RTT + até 150ms
5 Hits Estáticos > 1500ms RTT + 5x10ms
Total: ~2 segundos
8. Ordem correta de otimização
■ Priorize conteúdo
✓ Atrase o carregamento do JS
✓ Coloque inline o CSS do carregamento inicial
✓ Adicione um fallback para biblioteca JS
✓ Agrupe o restante do JS
9. ✓ Agrupe o CSS
✓ Minifier
✓ GZIP
✓ Não use QueryString
Mas isso não é carregado apenas uma vez?
Por que eu preciso me preocupar com isso?
Essa palestra é de front-end?
Onde é a saída?
10. WebAPP, WebView e HTML5
O WebView e WebAPP desgastando DEV’s
■ Android 4.3 < WebView é Chrome 11 (2010)
■ Android 4.4 > WebView é Chrome 30 (2013)
■ Versão atual do Chrome é 39 (2014)
■ O iOS segue a mesma lógica
20. Mobile Básico
Folha 9 Hits 13KB 0,75 Segundos
Estadão 29 Hits 398KB 13 Segundos
Mobile Avançado
Folha 35 Hits 306KB 4 Segundos
Globo 211 Hits 1.8MB 8 Segundos
New York Times 143 Hits 3.6MB 27 Segundos
21. Melhor Aplicabilidade de
Memcache
■ Coloque o máximo de dados comuns
■ Faça invalidação na gravação
■ Não é necessário excluir um item
ITENS NO CACHE
Tempo
Qtd
22. Sessão + Memcache
Hits Sessão por hit Memória Servidor
10 1MB 10MB
100 1MB 100MB
100 10MB 1GB
1000 1MB 1GB
■ O Memcache permite que a sessão fique
descentralizada
23. ■ Retira o acesso ao disco e melhora
a leitura
■ O que não resolve
✗ Todo session_start() adiciona o dado na
memória do servidor
■ Adicione apenas dados básicos