Uma introdução em perfomance de Aplicações Web para impactar positivamente a vida de seus usuários

Transcript

1. Uma introdução em perfomance de Aplicações Web para impactar positivamente a vida de seus usuários Cadu Ribeiro
3. Cadu Ribeiro @duduribeiro
4. Cadu Ribeiro https://cadu.dev @duduribeiro
5. https://opensanca.com.br
6. http: / / meetup.com/pt-BR/opensanca/
9. 📸
10. Quais problemas uma aplicação lenta pode trazer?
13. 47% Dos usuarios esperam que o site carregue em até 2 segundos Robert B. Miller, “Response Time in Man–Computer Conversational Transactions,” 1968.
14. Tempo é Dinheiro!
15. -1% em vendas A cada 100ms no tempo de carregamento do website Fonte
16. +2% em vendas A cada 1 seg reduzido no tempo de carregamento do website Fonte
17. Importância da performance
18. Empatia
19. 58% dos brasileiros têm acesso à internet apenas pelo celular Fonte: Pesquisa Sobre o Uso das Tecnologias de Informação e Comunicação nos Domicílios Brasileiros 2019 - CGI.br
20. Famílias de baixa renda tem banda larga móvel como principal forma de conexão Fonte: Pesquisa Sobre o Uso das Tecnologias de Informação e Comunicação nos Domicílios Brasileiros 2019 - CGI.br
23. Melhores resultados
24. 53% Dos usuários abandonam o site se ele demora mais que 3 segundos para carregar Fonte
25. O que podemos fazer? Bora otimizar a aplicação?
26. 80 / 20
27. 80% da lentidão vem de 20% do código
28. 80% do uso de memória vem de 20% do código
29. 80% da carga do site vem de 20% dos usuários
31. Eu não vou otimizar nada na minha aplicação até as minhas métricas pedirem
32. Não tente adivinhar
33. Monitore! 
 Melhore se necessário
34. Use alguma ferramenta de APM para te auxiliar * APM: Application Performance Monitor
38. Use alguma ferramenta de RUM * RUM: Real User Monitoring
42. RUM APM vs
43. APM
44. APM
45. APM
46. RUM
47. Problemas comuns?
48. Latência e RTT
49. Latência
50. Latência
51. Latência
52. RTT
53. RTT
54. RTT
55. RTT
56. RTT
57. RTT
58. Nova Iorque -> Sydney +/- 16.000 km
59. 53 milissegundos Na velocidade da luz
60. Nova Iorque Sydney
61. 80 milissegundos Nova Iorque Sydney
62. Nova Iorque Sydney
63. Nova Iorque Sydney 160 milissegundos
64. 200~300 milissegundos
65. Coloque seus servidores o mais perto possível dos seus usuários
66. Mas 200ms é muito rápido!
68. https://meusite.com.br/
69. https://meusite.com.br/
70. https://meusite.com.br/
71. https://meusite.com.br/
72. https://meusite.com.br/
74. Parsing
75. Recursos externos
77. Códigos JavaScript
78. Códigos JavaScript Códigos CSS
87. …. 15x
103. https://www.linkedin.com/pulse/why-does-your-browser-limit-number-concurrent-ishwar-rimal/
104. Utilize menos arquivos para seus recursos
105. { <script src="application.js"> </ script>
106. { <link rel="stylesheet" media="all" href="application.js"> </ link>
108. Troque imagens simples por SVG
114. Postergue o carregamento dos scripts
117. Fonte <script src=“application.js”> </ script>
118. Fonte <script async src=“application.js”> </ script>
119. Fonte <script defer src=“application.js”> </ script>
121. Use async e defer sempre que possível
122. Coloque os recursos perto do usuário com CDNs
123. Sem CDN Servidor
124. https://meusite.com.br/ Sem CDN Servidor
125. https://meusite.com.br/ application.js Sem CDN Servidor
126. https://meusite.com.br/ application.js application.css Sem CDN Servidor
127. Com CDN Servidor CDN
128. https://meusite.com.br/ Com CDN Servidor CDN
129. https://meusite.com.br/ application.js Com CDN Servidor CDN
130. https://meusite.com.br/ application.js application.css Com CDN Servidor CDN
134. Com CDN Servidor CDN
135. https://meusite.com.br/ Com CDN Servidor CDN
136. https://meusite.com.br/ application.js Com CDN Servidor CDN
137. https://meusite.com.br/ application.js application.css Com CDN Servidor CDN
139. Use CDN para entregar seus assets
140. Arquivos grandes
143. Comprima seus assets com gzip no servidor ou na CDN
144. Case
150. 12 servidores (dynos) 
 3 app servers c/ 3 threads
151. 6300 usuários
152. 6300 usuários no período de 1 hora
155. 3000 RPM +/- no pico
156. App instances = Avg reqs/sec * Avg response time / sec
157. App instances = 50 * 5 = 250
158. Servers = 250 / 9 = ~ 27
 
 *9 = instâncias / server
159. Servers = 250 / 9 = ~ 27
 
 *9 = instâncias / server
160. Migração para um banco melhor!
161. Conclusão
165. Não existe bala de prata
167. Sua empresa pode estar perdendo dinheiro
168. Coloque seus servidores o mais perto possível dos seus usuários
169. Utilize menos arquivos para seus recursos
170. Troque imagens simples por SVG
171. Use async e defer sempre que possível
172. Comprima seus assets com gzip no servidor ou na CDN
174. Cadu Ribeiro
175. Cadu Ribeiro https://cadu.dev
176. Cadu Ribeiro https://cadu.dev mail@cadu.dev