Web Tuning

Talk realizada na 16 Semana Integrada do CEATEC (http://semanaintegrada.com.br/2014/) e no DevCamp 2015 (http://www.devcamp.com.br/devcamp-2015/)

Transcript

1. Web tuning Carlos Eduardo L. Lopes @_carloslopes @carloslopes
3. Performance é importante?
4. Qualquer carregamento de página que demore mais que 2 segundos é um desastre Akamai Set/09
5. 47% esperam que uma página carregue em 2 segundos ou menos Akamai Set/09
6. 40% abandonam uma página se ela demora mais que 3 segundos para carregar Akamai Set/09
7. 52% afirmam que carregamentos rápidos são importantes para fidelidade com o site Akamai Set/09
8. 14% começam a comprar em outro site se o carregamento é lento Akamai Set/09
9. 64% compradores insatisfeitos comprarão em outro site em uma próxima vez Akamai Set/09
10. Além disso…
11. 15% de aumento no tráfego enviado pelo Google, Bing e Yahoo LightSpeedNow
12. A prova de que milissegundos importam
13. Kohavi and Longbotham 2007 Para cada 100ms acrescentados no carregamento da Amazon.com as vendas diminuem 1%
14. bit.ly/WQfyIX Delay de 1s no lonelyplanet(.com) resulta na queda de ~20% da taxa de conversão
15. Yahoo descobriu que uma página 400ms mais demorada tem de 5-9% mais pessoas saindo antes do carregamento finalizar
16. Quais os gargalos de uma aplicação web?
17. Navegador Aplicação Database Webservice I/O
18. Navegador Aplicação Database Webservice I/O
19. Dificilmente o código que executa a aplicação é o gargalo
20. Como resolver?
21. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
22. Minificação e concatenação de assets Front-end
23. Navegador Servidor Documento Javascript CSS
24. Como resolver?
25. jquery.js jquery-ui.js bootstrap.js lists.js home.js bootstrap.css home.css lists.css jquery-plugin.css application.js application.css
26. Remover todos os whitespaces Remover quebra de linhas Remover comentários
27. Navegador Servidor Documento Javascript CSS
28. Assets menores e em menor quantidade Menor número de requests no servidor
30. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
31. Sprites Front-end
33. Navegador Servidor Documento Imagens
34. Como resolver?
35. icons.png
36. Navegador Servidor Documento Imagens icons.png
37. Download mais rápido dos ícones Menor número de requests no servidor
39. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
40. CDN Front-end
41. Navegador Servidor Documento Javascript CSS Imagens
42. Servidor da app servindo assets Tamanho dos requests para assets maiores (cookies overhead)
43. Como resolver?
44. Navegador Servidor app CDN CSS Javascript Fontes Imagens Páginas
45. O que é um CDN?
46. Servidor CDN Servidor App User1 User2
47. Menor número de requests no servidor Requests mais leves para obter assets Vantagens que o serviço de CDN oferece Aumenta o número de requests paralelas
49. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
50. Cache de assets Front-end
51. Navegador Servidor / CDN Documento Assets Request Carregamento finalizado Request Carregamento finalizado
52. Conteúdo estático sendo requisitado múltiplas vezes
53. Como resolver?
54. Cache-Control HTTP header
55. Navegador Servidor / CDN Documento Assets Request Carregamento finalizado Request Carregamento finalizado no-cache max-age=31536000 no-cache
56. Navegador Servidor / CDN application.js max-age=31536000 Atualização da app application.js
57. Navegador Servidor / CDN application-XXX.js max-age=31536000 Atualização da app application-YYY.js max-age=31536000
58. Conteúdo estático requisitado apenas quando necessário Menor número de requests no servidor Carregamento mais rápido da página
59. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
60. Cookies leves Front-end
61. #0123 - Playstation 4 - US$399.99 #3242 - Destiny - US$50.00 #6938 - The Last Of Us - US46.60 User #54919 Colorscheme=#1324 Menu=Eletrônicos,Jogos,Apple
62. Para cada 500 bytes no tamanho dos cookies o carregamento da página aumenta 15ms http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
63. Como resolver?
64. Navegador Servidor app user id shopping cart data configuration data
65. Navegador Servidor app Persistência user id shopping cart data configuration data user id
66. Requests mais leves Carregamento mais rápido
67. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
68. Uploads diretos Front-end e Back-end
69. Servidor User1 User2 User3 User4 4mb 2mb 3mb 8mb
70. Processos do servidor presos aguardando uploads
71. Como resolver?
72. Servidor User1 User2 User3 User4 Storage Server 4mb 2mb 3mb 8mb
73. Evita requisições bloqueantes no servidor Processos do servidor ficam disponíveis para ações mais importantes
75. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
76. Engine de busca Back-end
77. 1.427.349 produtos
78. SELECT * FROM products WHERE id = ????? ~ 200ms
79. SELECT * FROM products WHERE name LIKE ‘%?%' ~40s e alguns timeouts
80. Como resolver?
81. Aplicação Banco de dados name LIKE ‘%???%' Produto #23242 Produto #54534 Produto #00434
82. Aplicação Banco de dados query match name ??? #23242 #54534 #00434 Engine de busca id IN (?, ?, ?) Produto #23242 Produto #54534 Produto #00434
83. query match name ??? ~ 190ms ???
84. Otimiza o uso do banco de dados Resultados das pesquisas mais relevantes Opcões de pesquisa mais avançadas Responses mais rápidas
86. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
87. Background jobs Back-end
88. Navegador Aplicação Store2 POST /checkout Store1 Store3 SKU #1353 SKU #43 SKU #5463 5s 6s 4s 17s
89. 17s
90. Navegador Aplicação Store2 Store1 Store3
91. Navegador Aplicação Store2 Store1 Store3 Background Job POST /checkout Enfileira job 200ms SKU #1353 5s SKU #43 6s SKU #5463 4s GET /order/status not ready ready GET /order/status not ready GET /order/status
92. Evita requests bloqueantes Percepção de maior rapidez para usuário Responses mais rápidas
93. Hangfire HornetQ
94. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
95. Cache de operações custosas Back-end
96. User1 Aplicação Banco de dados GET / Produtos mais vendidos User2 300ms
97. User1 Aplicação Banco de dados GET / Produtos mais vendidos User2 300ms
98. Operação custosa sendo realizada múltiplas vezes
99. Como resolver?
100. User1 Aplicação Banco de dados User2
101. User1 Aplicação Banco de dados User2 Cache store
102. User1 Aplicação Banco de dados User2 Cache store GET / Produtos mais vendidos 300ms Tem os produtos mais vendidos? Não Guarde por 10min 500ms
103. User1 Aplicação Banco de dados User2 Cache store GET / Tem os produtos mais vendidos? Sim 200ms
104. Reaproveita resultado de operações custosas já realizadas Respostas mais rápidas
106. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
107. E assim…
108. Minificação e concatenação de Assets Cache de Assets Engine de Busca Sprites Cookies Leves Background Jobs CDN Uploads Diretos Cache de Operações Custosas
109. Navegador Aplicação Database Webservice I/O
110. Quando é rápido o bastante?
111. Doherty Threshold
112. Speed, Performance, and Human Perception Ilya Grigorik http://www.youtube.com/watch?v=7ubJzEi3HuA
113. 1ms - 100ms Instantâneo 100ms - 300ms Delay levemente perceptível 300ms - 1s Delay perceptível Perca de foco 1s+ Alteração de contexto mental 10s+ Vou voltar mais tarde…
114. Obrigado! Carlos Eduardo L. Lopes @_carloslopes @carloslopes