Performance mobile: eleições 2014
1 gostou964 visualizações
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.
Performance mobile: eleições 2014
- 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