Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to
REDUCE MOBILE LATENCY
& BATTERY DRAIN
on Front-End
I’m
DMYTRII
SHCHADEI
CELLULAR
NETWORKS
WWW
INTERNET ROUTING
latency
CORE NETWORK
latency
CONTROL PLANE
latency
Transmission schedule
Device Power State
Signal Power
Bandwidth
RADIO
RESOURCE
CONTROLLER
by @
TRANSITION TIME
BATTERYPOWER
IDLE
LOW POWER
FULL POWER
~ 2 sec
~ 1.5 sec
~ 5 sec
~ 12 sec
MOBILE POWER STATES
on 3G networ...
IDLE LOW POWER FULL POWER
1000-3500 mW500-1800 mW15 MW
MOBILE POWER STATES
on 3G network
First request incurs a higher delay due to the
RRC transition
After few seconds of being idle the next packet
will incur 0...
ENERGY
TAILS
FULL
POWER
LOW POWER
DATATRANSFER
TIME
POWER
~ 12 sec~ 5 sec
ENERGY TAIL
POWER STATES TRANSITION
LAZY IMAGE
LOADING
LAZY IMAGE
loading
BURST
RRC
STATES
THROUGH
PUT
LOW LOW LOW
HIGH
POWER
HIGH
Energy Tail Energy Tail
t
ANALYTICS
BEACONS
ANALYTICS
beacons
BURST
RRC
STATES
THROUGH
PUT
Energy Tail Energy Tail
HIGH
POWER LOW
HIGH HIGH
beacons
t
– Ilya Grigorik
performance engineer at Google
“BURST AS MUCH DATA AS YOU CAN, THEN
TURN OFF THE RADIO FOR AS LONG AS
POSS...
DATA1TRANSFER
TIME
POWER
FULL
LOW
DATA2TRANSFER
FULL
LOW
DATA1TRANSFER
TIME
POWER
FULL
LOW
DATA2TRANSFER
BETTER*
PRACTICES
PREFETCH
server-hints
<link rel=“dns-prefetch” href=“blog.site.com”>
<link rel=“prefetch” href=“site.com/prices”>
<link re...
BATCH
requests
Use batch API
Batch requests by queuing delay
(abuse REST, combine multiple requests into one)
(phase-shift...
PUSH
delivery
Use SSE (i.e. EventSource) & WebSocket to reduce latency
But, WebSocket with 3 sec keep-alive consumes ~2 ti...
WEB PUSH
notification
You must! show the notification
You can’t send any data with an
event
Can be used as an indicator
that...
UNSTABLE
TCP CON
TCP SLOW-START
1 2 3 4 5 6 7 8 ROUND TRIPS
10
20
30
40
50
60
70
80
SEGMENTS
PACKET LOSS
EXPONENTIAL
GROWTH
MULTIPLICATIVE
...
TAKEAWAYS
tcp slow-start
TCP doesn’t perform well on unreliable connections
Use RTCDataChannel where applicable
SCTP for U...
TCP HEAD OF LINE
blocking
TCP TCP
will be buffered until is retransmitted
lost pocket
TAKEAWAYS
tcp hol blocking
But inline resources under 1-2KB
Unreliable network causes slower traffic
Slice large file into fe...
(https://github.com/js-platform/node-webrtc)
Attribution
AT&T Application Resource Optimizer (ARO)
(https://developer.att....
THANK YOU
DMYTRII SHCHADEI
@metrofun
gmetrofun@gmail.com
Upcoming SlideShare
Loading in …5
×

How to reduce mobile latency & battery drain on Front-End

3,668 views

Published on

Mobile networking is not a new beast, but still not fully understood by front-end developers. Seriously, It's not enough just to know that it is slow and has a high latency. We should discuss core concepts of cellular network to better understand how our phones actually operate. It will lead us to new approaches and best practices, that will not only allow us to significantly reduce a battery consumption of our apps, but literally even reduce a latency in some scenarios. Again, we are still talking about front-end side optimizations.

Published in: Software
  • Be the first to comment

How to reduce mobile latency & battery drain on Front-End

  1. 1. How to REDUCE MOBILE LATENCY & BATTERY DRAIN on Front-End
  2. 2. I’m DMYTRII SHCHADEI
  3. 3. CELLULAR NETWORKS
  4. 4. WWW INTERNET ROUTING latency CORE NETWORK latency CONTROL PLANE latency
  5. 5. Transmission schedule Device Power State Signal Power Bandwidth RADIO RESOURCE CONTROLLER by @
  6. 6. TRANSITION TIME BATTERYPOWER IDLE LOW POWER FULL POWER ~ 2 sec ~ 1.5 sec ~ 5 sec ~ 12 sec MOBILE POWER STATES on 3G network ~ 32 kbps
  7. 7. IDLE LOW POWER FULL POWER 1000-3500 mW500-1800 mW15 MW MOBILE POWER STATES on 3G network
  8. 8. First request incurs a higher delay due to the RRC transition After few seconds of being idle the next packet will incur 0.1-1 seconds of extra RRC latency. TAKEAWAYS device power states .
  9. 9. ENERGY TAILS
  10. 10. FULL POWER LOW POWER DATATRANSFER TIME POWER ~ 12 sec~ 5 sec ENERGY TAIL POWER STATES TRANSITION
  11. 11. LAZY IMAGE LOADING
  12. 12. LAZY IMAGE loading BURST RRC STATES THROUGH PUT LOW LOW LOW HIGH POWER HIGH Energy Tail Energy Tail t
  13. 13. ANALYTICS BEACONS
  14. 14. ANALYTICS beacons BURST RRC STATES THROUGH PUT Energy Tail Energy Tail HIGH POWER LOW HIGH HIGH beacons t
  15. 15. – Ilya Grigorik performance engineer at Google “BURST AS MUCH DATA AS YOU CAN, THEN TURN OFF THE RADIO FOR AS LONG AS POSSIBLE.”
  16. 16. DATA1TRANSFER TIME POWER FULL LOW DATA2TRANSFER FULL LOW DATA1TRANSFER TIME POWER FULL LOW DATA2TRANSFER
  17. 17. BETTER* PRACTICES
  18. 18. PREFETCH server-hints <link rel=“dns-prefetch” href=“blog.site.com”> <link rel=“prefetch” href=“site.com/prices”> <link rel=“prerender” href=“site.com/checkout”>
  19. 19. BATCH requests Use batch API Batch requests by queuing delay (abuse REST, combine multiple requests into one) (phase-shift analytics, schedule updates)
  20. 20. PUSH delivery Use SSE (i.e. EventSource) & WebSocket to reduce latency But, WebSocket with 3 sec keep-alive consumes ~2 times more energy than long-polling with 20 sec interval But, WebSocket with 20 sec keep-alive intervals will incur extra latency overhead due to RRC transitions Piggyback your keep-alive messages Connectionless push feature of SSE is not implemented in any modern mobile browser
  21. 21. WEB PUSH notification You must! show the notification You can’t send any data with an event Can be used as an indicator that network is now active
  22. 22. UNSTABLE TCP CON
  23. 23. TCP SLOW-START 1 2 3 4 5 6 7 8 ROUND TRIPS 10 20 30 40 50 60 70 80 SEGMENTS PACKET LOSS EXPONENTIAL GROWTH MULTIPLICATIVE DECREASE
  24. 24. TAKEAWAYS tcp slow-start TCP doesn’t perform well on unreliable connections Use RTCDataChannel where applicable SCTP for UDP-like connections Games, streaming Domain-sharding is ineffective on mobile Use HTTP2 (single TCP per all HTTP requests) WebRTC for client-server Check QUIC protocol
  25. 25. TCP HEAD OF LINE blocking TCP TCP will be buffered until is retransmitted lost pocket
  26. 26. TAKEAWAYS tcp hol blocking But inline resources under 1-2KB Unreliable network causes slower traffic Slice large file into few for incremental execution 30–50 KB (gzip) optimal JavaScript bundle size
  27. 27. (https://github.com/js-platform/node-webrtc) Attribution AT&T Application Resource Optimizer (ARO) (https://developer.att.com/application-resource-optimizer) “High Performance Browser Networking” by Ilya Grigorik (http://chimera.labs.oreilly.com/books/1230000000545) Server-Sent Events, Connectionless push and other features (http://www.w3.org/TR/2011/WD-eventsource-20110208/#eventsource-pushing) Optimizing Downloads for Efficient Network Access (http://developer.android.com/training/efficient-downloads/efficient-network-access.html) A Call for More Energy-Efficient Apps (http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient) WebRTC stack for node.js (https://w3c.github.io/push-api) W3C Push API (http://www.w3.org/2012/10/Qualcomm-paper.pdf) HTML5 Connectivity Methods and Mobile Power Consumption
  28. 28. THANK YOU DMYTRII SHCHADEI @metrofun gmetrofun@gmail.com

×