Otimizações de Performance Web: Desafios do Mundo Mobile

4,536 views
4,422 views

Published on

Palestra de Sérgio Lopes no MobileConf RJ 2014 & QCon SP 2013.

Published in: Technology

Otimizações de Performance Web: Desafios do Mundo Mobile

  1. 1. A WEB MOBILE ! OTIMIZAÇÕES E DESAFIOS DE PERFORMANCE
  2. 2. @sergio_caelum sergiolopes.org
  3. 3. sergiolopes.org
  4. 4. sergiolopes.org
  5. 5. 74% DOS USUÁRIOS FALAM QUE ABANDONAM O SITE MOBILE DEPOIS DE 5s DE ESPERA
  6. 6. 85% DOS USUÁRIOS ESPERAM QUE UM SITE ABRA NO CELULAR TÃO OU MAIS RÁPIDO QUE NO DESKTOP
  7. 7. OTIMIZAÇÕES WEB 101
  8. 8. OTIMIZAÇÕES WEB 101 CONCATENAR CSS / JS
  9. 9. OTIMIZAÇÕES WEB 101 MINIFICAR CSS / JS CONCATENAR CSS / JS
  10. 10. OTIMIZAÇÕES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS CONCATENAR CSS / JS
  11. 11. OTIMIZAÇÕES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS
  12. 12. OTIMIZAÇÕES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO
  13. 13. OTIMIZAÇÕES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO
  14. 14. OTIMIZAÇÕES WEB 101 GZIP CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO
  15. 15. OTIMIZAÇÕES WEB 101 GZIP CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO LAZY-LOAD
  16. 16. OTIMIZAÇÕES WEB 101 GZIP CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO LAZY-LOAD ASSÍNCRONO
  17. 17. #mobileperf
  18. 18. GARGALOS MOBILE
  19. 19. GARGALOS MOBILE
  20. 20. GARGALOS MOBILE
  21. 21. GARGALOS MOBILE
  22. 22. GARGALOS MOBILE
  23. 23. GARGALOS MOBILE
  24. 24. REDE
  25. 25. largura de banda & latência (RTT)
  26. 26. NY SP
  27. 27. NY SP 7648km
  28. 28. NY SP 7648km 299,792458km/ms
  29. 29. NY SP
  30. 30. NY SP
  31. 31. NY SP 25,5 ms
  32. 32. NY SP
  33. 33. NY SP RTT ideal = 51 ms
  34. 34. DNS lookup ! 1 RTT TCP handshake ! 1 RTT TLS handshake ! 1-2 RTT HTTP request ! > 1 RTT
  35. 35. latência de redes móveis
  36. 36. WI-FI Mac WI-FI celular 3G quente 3G frio 2G quente 2G frio SP 12ms 38ms 88ms 212ms 472ms 622ms NY 139ms 300ms
  37. 37. 0 800 1600 2400 3200 1 Mbps 2 Mbps 3 Mbps 4 Mbps 5 Mbps 6 Mbps 7 Mbps 8 Mpbs 9 Mbps 10 Mbps TEMPO DE CARREGAMENTO DA PÁGINA vs LARGURA DE BANDA
  38. 38. 0 1000 2000 3000 4000 240ms 220ms 200ms 180ms 160ms 140ms 120ms 100ms 80ms 60ms 40ms 20ms 0ms TEMPO DE CARREGAMENTO DA PÁGINA vs LATÊNCIA (RTT)
  39. 39. BATERIA
  40. 40. WI-FI - 30 ~200 mW 3G - 1000 ~ 3500 mW
  41. 41. RRCRadio Resource Controller
  42. 42. zzz
  43. 43. zzzidle 15 mW
  44. 44. zzzidle 15 mW !!!!
  45. 45. zzzidle 15 mW connected 1000 ~ 3500 mW !!!!
  46. 46. DNS lookup ! 1 RTT TCP handshake ! 1 RTT TLS handshake ! 1-2 RTT HTTP request ! > 1 RTT
  47. 47. RRC negociação ! 200 ~ 2500ms DNS lookup ! 1 RTT TCP handshake ! 1 RTT TLS handshake ! 1-2 RTT HTTP request ! > 1 RTT
  48. 48. 4G - LTE 3.5G -HSPA+ 3G -UMTS,HSPA 2G -EDGE,GPRS
  49. 49. 4G - 300 Mbit/s 3.5G -168 Mbit/s 3G -14 Mbit/s 2G -384 Kbit/s
  50. 50. 4G - 5 Mbit/s 3.5G -1.5 Mbit/s 3G -0.5 Mbit/s valores máximos em contrato dos planos atuais da Vivo em SP*
  51. 51. 4G - <100ms 3.5G -<100ms 3G -100 ~ 500 ms 2G -300 ~ 1000 ms
  52. 52. OTIMIZAÇÕES
  53. 53. conteúdo mais próximo do usuário
  54. 54. conteúdo mais próximo do usuário
  55. 55. CDNs content delivery network
  56. 56. CDNs content delivery network
  57. 57. DIMINUIR # REQUESTS concatenar JS e CSS usar sprites cachear recursos !(display:none em <img>)
  58. 58. SEM REDIRECTS
  59. 59. SEM REDIRECTS
  60. 60. POLLING É DO MAL
  61. 61. LAZY-LOAD JÁ ERA
  62. 62. PRELOAD É O QUE HÁ
  63. 63. <link rel="prefetch" href="imagem.jpg">
  64. 64. <link rel="prefetch" href="imagem.jpg"> <link rel="dns-prefetch" href="http://sergiolopes.org">
  65. 65. <link rel="prefetch" href="imagem.jpg"> <link rel="subresource" href="imagem.jpg"> <link rel="dns-prefetch" href="http://sergiolopes.org">
  66. 66. <link rel="prefetch" href="imagem.jpg"> <link rel="subresource" href="imagem.jpg"> <link rel="prerender" href="/confirma/"> <link rel="dns-prefetch" href="http://sergiolopes.org">
  67. 67. por trás do TCP
  68. 68. browser server
  69. 69. SYN browser server
  70. 70. SYN SYN ACK browser server
  71. 71. SYN SYN ACK ACK GET / browser server
  72. 72. SYN SYN ACK ACK GET / 4x TCP seg. browser server processamento
  73. 73. SYN SYN ACK ACK GET / 4x TCP seg. ~5.8 KB browser server processamento
  74. 74. SYN SYN ACK ACK GET / 4x TCP seg. 4x ACK ~5.8 KB browser server processamento
  75. 75. SYN SYN ACK ACK GET / 4x TCP seg. 4x ACK 8x ACK 8x TCP seg. ~5.8 KB ~11.6 KB ... browser server processamento
  76. 76. SYN SYN ACK ACK GET / 4x TCP seg. 4x ACK 8x ACK 8x TCP seg. ~5.8 KB ~11.6 KB ... browser server processamento
  77. 77. Connection: Keep-Alive
  78. 78. SYN SYN ACK ACK GET / 4x TCP seg. 4x ACK 8x ACK 8x TCP seg. ~5.8 KB ~11.6 KB ... browser server processamento parado...
  79. 79. flush early Java: response.flushBuffer(); .NET: Response.Flush(); PHP: <?php flush(); ?>
  80. 80. SYN SYN ACK ACK GET / 4x TCP seg. 4x ACK 8x ACK 8x TCP seg. ~5.8 KB ~11.6 KB ... browser server processamento
  81. 81. cwnd AW10 10-packet TCP congestion window
  82. 82. http://bit.ly/1pspHaP
  83. 83. http://bit.ly/1pspHaP
  84. 84. http://bit.ly/1pspHaP
  85. 85. http://bit.ly/1pspHaP
  86. 86. http://bit.ly/1pspHaP
  87. 87. CRITICAL RENDERING PATH
  88. 88. NUNCA ESCREVA JS QUE BLOQUEIE RENDER
  89. 89. http://slidesha.re/1tuMgcs
  90. 90. <script src="script.js" async></script>
  91. 91. CSSTAMBÉM BLOQUEIA RENDERIZAÇÃO
  92. 92. ~600px
  93. 93. ~600px ~9000px
  94. 94. ~600px ~9000px ABOVE THE FOLD (ATF)
  95. 95. 1 RTT ATF RENDER
  96. 96. inline do CSS ATF
  97. 97. inline do CSS ATF inline do JS ATF
  98. 98. inline do CSS ATF inline do JS ATF flush ATF
  99. 99. < 14 KB (cwnd aw10) inline do CSS ATF inline do JS ATF flush ATF
  100. 100. < 14 KB (cwnd aw10) inline do CSS ATF inline do JS ATF flush ATF resto do CSS e JS tudo async
  101. 101. RENDERIZAÇÃO
  102. 102. EVITE FRAMEWORKS PESADOS & SUBUTILIZADOS
  103. 103. QUEBRE JS PESADO setImmediate requestAnimationFrame Web Workers
  104. 104. setImmediate(function(){ // pedaço de processo longo });
  105. 105. requestAnimationFrame(function(){ // quadro de animação });
  106. 106. animações na GPU com CSS3
  107. 107. .fadeout { opacity: 0; transition: opacity 2s ease; }
  108. 108. cuidado com elementos caros box-shadow / gradient / SVG / data-uri
  109. 109. TESTES, ANÁLISES & TRADEOFFs
  110. 110. RUM Real User Monitoring
  111. 111. BÔNUS: INTERFACE PERFORMÁTICA delay de 300 ms no click interface instantânea & sync em bg
  112. 112. LATÊNCIA REDES MÓVEIS HTTP CRITICAL PATH RENDERIZAÇÃO TESTES TRADEOFFS
  113. 113. A WEB MOBILE ! OTIMIZAÇÕES E DESAFIOS DE PERFORMANCE
  114. 114. OBRIGADO! sergiolopes.org @sergio_caelum

×