otimizações de performance web: desafios do mundo mobile

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