Upload
vinci-rufus
View
399
Download
3
Embed Size (px)
Citation preview
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!!