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.

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

6. Recursos estáticos
e sua influência
Por que isso é
um malabarismo?

7. Percepção
A forma como se otimiza pode ser ruim
para o usuário

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

11. polymer-project.org
Android 4.3
Chrome for Android 39 WebView e Chrome 11

12. polymer-project.org
Android 4.4
Android WebKit Browser Ops...

13. Versões Android
Versão Nome Distribuição
2.2 Froyo 0.5%
2.3.3 -
Gingerbread 9.1%
2.3.7
4.0.3 -
4.0.4
Ice Cream
Sandwich
7.8%
4.1.x Jelly Bean 21.3%
4.2.x 20.4%
4.3 7.0%
4.4 KitKat 33.9%
Fonte: Dashboards | Android Developers

14. Por que eu preciso saber isso!?
HTML5, JS, CSS, Imagens, Fontes... Apenas XHTML, CSS e imagens

15. 9 Hits - 13KB - 0,7 Segundos

16. 29 Hits - 398KB - 13 Segundos

17. 35 Hits - 306KB - 4 Segundos

18. 211 Hits - 1.8MB - 8 Segundos

19. 143 Hits - 3.6MB - 27 Segundos

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

24. Memcache e acesso
compartilhado

25. ■ 10MB comum + 1MB específico
Hits Memcache Servidor Total Sem Memcache
10 10MB + 10MB 60MB 80MB 170MB
100 10MB + 100MB 600MB 710MB 1.7GB
300 10MB + 300MB 1.8GB 2.1GB 5.1GB

26. Pool Memcache
■ Leitura mais rápida e escrita mais lenta
■ Leitura é frequente, escrita não
1x 4GB 4x 1GB

27. Cruzamento de dados relevantes
■ Considere apenas hit dinâmico

29. Calculando...
■ PV/Requisição ~> Analytics
■ Hit/PV ~> DevTools

30. Otimização
■ Redução na quantidade de hits dinâmicos
11 19 209 Antes
16 7 119 Depois

31. Feedback
■ Após melhorias o número de usuários
cresceu...
Visualização de página
Visitantes
Visitantes Únicos
Acessos

32. ■ ...e o servidor esfriou também
Mês
HITs
MEMCACHE

33. Ações
■ Garantir que será mantido durante
manutenção
✓ Uglify
✓ CSSmin
Desenvolvimento
Produção

34. ■ Lembra da pergunta? Aqui +90% é acesso
sem cache algum!
■ Como dimensionar? Utilize os dados que
você tem!

35. 201 milhões de habitantes
142 milhões de eleitores
107 milhões votaram
20 milhões para cada um
dos 5 maiores veículos

36. 5500 visitantes simultâneos
275 (5%) vai para mobile
250 novos
visitantes únicos
49750 Hits

37. Eleições ‘14
Fluxo de acesso

38. PROXY REVERSO
PHP
Tráfego
Mês
Mês
Tempo de
processador

39. MEMCACHE
BANCO DE DADOS
HITs
Dias
Mês
Load

40. Agradecimentos e contato
❖ Folha de S.Paulo
http://about.me/webysther
Google It! Webysther
❖ GitHub
❖ Google