HTTP/2 for Front-End Developers

Mark Nottingham


(for Front-End Developers)

Mark Nottingham

What's Wrong with HTTP/1?

1. Bad Network Utilisation

img[0-3] - 25 images

2. Verbose Headers

HTTP/2 in One Slide

  1. A Fully Multiplexed, Binary Protocol…
    • One connection per origin - Better network utilisation
    • Browsers don't have to guess when/where to send requests
  2. …with Header Compression…
    • Many requests in one packet!
  3. …and Server Push.
    • Put a response in the browser cache before it knows it needs it.

Theme: reduce the overhead of HTTP requests

~5-15% ++

Same, but different.

You can use the same HTTP APIs, headers, methods, and status codes, but to get the most out of the protocol, there are a few things to tweak, tune and consider.

You might need new URLs.

All major browsers require encrypted connections for HTTP/2.
Practically speaking, this means https://

Recommendation: Start transitioning to HTTPS now.

You Might Need New URLs (2)

Spreading traffic to multiple hosts hurts perf and HTTP/2.

Why? Increased chance of congestion events, worse header compression.

You can use connection coalescing if DNS and cert agree.

Recommendation: There Can Be Only One (hostname).

HTTP/1 Content “Optimisations”

Spriting, inlining and concatenation are all techniques to reduce the number of HTTP requests.

In HTTP/2, they can hurt your performance:

Recommendation: Think about a strategy to de-optimise.

Think about Prioritisation…

In HTTP/1, browsers are responsible for deciding request priority and ordering - and sometimes they get it wrong.

In HTTP/2 it's up to the server (thanks to multiplexing).

Decisions like:

…Because Prioritisation Works.

Recommendation: Look for APIs, data and studies.

Server Push

In principle, push can save you a round trip - putting something in cache before the browser knows it needs it.

Header Compression

HPACK is coarse-grained; it works on an an entire header.


Recommendation: Reduce header variability.

FYI: TLS Requirements

HTTP/2 Requirements:

Tune TLS Performance

Client Certificates and HTTP/2

HTTP/2 doesn't support client certificates, because no renegotiation.

DoS Protection

Hyper-Persistent Connections

For HTTP/1 74% of our active connections carry just a single transaction - persistent connections just aren't as helpful as we all want. But in HTTP/2 that number plummets to 25%.

Patrick McManus, Mozilla Networking Lead

Connection Timeouts

HTTP/2 thrives with long-lived connections.

Recommendation: Architect and configure for long-lived connections.

DNS Load Balancing

HTTP/1 DNS load balancing leverages short connections.

TCP Configuration

HTTP/2 removes application-layer issues, but TCP congestion control brings its own.

More servers? Less?

Choose a Good Server

Do you:

Some tools to help

Just Getting Started.