Re-thinking Perf Tuning

with HTTP2

Vinci RufusGoogle Developer Expert

@areai51

The Best Practices of Todaymay become

Anti-Patterns Tomorrow

Evolution of HTTP

1996 1999 2009 2015

HTTP 1.0 HTTP 1.1 SPDY 1.0 HTTP 2.0

Other things from 1999

Alia Bhatt SangharshWindows 98

iBook (Blueberry color) Nokia 8210

HTTP/1.1 Pains

• One request at a time per connection

• Head of Line Blocking (HOL)

• Duplicate headers for every request

Performance ‘Best’ Practices

Domain Sharding

The first time I got to know about Image Sprites

CSS and JS Bundling

JS + = JSJS + JS

CSS + = CSSCSS + CSS

Latency is the Bigger Performance Killer

Weight of Headers

• Avg header size : 800 bytes (can vary between 300 bytes to 2 KB)

• Total number of requests : 163

• Page Weight : 1,457 KB

• % of Page Weight : (0.8x163)/1457 = ~10%

HTTP2 (at a glance)

Elevator Pitch

http://http2.golang.org/gophertiles?latency=0 https://http2.akamai.com/demo

Sites using Http2

• Yahoo.com• Instagram.com• Flickr.com• Google.com *• developers.google.com• Alibaba.com• Tumblr.com• Blogger.com• Youtube.com• twitter.com (non CDN)• Housing.com (only CDN)

h2 => TLS

h2c => TCP

Browser Support for HTTP2

Server & CDNs Supporting HTTP2

• Apache• Tomcat• Ngnix• Node-http2• nghttp2

• Cloudflare• Akamai• Amazon Cloudfront• MaxCDN• KeyCDN

https://github.com/http2/http2-spec/wiki/Implementations

http2 Features

Single Multiplexed Connection to Host

Data Transferred In Streams as Frames

Stream Initiated by client => Odd numbers

Stream Initiated by Server => Even Numbers

Stream_id = 0x0 => Connection Control Messages

Stream_id 0x1 => http1.1 requests upgraded to h2

Binary Frames

http2 Performance

Multiplexing

HTTP1.1 HTTP2

Multiplexing ≠ Silver bullet

http://engineering.khanacademy.org/posts/js-packaging-http2.htm

‘increased latency due to sub-optimal behavior of our webserver’

HPACK Compression

HPACK compression

HTTP1.1

HTTP2

Stream Priority

• Based on Dependencies and Weights• Weight [1 - 256]

*

A10

B1

*

A10

B1

Prioritization in Firefox

• Prioritization is an advisory hint to the server Server can ignore if necessary

https://www.youtube.com/watch?v=yURLTwZ3ehk

Server Push

https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header/

Assets that need to be pushed

Server Push –Key Points

• Server sends a Push Promise frame.

• Pushed resources must be CACHEABLE

• Can push assets must be from the same origin.

Tools for Debugging• H2i - https://github.com/bradfitz/http2/tree/master/h2i

• Chrome://net-internals

• https://github.com/rmurphey/chrome-http2-log-parser

Re-Thinking Perf Best Practices

Dos

• Keep HTTP requests low• Continue to Compress• Cache Resources on Client• Server Push (cautiously)• Use a server that supports

HPACK & Stream Priority• Bundle upto 3 files

(lib / site-global / page)

Don’t

• Avoid Excessive Domain Sharding• Image Sprites may not be

necessary• No Excessive in-lining

Thank You!!