Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,229 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×