Your SlideShare is downloading. ×
  • Like
Otimizações de Performance Web: Desafios do Mundo Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 3,710 views
Published

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

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

Published 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,710
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