HTTP/2 makes media loading 3–15 times faster on mobile

Denis Mishin
Jan 14, 2016 · 4 min read

Most native mobile apps are “thin clients” — they need talk to backend API and fetch media resources over HTTP.

We wanted to reproduce CloudFlare HTTP2 browser demo as native iOS 9 application and test it on WiFi, LTE / 3G.

The test is to fetch 200 image tiles from an HTTP/1.1 capable server, and then repeat for HTTP/2 capable server.

Test results

  • 4 times faster on WiFi / 20Mbps cable, average server ping 50ms
  • 6 times faster on LTE network, average server ping 90ms
  • 15 times faster on 3G network, average server ping 120ms
  • 2 times faster on 2G network, average server ping 400ms

The reason HTTP/2 is just 2x faster on 2G network is due to EDGE bandwidth constraints as at 170Kbps link rapidly saturates.

Left to right: WiFi, LTE, 3G

HTTP/1.1 bottlenecks

HTTP/1.1 image tile fetch network request pattern, taken with AppScope
  1. Single active request per TCP connection
  2. iOS network stack maintains maximum of 4 TCP connections to the server, and multiplexes logical requests between them.

Therefore, a maximum of 4 simultaneous requests could be processed at any given moment in time, resulting in poor network link utilization and two main issues

  1. Server is unaware about next client needs until client fully consumed response to preceding request and delivered the following request
  2. If some responses are slow, they’ll block the connection

NB: one should not try to raise the number of concurrent TCP connections, as exceeding 5–7 max concurrent TCP sessions per individual client-server IP address/port combination may trigger anti-DDoS filters on some ISPs.

How is HTTP/2 different?

  1. Logical HTTP requests are multiplexed over this single connection, and there is no limit how many concurrent requests client can send
  2. Binary protocol with efficient header compression

When iOS needs to fetch 200 images, instead of sequentially requesting them, it is able request all of them at once, and consume responses as they come.

Priorities and cancellations

  • HTTP/1.1 requests are naturally fetched one by one making
  • HTTP/2 requests are coming at seemingly random pattern, as all requests were given same priority

HTTP/2 defines request priorities and supports cancellations, so that if an application needs to render i.e. a dynamic gallery preview it can request high priority images for the initial view, request images down the list and i.e. cancel their download if user would navigate away or scroll deep down the list.

However it looks like that priorities are not yet supported in NSUrlSession (tested on iOS 9.2).

Link latency matters

Each new connection involves 1 round-trip network datagram exchange between client and server to establish TCP connection, followed by 1–2 round trip datagram exchange for Transport Layer Security TLS handshake — two pre-requisites for HTTPS connection being established.

Because of that, even keeping aside unavoidable overheads such as DNS server name resolution and waking up radio interface into active transmit state, establishing a single HTTPS connection may cost several hundred milliseconds. HTTP/1.1 bears additional overhead by loosing time on extra connection handshakes in order to maintain connection pool for concurrent request execution.

Despite global LTE rollout, users worldwide still get a significant % of service on 3G/2G networks with higher latency compared to LTE

Time on LTE vs 3G/2G as reported by OpenSignal

DataComb

Various app development topics

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store