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
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
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
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
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 ?
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
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
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,…)
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?
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
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 ?
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
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
72. Save Battery
•
Eliminate periodic and inefficient data transfers
•
Defer non-critical requests until radio is active
•
Eliminate application keep-alives
88. Optimising for Pipelining
•
Make sure web server supports it (probably does)
•
Serve slow (dynamic) resources from a different
domain than static resources
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
102. Server Architecture
•
Most web servers are optimised for short lived
client connections (HTTP)
•
Socket server is optimised for maintaining many
(mostly) idle connections
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
