Web Tuning

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/)

9a58596045e96b3d47559df6907aee8b?s=128

Carlos Eduardo L. Lopes

September 12, 2014
Tweet

Transcript

  1. Web tuning Carlos Eduardo L. Lopes @_carloslopes @carloslopes

  2. None
  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
  29. None
  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

  32. None
  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
  38. None
  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
  48. None
  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
  74. None
  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
  85. None
  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

  105. None
  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