O documento discute os desafios e otimizações de performance para sites mobile, cobrindo tópicos como: usuários abandonam sites lentos, otimizações como minificar arquivos, usar sprites e lazy load, gargalos de rede móvel como latência e largura de banda, e como melhorar a renderização da página. O objetivo é fornecer uma introdução sobre como melhorar a experiência do usuário em dispositivos mobile.

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

35. DNS
lookup
!
1 RTT
TCP
handshake
!
1 RTT
TLS
handshake
!
1-2 RTT
HTTP
request
!
> 1 RTT

36. latência de
redes móveis

42. WI-FI
Mac
WI-FI
celular
3G
quente
3G
frio
2G
quente
2G
frio
SP 12ms 38ms 88ms 212ms 472ms 622ms
NY 139ms 300ms

43. 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

44. 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)

45. BATERIA

46. WI-FI - 30 ~200 mW
3G - 1000 ~ 3500 mW

47. RRCRadio Resource Controller

48. zzz

49. zzzidle
15 mW

50. zzzidle
15 mW
!!!!

51. zzzidle
15 mW
connected
1000 ~ 3500 mW
!!!!

52. DNS
lookup
!
1 RTT
TCP
handshake
!
1 RTT
TLS
handshake
!
1-2 RTT
HTTP
request
!
> 1 RTT

53. RRC
negociação
!
200 ~ 2500ms
DNS
lookup
!
1 RTT
TCP
handshake
!
1 RTT
TLS
handshake
!
1-2 RTT
HTTP
request
!
> 1 RTT

54. 4G - LTE
3.5G -HSPA+
3G -UMTS,HSPA
2G -EDGE,GPRS

55. 4G - 300 Mbit/s
3.5G -168 Mbit/s
3G -14 Mbit/s
2G -384 Kbit/s

56. 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*

57. 4G - <100ms
3.5G -<100ms
3G -100 ~ 500 ms
2G -300 ~ 1000 ms

58. OTIMIZAÇÕES

59. conteúdo
mais próximo
do usuário

60. conteúdo
mais próximo
do usuário

61. CDNs
content delivery network

62. CDNs
content delivery network

63. DIMINUIR # REQUESTS
concatenar JS e CSS
usar sprites
cachear recursos
!(display:none em <img>)

64. SEM REDIRECTS

65. SEM REDIRECTS

66. POLLING
É DO MAL

67. LAZY-LOAD
JÁ ERA

68. PRELOAD
É O QUE HÁ

69. <link rel="prefetch" href="imagem.jpg">

70. <link rel="prefetch" href="imagem.jpg">
<link rel="dns-prefetch"
href="http://sergiolopes.org">

71. <link rel="prefetch" href="imagem.jpg">
<link rel="subresource" href="imagem.jpg">
<link rel="dns-prefetch"
href="http://sergiolopes.org">

72. <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">

73. por trás do TCP

74. browser server

75. SYN
browser server

76. SYN
SYN ACK
browser server

77. SYN
SYN ACK
ACK
GET /
browser server

78. SYN
SYN ACK
ACK
GET /
4x TCP seg.
browser server
processamento

79. SYN
SYN ACK
ACK
GET /
4x TCP seg. ~5.8 KB
browser server
processamento

80. SYN
SYN ACK
ACK
GET /
4x TCP seg.
4x ACK
~5.8 KB
browser server
processamento

81. SYN
SYN ACK
ACK
GET /
4x TCP seg.
4x ACK
8x ACK
8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento

82. SYN
SYN ACK
ACK
GET /
4x TCP seg.
4x ACK
8x ACK
8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento

83. Connection: Keep-Alive

84. 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...

85. flush early
Java: response.flushBuffer();
.NET: Response.Flush();
PHP: <?php flush(); ?>

86. SYN
SYN ACK
ACK
GET /
4x TCP seg.
4x ACK
8x ACK
8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento

87. cwnd AW10
10-packet TCP congestion window

88. http://bit.ly/1pspHaP

89. http://bit.ly/1pspHaP

90. http://bit.ly/1pspHaP

91. http://bit.ly/1pspHaP

92. http://bit.ly/1pspHaP

93. CRITICAL RENDERING PATH

95. NUNCA
ESCREVA JS QUE
BLOQUEIE RENDER

96. http://slidesha.re/1tuMgcs

97. <script src="script.js" async></script>

98. CSSTAMBÉM
BLOQUEIA
RENDERIZAÇÃO

101. ~600px

102. ~600px
~9000px

103. ~600px
~9000px
ABOVE THE FOLD
(ATF)

104. 1 RTT
ATF
RENDER

106. inline do CSS ATF

107. inline do CSS ATF
inline do JS ATF

108. inline do CSS ATF
inline do JS ATF
flush ATF

109. < 14 KB (cwnd aw10)
inline do CSS ATF
inline do JS ATF
flush ATF

110. < 14 KB (cwnd aw10)
inline do CSS ATF
inline do JS ATF
flush ATF
resto do CSS e JS tudo async

112. RENDERIZAÇÃO

113. EVITE
FRAMEWORKS
PESADOS
& SUBUTILIZADOS

114. QUEBRE
JS PESADO
setImmediate
requestAnimationFrame
Web Workers

115. setImmediate(function(){
// pedaço de processo longo
});

116. requestAnimationFrame(function(){
// quadro de animação
});

117. animações na
GPU com CSS3

118. .fadeout {
opacity: 0;
transition: opacity 2s ease;
}

119. cuidado com
elementos caros
box-shadow / gradient / SVG / data-uri

120. TESTES,
ANÁLISES
&
TRADEOFFs

123. RUM
Real User Monitoring

125. BÔNUS:
INTERFACE
PERFORMÁTICA
delay de 300 ms no click
interface instantânea & sync em bg

126. LATÊNCIA
REDES MÓVEIS
HTTP
CRITICAL PATH
RENDERIZAÇÃO
TESTES
TRADEOFFS

127. A WEB MOBILE
!
OTIMIZAÇÕES E DESAFIOS
DE PERFORMANCE

128. OBRIGADO!
sergiolopes.org @sergio_caelum