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

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

@sergio_caelum
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
CONCATENAR CSS / JS

MINIFICAR CSS / JS
CONCATENAR CSS / JS

CACHE / EXPIRES
MINIFICAR CSS / JS
CONCATENAR CSS / JS

CACHE / EXPIRES
MINIFICAR CSS / JS
SPRITES CONCATENAR CSS / JS

CACHE / EXPIRES
MINIFICAR CSS / JS
JS EMBAIXO

CACHE / EXPIRES
MINIFICAR CSS / JS
JS EMBAIXO
CSS NO TOPO

GZIP
CACHE / EXPIRES
MINIFICAR CSS / JS
JS EMBAIXO
CSS NO TOPO

GZIP
CACHE / EXPIRES
MINIFICAR CSS / JS
JS EMBAIXO
CSS NO TOPO
LAZY-LOAD

GZIP
CACHE / EXPIRES
MINIFICAR CSS / JS
JS EMBAIXO
CSS NO TOPO
LAZY-LOAD ASSÍNCRONO

largura de banda
&
latência (RTT)

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

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

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)

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

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

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

conteúdo
mais próximo
do usuário

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

SYN
SYN ACK
ACK
GET /
browser server

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

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

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

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

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

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

cwnd AW10
10-packet TCP congestion window

NUNCA
ESCREVA JS QUE
BLOQUEIE RENDER

CSSTAMBÉM
BLOQUEIA
RENDERIZAÇÃO

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

inline do CSS ATF
inline do JS ATF

inline do CSS ATF
inline do JS ATF
ﬂush ATF

< 14 KB (cwnd aw10)
inline do CSS ATF
inline do JS ATF
ﬂush ATF

< 14 KB (cwnd aw10)
inline do CSS ATF
inline do JS ATF
ﬂush ATF
resto do CSS e JS tudo async

EVITE
FRAMEWORKS
PESADOS
& SUBUTILIZADOS

QUEBRE
JS PESADO
setImmediate
requestAnimationFrame
Web Workers

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

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

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

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

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

OBRIGADO!
sergiolopes.org @sergio_caelum

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

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (10)

Semelhante a Otimizações de Performance Web: Desafios do Mundo Mobile (20)

Mais de Caelum (19)

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