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

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

Post on 08-Sep-2014

3.895 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • A WEB MOBILE ! OTIMIZAES E DESAFIOS DE PERFORMANCE
  • @sergio_caelum sergiolopes.org
  • sergiolopes.org
  • sergiolopes.org
  • 74% DOS USURIOS FALAM QUE ABANDONAM O SITE MOBILE DEPOIS DE 5s DE ESPERA
  • 85% DOS USURIOS ESPERAM QUE UM SITE ABRA NO CELULAR TO OU MAIS RPIDO QUE NO DESKTOP
  • OTIMIZAES WEB 101
  • OTIMIZAES WEB 101 CONCATENAR CSS / JS
  • OTIMIZAES WEB 101 MINIFICAR CSS / JS CONCATENAR CSS / JS
  • OTIMIZAES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS CONCATENAR CSS / JS
  • OTIMIZAES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS
  • OTIMIZAES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO
  • OTIMIZAES WEB 101 CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO
  • OTIMIZAES WEB 101 GZIP CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO
  • OTIMIZAES WEB 101 GZIP CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO LAZY-LOAD
  • OTIMIZAES WEB 101 GZIP CACHE / EXPIRES MINIFICAR CSS / JS SPRITES CONCATENAR CSS / JS JS EMBAIXO CSS NO TOPO LAZY-LOAD ASSNCRONO
  • #mobileperf
  • GARGALOS MOBILE
  • GARGALOS MOBILE
  • GARGALOS MOBILE
  • GARGALOS MOBILE
  • GARGALOS MOBILE
  • GARGALOS MOBILE
  • REDE
  • largura de banda & latncia (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
  • latncia de redes mveis
  • 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 PGINA 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 PGINA vs LATNCIA (RTT)
  • BATERIA
  • WI-FI - 30 ~200 mW 3G - 1000 ~ 3500 mW
  • RRCRadio 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 negociao ! 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 mximos em contrato dos planos atuais da Vivo em SP*
  • 4G -