This document discusses optimizing mobile networks and applications for speed. It begins with an overview of networking basics and how mobile networks work. It then discusses factors that affect speed like latency, bandwidth, TCP protocols, and cellular network routing. The document provides recommendations for optimizing like leveraging WiFi, anticipating latency, saving bandwidth and battery. It also covers HTTP optimizations, browser APIs and protocols like XHR, SSE and WebSockets. The goal is to understand how networks impact applications and how to design for optimal mobile performance.

1. Mobile Networks
Understanding communication layer for web and mobile

2. Agenda
•
Networking basics
•
How mobile networks work
•
Optimising for mobile networks
•
Other HTTP/1.x optimisations
•
Browser APIs and protocols: XHR, SSE, WebSockets

3. Why Do You Care ?
•
How does network affect your application?

4. Why Do You Care ?
•
Speed: How fast can I deliver content to a user ?
•
Battery: What network operations affect battery
life ?
•
Cost: Is connection metered ?

5. Let’s start with “speed”
“
eb page to load in 2
consumer s expect a w
47% of
seconds or less.
”

6. Let’s start with “speed”
“
net user s say
3% of mobile inter
7
red a website
they’ve encounte
that
too slow to load.
that was
”

7. Let’s start with “speed”
“
-Load Can Cause
ond Delay In Page
Just One Sec
r Conver sions
Loss In Custome
7%
”

8. How load times affect conversion
•
Glasses direct measured

9. How load times affect conversion
•
Wallmart measured

10. How load times affect conversion
•
Strangeloop measured

11. How load times affect conversion
•
Google measured
Type Of Delay
Delay (ms)
Duration (weeks)
Impact
Pre Header
50
4
-
Pre Header
100
4
-0.2%
Post Header
200
6
-0.59%
Post Header
400
6
-0.59%

12. Speed: You should care
•
Load times affects:
•
Bounce rate
•
Time on site
•
Conversion
•
Satisfaction

13. Q&A

14. Network speed

15. Bandwidth is growing

16. Bandwidth Considerations
•
For most applications, bandwidth is not an issue
•
HSPA+ (2008) :
•
Up to 84Mbit/s down link
•
Up to 10.8Mbit/s up link

17. Latency, on the other hand…
•
Latency:
•
is bound by the speed of light
•
is not expected to grow dramatically in coming
years
•
Has drastic effect on applications that transfer small
amounts of data

18. Latency vs. Bandwidth

19. Latency Upper Bound
•
Latency is bound by the speed of light
Time: light in Time: light in
vacuum
finer
Route
Distance
RTT
New York to
London
5,585km
19ms
28ms
56ms
New York to
Sidney
15,998km
53ms
80ms
160ms

20. In practice
•
Latency is much higher
•
Distance is not air line
•
Affected by network delays

21. Demo
•
Checking latency with traceroute
•
Discussion: How would you reduce latency?

22. Q&A

23. Transmission Control Protocol
(TCP)

24. TCP/IP Network Basics
•
IP provides host-to-host routing
•
TCP provides application-to-application reliable
channel

25. TCP/IP Network Basics

26. TCP and network speed
•
TCP Handshake
•
TCP congestion control
•
Head of line blocking

27. TCP Handshake

28. TCP Handshake implication
•
Each new connection requires a full round trip
before data can be sent
•
=> New TCP connections are expensive

29. TCP Congestion control
•
When a packet is not ACKed after a
retransmission interval, the host resends it
•
What happens if RTT > retransmission interval ?

30. TCP Congestion
Host A
Host B

31. TCP Slow Start
•
cwnd variable on the server controls how many
packets can be “in flight” at any given time
•
Ack => cwnd++

32. TCP Slow Start
cwnd = 4
Ack 1
cwnd = 5

33. TCP Slow Start: Quiz
•
Assuming initial cwnd = 4
•
Roundtrip time 56 ms (New York -> London)
•
TCP packet size is 1460 bytes
•
How much time do you need to get a 64kb
throughput ?

34. TCP Slow Start
•
65,535 / 1460 =~ 45 packets
•
We need to get 45 packets in flight to reach 64kb
•
Remember cwnd doubles each round trip

35. TCP Slow Start
•
cwnd values: 4 => 8 => 16 => 32 => 64
•
4 rountrips * 56ms = 224 ms

36. TCP Slow Start

37. Q&A

38. Head of line blocking
•
Host A sends 5 TCP packets: a1, a2, a3, a4, a5
•
Packets a2-a5 reach in time
•
Packet a1 dropped by an intermediate router and
has to be resent
•
How is your application affected?

39. Head of line blocking
Process
File transfer
Video chat
Music streaming
Web page
Effect of head-of-line blocking

40. Head of line blocking
Process
Effect of head-of-line blocking
File transfer
None. App has nothing to do with a
partial
Video chat
Jitter
Music streaming
It depends. Requires buffering or jitters
Web page
Suffers from both HTTP and TCP HOL

41. TCP Optimisations: Server
•
Increase cwnd
•
Disable slow-start after idle

42. TCP Optimisations: App
•
Reuse existing connections as much as possible
•
Aggregate messages
•
Use a CDN
•
Use compression

43. Q&A

44. Mobile Networks

45. Types of Mobile Networks
Type
Applications
Standards
Personal area network
(PAN)
Cable replacements
Bluetooth, NFC
Local area network (LAN)
Wireless extension of
network
802.11 (WiFi)
Metropolitan area network
(MAN)
Wireless inter network
connectivity
802.15 (WiMax)
Wide area network (WAN)
Wireless network access
Cellular (UMTS, LTE,…)

46. WiFi Attributes
•
No bandwidth or latency guarantee
•
WiFi access is usually un-metered

47. Leveraging WiFi
•
Use WiFi to download large files or stream data
•
Prompt user to switch to wifi when applicable

48. Leveraging WiFi
•
Detect WiFi or 3G:
•
iOS: https://developer.apple.com/library/ios/
samplecode/Reachability/Listings/
Reachability_Reachability_m.html
•
Android: https://gist.github.com/emil2k/5130324

49. Leveraging WiFi
•
Adapt to variable bandwidth
•
Quiz:
•
What can cause bandwidth to vary?
•
How does variable bandwidth affect video
streaming app ?

50. Leveraging WiFi
•
When streaming video, we need to detect best
bitrate for a connection
•
Quiz: How would you adapt to varying bandwidth
in a video streaming app?

51. Adaptive Bitrate Streaming
•
Encode each segment for multiple bitrates
•
Netflix has over 120 different versions for each
stream

52. Q&A

53. Cellular
Networks

54. Cellular Attributes
•
Varying infrastructure (generations) lead to varying
bandwidth and latencies
•
Battery is an issue
•
Data is an issue

55. Mobile Gs
Generation
Data Rate
Latency
2G
100-400 Kbit/s
300-1,000 ms
3G
0.5-5 Mbit/s
100-500 ms
4G
1-50 Mbit/s
< 100 ms

56. Mobile Network
•
What you should expect:
•
Network infrastructure is changing slow
•
2G networks are still around (and will be)
•
3G networks are still around (and will be)
•
3.5G, 3.75G, 3.9G are all around
•
4G

57. Mobile Is Different

58. RRC
•
Radio Resource Controller allows devices to put
their radio to sleep
•
It instructs a device when to speak, and when to
listen

59. RRC State Machine

60. Quiz
•
When listening to music, Pandora wants to know how long you listen
•
Here’s what they did:
•
Send entire song to user when user starts to play
•
During playback, send periodic updates to Pandora server
•
Describe RRC state changes
•
How is battery affected ?

61. Short DRX
idle
Long DRX
Data Transfer
Data Transfer
Power
Periodic Updates and Mobile

62. Periodic Updates and Mobile
Short DRX
idle
Long DRX
Data Transfer
Data Transfer
Power
Energy tail

63. Periodic Updates and Mobile
•
Energy tails waste power
•
For Pandora: 46% of battery consumption to
transfer 0.2% of total bytes
•
What can Pandora do ?

64. Periodic Updates and Mobile
•
A better solution:
•
save data on client and send it all aggregated in a
later time

65. Q&A

66. Routing In Cellular Network

67. Routing In Cellular Network
•
PGW (Packet Gateway) acts like a NAT
•
It assigns IP address to a mobile device
•
It keeps TCP connection alive when mobile
device moves

68. Routing In Cellular Network
•
PCRF (Policy and Charging Rules Function)
instructs PGW how to assign addresses

69. •
SGW (Service Gateway) routes all data to the
mobile device
•
MME (Mobility Management Entity) keeps track of
each device and its current cell tower

70. Other Considerations
•
Latency is bad when device was idle
•
Bandwidth is a big issue for carriers

71. Cellular Networks Optimisations

72. Save Battery
•
Eliminate periodic and inefficient data transfers
•
Defer non-critical requests until radio is active
•
Eliminate application keep-alives

73. Anticipate Latency
•
3G latency 200-3,500 ms
•
Decouple user interactions from network
•
Burst data and return to idle

74. Save Bandwidth
•
Consider offloading to WiFi if possible
•
Cache data locally
•
Always consider offline
•
Plan and test for slow network

75. Q&A

76. Optimising for
the web
Simple HTTP techniques to
optimise mobile web access

77. HTTP Basics
•
Verify using HTTP 1.1 and Keepalive
•
Verify using GZip compression
•
Can use chrome or:
curl -I --compressed http://yoursite.com

78. CSS Sprites

79. Use the best image size

80. Avoid Redirects at all costs
•
Redirects add another request but with no value
•
Worst kind: Mobile Redirects
•
Demo: d.co.il

81. Better Way: Use smart banners
•
Offer to download the app
from within the page
<meta name="apple-itunes-app"
content="app-id=366977202">

82. Use caches to reduce requests
File size doesn’t matter

83. Use caches to reduce requests
HTTP 1.0 Had an Expires header:
•
Expires: Thu, 15 Apr 2010 20:00:00 GMT
HTTP 1.1 Added Cache-Control header:
•
Cache-Control: max-age=315360000

84. HTTP 1.1 Pipelining

85. HTTP 1.1 Pipelining
•
Send multiple requests not waiting for responses
•
HOL blocking can occur
•
Fewer round-trips

86. HTTP 1.1 Pipelining

87. HTTP 1.1 Pipelining
•
Supported browsers:
•
Android
•
Opera

88. Optimising for Pipelining
•
Make sure web server supports it (probably does)
•
Serve slow (dynamic) resources from a different
domain than static resources

89. Q&A

90. Browser APIs and Protocols
•
XMLHttpRequest
•
Server Sent Events
•
Web Sockets

91. XHR
•
XMLHttpRequest began on IE as part of MSXML
•
Script data transfers via JavaScript

92. XHR in use
•
Get partial data after initial page load
•
Other uses (not optimal):
•
Polling
•
Resumable Upload

93. XHR Loading data
•
Example:
•
Initial page has a list of products
•
User clicks on a product
•
XHR is used to get product info and inject to
page

94. XHR Code
var xhr = new XMLHttpRequest();
xhr.open('GET', 'info.json');
xhr.onload = function(e) {
// handle response data
if (xhr.status != 200) return;
var info = JSON.parse(xhr.responseText);
document.querySelector('h2').innerHTML = info.name;
document.querySelector('.bio').innerHTML = info.biography;
};
xhr.send();

95. XHR Polling
•
XHR provides a simple method to get server
events
•
Two options:
•
Interval polling
•
Long polling

96. XHR Polling
•
Quiz:
In regards to mobile battery life - which polling
method would you prefer ?

97. XHR Polling
Answer:
It depends :)
•
Interval polling keeps radio active, but aggregates
events
Long polling is not a good idea in case of frequent
events

98. XHR Upload
•
Use JavaScript to slice buffer before sending
•
Send small fragments in a loop
•
Resend only failed fragments

99. XHR Upload Demo Code
while ( start < SIZE ) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { /* ... */ };
xhr.setRequestHeader('Content-Range', "
start + '-' + end + '/' + SIZE);
xhr.send(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}"
Usable JS library: resumablejs.com

100. Server Sent Events
GET /events
Client
Server

101. Server Architecture
Socket Server
mq / db
Application
Server
http
Client
Browser

102. Server Architecture
•
Most web servers are optimised for short lived
client connections (HTTP)
•
Socket server is optimised for maintaining many
(mostly) idle connections

103. SSE Protocol
•
Each line starts with a data: prefix
•
Can also specify other event attributes

104. SSE Protocol
1
2
3
4
5
data:
data:
data:
data:
"
{n"
"msg": "hello world",n"
"id": 12345n"
}nn"

105. SSE Protocol
•
Can specify event name
•
Browser can assign different handler for each
event name
1
2
3
4
5
data: {"msg": "First message"}nn"
event: userlogonn"
data: {"username": "John123"}nn"
event: updaten"
data: {"username": "John123", "emotion": "happy"}nn"

106. Demo Code: stomp
•
Demo
•
Socket Server + Application Server: Mojolicious
(perl)
•
MQ
•
Sending random text to clients

107. Web Sockets
•
Bidirectional text and binary socket
•
As close to raw socket as can get

108. Web Sockets Attributes
•
Same origin policy
•
Message oriented

109. WebSocket API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var connection = new WebSocket('ws://html5rocks.websocket.org/echo');"
"
// When the connection is open, send some data to the server"
connection.onopen = function () {"
connection.send('Ping'); // Send the message 'Ping' to the server"
};"
"
// Log errors"
connection.onerror = function (error) {"
console.log('WebSocket Error ' + error);"
};"
"
// Log messages from the server"
connection.onmessage = function (e) {"
console.log('Server: ' + e.data);"
};"

110. WebSockets Keep In Mind
•
No compression - if needed implement your own
•
TLS is recommended
•
For mobile: send in bursts

111. Socket.IO
•
A WebSocket Library
•
Maintains connected clients
•
Includes a JS library
•
Automatic fallback

112. Demo Code: Menotes
•
https://github.com/ynonp/menotes
•
Note taking angular app with sockets
•
Stack:
•
Application server: perl (catalyst)
•
Socket server: node
•
Message Queue: Rabbit MQ
•
Client: Angular.JS

113. Q&A

114. Thanks For Listening
•
Ynon Perek
•
http://ynonperek.com
•
ynon@ynonperek.com

115. Photos & Data From
•
World bandwidth (slide 15):
http://techcrunch.com/2012/08/09/akamai-global-averagebroadband-speeds-up-by-25-u-s-up-29-to-6-7-mbps/
•
Mobile Web (slide 76): http://www.flickr.com/photos/
khawkins04/8659736133/sizes/c/
•
HTTP Pipielining (slide 84): http://en.wikipedia.org/wiki/
HTTP_pipelining
•
Illustrations: 123rf.com