The document discusses how best practices for performance tuning with HTTP/1.1 may need to be re-thought with the introduction of HTTP/2. It provides an overview of how HTTP/2 addresses limitations of HTTP/1.1 like head-of-line blocking through features like multiplexing, binary framing, header compression and server push. It recommends approaches like keeping HTTP requests low and caching resources while avoiding past practices like excessive domain sharding or image sprites that are no longer needed with HTTP/2.

1. Re-thinking Perf Tuning
with HTTP2
Vinci Rufus
Google Developer Expert
@areai51

2. The Best Practices of Today
may become
Anti-Patterns Tomorrow

3. Evolution of HTTP
1996 1999 2009 2015
HTTP 1.0 HTTP 1.1 SPDY 1.0 HTTP 2.0

4. Other things from 1999
Alia Bhatt
SangharshWindows 98
iBook (Blueberry color) Nokia 8210

5. HTTP/1.1 Pains
• One request at a time per connection
• Head of Line Blocking (HOL)
• Duplicate headers for every request

6. Performance ‘Best’ Practices

7. Domain Sharding

8. The first time I got to know about Image Sprites

9. CSS and JS Bundling
JS + = JSJS + JS
CSS + = CSSCSS + CSS

10. Latency is the Bigger Performance Killer

11. 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%

12. HTTP2 (at a glance)

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

14. 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

15. Browser Support for HTTP2

16. Server & CDNs Supporting HTTP2
• Apache
• Tomcat
• Ngnix
• Node-http2
• nghttp2
• Cloudflare
• Akamai
• Amazon Cloudfront
• MaxCDN
• KeyCDN
https://github.com/http2/http2-spec/wiki/Implementations

17. http2 Features

18. Single Multiplexed Connection to Host

19. 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

20. Binary Frames

21. http2 Performance

22. Multiplexing
HTTP1.1 HTTP2

23. Multiplexing ≠ Silver bullet
http://engineering.khanacademy.org/posts/js-packaging-
http2.htm
‘increased latency due to sub-optimal
behavior of our webserver’

24. HPACK Compression

25. HPACK compression
HTTP1.1
HTTP2

26. Stream Priority
• Based on Dependencies and Weights
• Weight [1 - 256]
*
A
10
B
1
*
A
10
B
1

27. Prioritization in Firefox
• Prioritization is an advisory hint to the server
Server can ignore if necessary
https://www.youtube.com/watch?v=yURLTw
Z3ehk

28. Server Push
https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header/
Assets that need to be pushed

29. Server Push –Key Points
• Server sends a Push Promise frame.
• Pushed resources must be CACHEABLE
• Can push assets must be from the same origin.

31. Tools for Debugging
• H2i - https://github.com/bradfitz/http2/tree/master/h2i
• Chrome://net-internals
• https://github.com/rmurphey/chrome-http2-log-parser

32. 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

33. Thank You!!