otimizações de performance web: desafios do mundo mobile
DESCRIPTION
Palestra de Sérgio Lopes no MobileConf RJ 2014 & QCon SP 2013.TRANSCRIPT
A WEB MOBILE !
OTIMIZAÇÕES E DESAFIOS DE PERFORMANCE
@sergio_caelumsergiolopes.org
sergiolopes.org
sergiolopes.org
74% DOS USUÁRIOS
FALAM QUE ABANDONAM O SITE MOBILE DEPOIS DE 5s DE ESPERA
85% DOS USUÁRIOS
ESPERAM QUE UM SITE ABRA NO CELULAR TÃO OU MAIS RÁPIDO QUE NO DESKTOP
OTIMIZAÇÕES WEB 101
OTIMIZAÇÕES WEB 101CONCATENAR CSS / JS
OTIMIZAÇÕES WEB 101
MINIFICAR CSS / JS
CONCATENAR CSS / JS
OTIMIZAÇÕES WEB 101
CACHE / EXPIRES
MINIFICAR CSS / JS
CONCATENAR CSS / JS
OTIMIZAÇÕES WEB 101
CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS
OTIMIZAÇÕES WEB 101
CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS
JS EMBAIXO
OTIMIZAÇÕES WEB 101
CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS
JS EMBAIXO
CSS NO TOPO
OTIMIZAÇÕES WEB 101
GZIP
CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS
JS EMBAIXO
CSS NO TOPO
OTIMIZAÇÕES WEB 101
GZIP
CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS
JS EMBAIXO
CSS NO TOPO
LAZY-LOAD
OTIMIZAÇÕES WEB 101
GZIP
CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS
JS EMBAIXO
CSS NO TOPO
LAZY-LOAD ASSÍNCRONO
#mobileperf
GARGALOS MOBILE
GARGALOS MOBILE
GARGALOS MOBILE
GARGALOS MOBILE
GARGALOS MOBILE
GARGALOS MOBILE
REDE
largura de banda &
latência (RTT)
NY
SP
NY
SP
7648km
NY
SP
7648km
299,792458km/ms
NY
SP
NY
SP
NY
SP
25,5 ms
NY
SP
NY
SP
RTT ideal = 51 ms
DNS lookup
!
1 RTT
TCP handshake
!
1 RTT
TLS handshake
!
1-2 RTT
HTTP request
!
> 1 RTT
latência de redes móveis
WI-FI Mac
WI-FI celular
3G quente
3G frio
2G quente
2G frio
SP 12ms 38ms 88ms 212ms 472ms 622ms
NY 139ms 300ms
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
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)
BATERIA
WI-FI - 30 ~200 mW 3G - 1000 ~ 3500 mW
RRC Radio Resource Controller
zzz
zzzidle 15 mW
zzzidle 15 mW
!!!!
zzzidle 15 mW
connected 1000 ~ 3500 mW
!!!!
DNS lookup
!
1 RTT
TCP handshake
!
1 RTT
TLS handshake
!
1-2 RTT
HTTP request
!
> 1 RTT
RRC negociação
!
200 ~ 2500ms
DNS lookup
!
1 RTT
TCP handshake
!
1 RTT
TLS handshake
!
1-2 RTT
HTTP request
!
> 1 RTT
4G - LTE 3.5G - HSPA+ 3G - UMTS, HSPA 2G - EDGE, GPRS
4G - 300 Mbit/s 3.5G - 168 Mbit/s 3G - 14 Mbit/s 2G - 384 Kbit/s
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*
4G - <100ms 3.5G - <100ms 3G - 100 ~ 500 ms 2G - 300 ~ 1000 ms
OTIMIZAÇÕES
conteúdo mais próximo
do usuário
conteúdo mais próximo
do usuário
CDNscontent delivery network
CDNscontent delivery network
DIMINUIR # REQUESTSconcatenar JS e CSS
usar sprites cachear recursos
!(display:none em <img>)
SEM REDIRECTS
SEM REDIRECTS
POLLING É DO MAL
LAZY-LOAD JÁ ERA
PRELOAD É O QUE HÁ
<link rel="prefetch" href="imagem.jpg">
<link rel="prefetch" href="imagem.jpg">
<link rel="dns-prefetch" href="http://sergiolopes.org">
<link rel="prefetch" href="imagem.jpg">
<link rel="subresource" href="imagem.jpg">
<link rel="dns-prefetch" href="http://sergiolopes.org">
<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">
por trás do TCP
browser server
SYN
browser server
SYNSYN ACK
browser server
SYNSYN ACK
ACKGET /
browser server
SYNSYN ACK
ACKGET /
4x TCP seg.
browser server
processamento
SYNSYN ACK
ACKGET /
4x TCP seg. ~5.8 KB
browser server
processamento
SYNSYN ACK
ACKGET /
4x TCP seg.4x ACK
~5.8 KB
browser server
processamento
SYNSYN ACK
ACKGET /
4x TCP seg.4x ACK
8x ACK8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento
SYNSYN ACK
ACKGET /
4x TCP seg.4x ACK
8x ACK8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento
Connection: Keep-Alive
SYNSYN ACK
ACKGET /
4x TCP seg.4x ACK
8x ACK8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento
parado...
flush earlyJava: response.flushBuffer();.NET: Response.Flush();PHP: <?php flush(); ?>
SYNSYN ACK
ACKGET /
4x TCP seg.4x ACK
8x ACK8x TCP seg.
~5.8 KB
~11.6 KB
...
browser server
processamento
cwnd AW1010-packet TCP congestion window
http://bit.ly/1pspHaP
http://bit.ly/1pspHaP
http://bit.ly/1pspHaP
http://bit.ly/1pspHaP
http://bit.ly/1pspHaP
CRITICAL RENDERING PATH
NUNCA ESCREVA JS QUE BLOQUEIE RENDER
http://slidesha.re/1tuMgcs
<script src="script.js" async></script>
CSS TAMBÉM BLOQUEIA RENDERIZAÇÃO
~600px
~600px
~9000px
~600px
~9000px
ABOVE THE FOLD (ATF)
1 RTT ATF RENDER
inline do CSS ATF
inline do CSS ATF
inline do JS ATF
inline do CSS ATF
inline do JS ATF
flush ATF
< 14 KB (cwnd aw10)
inline do CSS ATF
inline do JS ATF
flush ATF
< 14 KB (cwnd aw10)
inline do CSS ATF
inline do JS ATF
flush ATF
resto do CSS e JS tudo async
RENDERIZAÇÃO
EVITE FRAMEWORKS PESADOS & SUBUTILIZADOS
QUEBRE JS PESADO
setImmediate requestAnimationFrame
Web Workers
setImmediate(function(){ // pedaço de processo longo});
requestAnimationFrame(function(){ // quadro de animação});
animações na GPU com CSS3
.fadeout { opacity: 0; transition: opacity 2s ease;}
cuidado com elementos carosbox-shadow / gradient / SVG / data-uri
TESTES, ANÁLISES
&
TRADEOFFs
RUMReal User Monitoring
BÔNUS: INTERFACE PERFORMÁTICA
delay de 300 ms no click interface instantânea & sync em bg
LATÊNCIA REDES MÓVEIS HTTP CRITICAL PATH RENDERIZAÇÃO TESTES TRADEOFFS
A WEB MOBILE !
OTIMIZAÇÕES E DESAFIOS DE PERFORMANCE
OBRIGADO!
sergiolopes.org @sergio_caelum