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

  • 3,662 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,662
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
83
Comments
0
Likes
33

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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